mirror of
https://github.com/storytold/artcraft.git
synced 2026-10-21 09:22:41 -04:00
Compare commits
5
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b648ce0b0c | ||
|
|
f2d9d5b59f | ||
|
|
eb2b6bb870 | ||
|
|
5cfa17ef93 | ||
|
|
ccbba3f4d6 |
@@ -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 = () => {
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
|
||||
Generated
+1
-4
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user