Compare commits

...
7 changed files with 55 additions and 53 deletions
@@ -156,12 +156,13 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
const creditsStore = useCreditsState();
const sumTotalCredits = creditsStore.totalCredits;
const subscriptionStore = useSubscriptionState();
const hasPaidPlan = subscriptionStore.hasPaidPlan();
//const subscriptionStore = useSubscriptionState();
//const hasPaidPlan = subscriptionStore.hasPaidPlan();
const hasPaidPlan = false;
useEffect(() => {
creditsStore.fetchFromServer();
subscriptionStore.fetchFromServer();
//subscriptionStore.fetchFromServer();
}, []);
useCreditsBalanceChangedEvent(async () => {
@@ -169,7 +170,7 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
});
useSubscriptionPlanChangedEvent(async () => {
subscriptionStore.fetchFromServer();
//subscriptionStore.fetchFromServer();
});
const disableTabSwitcher = () => {
+15 -15
View File
@@ -52,9 +52,6 @@
{
"path": "../../libs/components/button-dropdown"
},
{
"path": "../../libs/components/pricing-modal"
},
{
"path": "../../libs/components/toaster"
},
@@ -86,16 +83,25 @@
"path": "../../libs/model-list"
},
{
"path": "../../libs/components/popover"
"path": "../../libs/common"
},
{
"path": "../../libs/common"
"path": "../../libs/state/subscription"
},
{
"path": "../../libs/state/credits"
},
{
"path": "../../libs/state/subscription"
"path": "../../libs/tauri-events"
},
{
"path": "../../libs/components/pricing-modal"
},
{
"path": "../../libs/components/provider-billing-modal"
},
{
"path": "../../libs/components/provider-setup-modal"
},
{
"path": "../../libs/analytics/google-analytics"
@@ -109,6 +115,9 @@
{
"path": "../../libs/components/settings-modal"
},
{
"path": "../../libs/components/popover"
},
{
"path": "../../libs/components/gravatar"
},
@@ -121,12 +130,6 @@
{
"path": "../../libs/components/upload-modal"
},
{
"path": "../../libs/components/provider-setup-modal"
},
{
"path": "../../libs/components/provider-billing-modal"
},
{
"path": "../../libs/components/modal"
},
@@ -148,9 +151,6 @@
{
"path": "../../libs/tauri-utils"
},
{
"path": "../../libs/tauri-events"
},
{
"path": "../../libs/api"
}
@@ -13,8 +13,5 @@
"import": "./dist/index.js",
"default": "./dist/index.js"
}
},
"dependencies": {
"@tauri-apps/api": "^2.4.0"
}
}
@@ -99,23 +99,23 @@ export function CreditsModal({
};
const cardBase =
"relative rounded-xl border p-6 h-full flex flex-col justify-between bg-ui-panel border-ui-panel-border hover:bg-ui-controls/10 transition-all";
"relative rounded-xl border p-6 h-full flex flex-col justify-between bg-[#1F1F1F] border-white/10 hover:border-white/20 transition-all";
return (
<Modal
isOpen={isOpen}
onClose={onClose ?? (() => {})}
className="rounded-xl bg-ui-panel border border-ui-panel-border max-h-[90vh] max-w-screen-2xl overflow-y-auto flex flex-col"
className="rounded-xl bg-[#1A1A1A] max-h-[90vh] max-w-screen-2xl overflow-y-auto flex flex-col"
allowBackgroundInteraction={false}
showClose={true}
closeOnOutsideClick={true}
resizable={false}
backdropClassName=""
backdropClassName="bg-black/80"
>
<div className="p-16 py-24 flex-1 overflow-y-auto min-h-0 text-base-fg">
<div className="p-16 py-24 flex-1 overflow-y-auto min-h-0">
<div className="text-center mb-10">
<h1 className="text-5xl font-bold text-base-fg mb-4">Buy credits</h1>
<p className="text-base-fg/60 text-lg">
<h1 className="text-5xl font-bold text-white mb-4">Buy credits</h1>
<p className="text-gray-400 text-lg">
Choose a one-time credits package. No subscription required.
</p>
</div>
@@ -124,7 +124,7 @@ export function CreditsModal({
{creditPacks.map((pack) => (
<div key={pack.id} className={cardBase}>
{pack.badge && (
<div className="absolute -top-3 right-4 bg-ui-controls text-base-fg border border-ui-controls-border px-3 py-1 rounded-full text-xs font-semibold shadow-xl">
<div className="absolute -top-3 right-4 bg-white text-black px-3 py-1 rounded-full text-xs font-semibold shadow-xl">
{pack.badge}
</div>
)}
@@ -132,7 +132,7 @@ export function CreditsModal({
<CoinIcon />
<div>
<div className="text-base-fg text-5xl font-bold tracking-tight flex items-center gap-2.5">
<div className="text-white text-5xl font-bold tracking-tight flex items-center gap-2.5">
<FontAwesomeIcon
icon={faCoinFront}
className="text-primary text-3xl"
@@ -140,9 +140,9 @@ export function CreditsModal({
{pack.total.toLocaleString()}
</div>
{pack.bonus > 0 && (
<div className="text-base-fg/60 text-sm mt-2">
<div className="text-gray-400 text-sm mt-2">
Total: {pack.base.toLocaleString()} {" + "}
<span className="text-primary-300">
<span className="text-[#faca5a]">
{pack.bonus.toLocaleString()} Bonus
</span>
</div>
@@ -150,12 +150,12 @@ export function CreditsModal({
</div>
<div className="flex items-center justify-between pt-6">
<div className="text-base-fg text-xl font-semibold">
<div className="text-white text-xl font-semibold">
${pack.priceUsd}
</div>
<Button
onClick={() => handlePurchase(pack)}
className="px-5 h-10 rounded-xl bg-ui-controls text-base-fg border border-ui-controls-border hover:bg-ui-controls/80"
className="bg-white text-black hover:bg-white/90 px-5 h-10 rounded-xl"
>
Purchase
</Button>
@@ -30,11 +30,13 @@ interface PricingModalProps {}
export function PricingModal({}: PricingModalProps = {}) {
const { isOpen, closeModal } = usePricingModalStore();
const subscriptionStore = useSubscriptionState();
//const subscriptionStore = useSubscriptionState();
const hasActiveSub = subscriptionStore.hasPaidPlan();
//const hasActiveSub = subscriptionStore.hasPaidPlan();
const hasActiveSub = false;
const activePlanId = subscriptionStore.subscriptionInfo?.productSlug;
//const activePlanId = subscriptionStore.subscriptionInfo?.productSlug;
const activePlanId = "free";
const [billingType, setBillingType] = useState("yearly");
const isYearly = billingType === "yearly";
@@ -23,31 +23,36 @@ interface BillingSettingsPaneProps {}
export const BillingSettingsPane = (args: BillingSettingsPaneProps) => {
const { toggleModal: toggleSubscriptionModal } = usePricingModalStore();
const creditsStore = useCreditsState();
const sumTotalCredits = creditsStore.totalCredits;
//const creditsStore = useCreditsState();
//const sumTotalCredits = creditsStore.totalCredits;
const sumTotalCredits = 100;
const subscriptionStore = useSubscriptionState();
//const subscriptionStore = useSubscriptionState();
const maybePlanSlug = subscriptionStore.subscriptionInfo?.productSlug;
//const maybePlanSlug = subscriptionStore.subscriptionInfo?.productSlug;
const maybePlanSlug = "free";
const currentPlanDetails: SubscriptionPlanDetails = maybePlanSlug
? SUBSCRIPTION_PLANS_BY_SLUG.get(maybePlanSlug) || FREE_PLAN
: FREE_PLAN;
const canCancelPlan = subscriptionStore.canCancelPlan();
//const canCancelPlan = subscriptionStore.canCancelPlan();
const canCancelPlan = false;
const nextBillAt =
subscriptionStore.subscriptionInfo?.nextBillAt?.toLocaleDateString();
const subscriptionEndAt =
subscriptionStore.subscriptionInfo?.subscriptionEndAt?.toLocaleDateString();
//const nextBillAt =
// subscriptionStore.subscriptionInfo?.nextBillAt?.toLocaleDateString();
const nextBillAt = "";
//const subscriptionEndAt =
// subscriptionStore.subscriptionInfo?.subscriptionEndAt?.toLocaleDateString();
const subscriptionEndAt = "";
const changeOrUpgradePlanButtonLabel = canCancelPlan
? "Change plan"
: "Upgrade plan";
useEffect(() => {
creditsStore.fetchFromServer();
subscriptionStore.fetchFromServer();
//creditsStore.fetchFromServer();
//subscriptionStore.fetchFromServer();
}, []);
return (
@@ -118,7 +123,7 @@ export const BillingSettingsPane = (args: BillingSettingsPaneProps) => {
</div>
</div>
<CreditsTally creditsStore={creditsStore} />
{/*<CreditsTally creditsStore={creditsStore} />*/}
</div>
</div>
</>
+1 -4
View File
@@ -1291,10 +1291,7 @@
},
"libs/components/pricing-modal": {
"name": "@storyteller/ui-pricing-modal",
"version": "0.0.1",
"dependencies": {
"@tauri-apps/api": "^2.4.0"
}
"version": "0.0.1"
},
"libs/components/progress": {
"name": "@storyteller/ui-progress",