diff --git a/apps/frontend/src/components/billing/first.billing.component.tsx b/apps/frontend/src/components/billing/first.billing.component.tsx index ea42234b..1381b5e2 100644 --- a/apps/frontend/src/components/billing/first.billing.component.tsx +++ b/apps/frontend/src/components/billing/first.billing.component.tsx @@ -22,6 +22,7 @@ import { FAQSection, } from '@gitroom/frontend/components/billing/faq.component'; import { useT } from '@gitroom/react/translation/get.transation.service.client'; +import { useUser } from '@gitroom/frontend/components/layout/user.context'; const ModeComponent = dynamic( () => import('@gitroom/frontend/components/layout/mode.component'), @@ -42,6 +43,7 @@ const EmbeddedBilling = dynamic( export const FirstBillingComponent = () => { const { stripeClient } = useVariables(); + const user = useUser(); const [stripe, setStripe] = useState>(null); const [tier, setTier] = useState('STANDARD'); const [period, setPeriod] = useState('MONTHLY'); @@ -105,29 +107,48 @@ export const FirstBillingComponent = () => {
{t('billing_join_over', 'Join Over')}{' '} - {t('billing_entrepreneurs_count', '18,000+ Entrepreneurs')} {t('billing_who_use', 'who use')}{'\n'}{t('billing_postiz_grow_social', 'Postiz To Grow Their Social Presence')} + + {t('billing_entrepreneurs_count', '18,000+ Entrepreneurs')} + {' '} + {t('billing_who_use', 'who use')} + {'\n'} + {t( + 'billing_postiz_grow_social', + 'Postiz To Grow Their Social Presence' + )}
-
-
-
- + {!!user?.allowTrial && ( +
+
+
+ +
+
+ {t('billing_no_risk_trial', '100% No-Risk Free Trial')} +
-
{t('billing_no_risk_trial', '100% No-Risk Free Trial')}
-
-
-
- +
+
+ +
+
+ {t( + 'billing_pay_nothing_7_days', + 'Pay NOTHING for the first 7-days' + )} +
-
{t('billing_pay_nothing_7_days', 'Pay NOTHING for the first 7-days')}
-
-
-
- +
+
+ +
+
+ {t('billing_cancel_anytime', 'Cancel anytime, hassle-free')} +
-
{t('billing_cancel_anytime', 'Cancel anytime, hassle-free')}
-
+ )} {!isLoading && data && stripe ? ( <> @@ -141,7 +162,9 @@ export const FirstBillingComponent = () => {
-
{t('billing_choose_plan', 'Choose a Plan')}
+
+ {t('billing_choose_plan', 'Choose a Plan')} +
{ )}
-
{t('billing_features', 'Features')}
+
+ {t('billing_features', 'Features')} +
@@ -225,28 +250,43 @@ export const BillingFeatures: FC<{ tier: string }> = ({ tier }) => { const currentPricing = pricing[tier]; const channelsOr = currentPricing.channel; const list: FeatureItem[] = []; - + list.push({ key: channelsOr === 1 ? 'billing_channel' : 'billing_channels', defaultValue: channelsOr === 1 ? 'channel' : 'channels', prefix: channelsOr, }); - + list.push({ key: 'billing_posts_per_month', defaultValue: 'posts per month', - prefix: currentPricing.posts_per_month > 10000 ? 'unlimited' : currentPricing.posts_per_month, + prefix: + currentPricing.posts_per_month > 10000 + ? 'unlimited' + : currentPricing.posts_per_month, }); - + if (currentPricing.team_members) { - list.push({ key: 'billing_unlimited_team_members', defaultValue: 'Unlimited team members' }); + list.push({ + key: 'billing_unlimited_team_members', + defaultValue: 'Unlimited team members', + }); } if (currentPricing?.ai) { - list.push({ key: 'billing_ai_auto_complete', defaultValue: 'AI auto-complete' }); + list.push({ + key: 'billing_ai_auto_complete', + defaultValue: 'AI auto-complete', + }); list.push({ key: 'billing_ai_copilots', defaultValue: 'AI copilots' }); - list.push({ key: 'billing_ai_autocomplete', defaultValue: 'AI Autocomplete' }); + list.push({ + key: 'billing_ai_autocomplete', + defaultValue: 'AI Autocomplete', + }); } - list.push({ key: 'billing_advanced_picture_editor', defaultValue: 'Advanced Picture Editor' }); + list.push({ + key: 'billing_advanced_picture_editor', + defaultValue: 'Advanced Picture Editor', + }); if (currentPricing?.image_generator) { list.push({ key: 'billing_ai_images_per_month',