diff --git a/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.scss b/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.scss index 0afb96bc78..b157d9b855 100644 --- a/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.scss +++ b/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.scss @@ -9,6 +9,7 @@ .overlay { position: absolute; + z-index: 5; top: 0; left: 0; width: 100%; @@ -20,7 +21,6 @@ color: rgba($white, 0.8); font-size: 16px; pointer-events: all; - text-shadow: 0 0 10px rgba(0, 0, 0, 1); border: 1px solid rgba($primary, 0.4); border-radius: 0.5rem; } diff --git a/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.tsx b/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.tsx index 9ac64189e4..0fe0ff7c8f 100644 --- a/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.tsx +++ b/packages/fakeyou.com/src/components/PremiumLock/PremiumLock.tsx @@ -1,25 +1,31 @@ -import { Panel } from "components/common"; +import { Button, Panel } from "components/common"; import { Link } from "react-router-dom"; import React from "react"; import "./PremiumLock.scss"; import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faLock } from "@fortawesome/pro-solid-svg-icons"; +import { faLock, faUp } from "@fortawesome/pro-solid-svg-icons"; interface PremiumLockProps { - requiredPlan?: "plus" | "pro" | "elite"; + requiredPlan?: "any" | "plus" | "pro" | "elite"; + large?: boolean; children: React.ReactNode; session?: any; sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; + showCtaButton?: boolean; } export default function PremiumLock({ requiredPlan = "plus", children, sessionSubscriptionsWrapper, + showCtaButton = false, + large = false, }: PremiumLockProps) { const hasAccess = () => { switch (requiredPlan) { + case "any": + return sessionSubscriptionsWrapper.hasPaidFeatures(); case "plus": return ( sessionSubscriptionsWrapper.hasActivePlusSubscription() || @@ -34,7 +40,7 @@ export default function PremiumLock({ case "elite": return sessionSubscriptionsWrapper.hasActiveEliteSubscription(); default: - return false; + return sessionSubscriptionsWrapper.hasPaidFeatures(); } }; @@ -47,11 +53,33 @@ export default function PremiumLock({ {children}
- -
- This feature requires a{" "} - {requiredPlan} subscription -
+ + {requiredPlan === "any" ? ( + + This feature requires a{" "} + + subscription plan. + + + ) : ( + + This feature requires a{" "} + {requiredPlan} subscription + + )} + + {showCtaButton && ( +
diff --git a/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx b/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx index d6d00b72ad..b87e1cd5c0 100644 --- a/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx @@ -259,6 +259,10 @@ function SdInferencePanel({ return false; } + if (!sessionSubscriptionsWrapper.hasPaidFeatures()) { + return false; + } + if (!sessionSubscriptionsWrapper.hasActiveProSubscription()) { batchCountSet(1); } @@ -310,234 +314,241 @@ function SdInferencePanel({ }; return ( -
- - -

Generate an Image

-
+ +
+ + +

Generate an Image

+
- -
- {(isStandalone || weightPageType === "lora") && ( - +
+ {(isStandalone || weightPageType === "lora") && ( + + )} + + - )} - - - - -
-
-
- - - -
- -
- -
- - -
-
- - - {weightPageType === "sd" && ( - + +
+
- - -
- {isStandalone && ( -
-

- - Can't find the model weights you're looking for? - {" "} - Upload your own! -

-
- )} - -
-
-
- - - + + +
+ +
+ +
+ + +
+
+ + + {weightPageType === "sd" && ( + + )} +
+
+
+
+ {isStandalone && ( +
+

+ + Can't find the model weights you're looking for? + {" "} + Upload your own! +

+
+ )} + +
+
+
+ - {inferenceJobs[0] ? ( -
-
- ) : ( - <> - {isStandalone && ( - -
-

- - No jobs queued -

+ -

Your queued image jobs will appear here.

-
-
- )} - - )} -
+ {inferenceJobs[0] ? ( +
+ +
+ ) : ( + <> + {isStandalone && ( + +
+

+ + No jobs queued +

+ +

Your queued image jobs will appear here.

+
+
+ )} + + )} +
+ ); }