Skip to content

Commit 21f0b64

Browse files
nevo-davidnevo-david
committed
feat: trailing
1 parent 0690d0b commit 21f0b64

File tree

1 file changed

+67
-27
lines changed

1 file changed

+67
-27
lines changed

‎apps/frontend/src/components/billing/first.billing.component.tsx‎

Lines changed: 67 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
FAQSection,
2323
} from '@gitroom/frontend/components/billing/faq.component';
2424
import { useT } from '@gitroom/react/translation/get.transation.service.client';
25+
import { useUser } from '@gitroom/frontend/components/layout/user.context';
2526

2627
const ModeComponent = dynamic(
2728
() => import('@gitroom/frontend/components/layout/mode.component'),
@@ -42,6 +43,7 @@ const EmbeddedBilling = dynamic(
4243

4344
export const FirstBillingComponent = () => {
4445
const { stripeClient } = useVariables();
46+
const user = useUser();
4547
const [stripe, setStripe] = useState<null | Promise<Stripe>>(null);
4648
const [tier, setTier] = useState('STANDARD');
4749
const [period, setPeriod] = useState('MONTHLY');
@@ -105,29 +107,48 @@ export const FirstBillingComponent = () => {
105107
<div className="flex-1 py-[40px] flex flex-col pe-[40px]">
106108
<div className="text-[36px] font-[600] leading-[110%] whitespace-pre-line">
107109
{t('billing_join_over', 'Join Over')}{' '}
108-
<span className="text-[#FC69FF]">{t('billing_entrepreneurs_count', '18,000+ Entrepreneurs')}</span> {t('billing_who_use', 'who use')}{'\n'}{t('billing_postiz_grow_social', 'Postiz To Grow Their Social Presence')}
110+
<span className="text-[#FC69FF]">
111+
{t('billing_entrepreneurs_count', '18,000+ Entrepreneurs')}
112+
</span>{' '}
113+
{t('billing_who_use', 'who use')}
114+
{'\n'}
115+
{t(
116+
'billing_postiz_grow_social',
117+
'Postiz To Grow Their Social Presence'
118+
)}
109119
</div>
110120

111-
<div className="flex mt-[34px] mb-[10px]">
112-
<div className="flex gap-[8px]">
113-
<div>
114-
<CheckIconComponent />
121+
{!!user?.allowTrial && (
122+
<div className="flex mt-[34px] mb-[10px]">
123+
<div className="flex gap-[8px]">
124+
<div>
125+
<CheckIconComponent />
126+
</div>
127+
<div>
128+
{t('billing_no_risk_trial', '100% No-Risk Free Trial')}
129+
</div>
115130
</div>
116-
<div>{t('billing_no_risk_trial', '100% No-Risk Free Trial')}</div>
117-
</div>
118-
<div className="flex-1 flex gap-[8px] justify-center">
119-
<div>
120-
<CheckIconComponent />
131+
<div className="flex-1 flex gap-[8px] justify-center">
132+
<div>
133+
<CheckIconComponent />
134+
</div>
135+
<div>
136+
{t(
137+
'billing_pay_nothing_7_days',
138+
'Pay NOTHING for the first 7-days'
139+
)}
140+
</div>
121141
</div>
122-
<div>{t('billing_pay_nothing_7_days', 'Pay NOTHING for the first 7-days')}</div>
123-
</div>
124-
<div className="flex gap-[8px]">
125-
<div>
126-
<CheckIconComponent />
142+
<div className="flex gap-[8px]">
143+
<div>
144+
<CheckIconComponent />
145+
</div>
146+
<div>
147+
{t('billing_cancel_anytime', 'Cancel anytime, hassle-free')}
148+
</div>
127149
</div>
128-
<div>{t('billing_cancel_anytime', 'Cancel anytime, hassle-free')}</div>
129150
</div>
130-
</div>
151+
)}
131152

132153
{!isLoading && data && stripe ? (
133154
<>
@@ -141,7 +162,9 @@ export const FirstBillingComponent = () => {
141162
<div className="flex flex-col ps-[40px] border-l border-newColColor py-[40px]">
142163
<div className="top-[20px] sticky">
143164
<div className="flex mb-[24px]">
144-
<div className="flex-1 text-[24px] font-[700]">{t('billing_choose_plan', 'Choose a Plan')}</div>
165+
<div className="flex-1 text-[24px] font-[700]">
166+
{t('billing_choose_plan', 'Choose a Plan')}
167+
</div>
145168
<div className="h-[44px] px-[6px] flex items-center justify-center gap-[12px] border border-newColColor rounded-[12px] select-none">
146169
<div
147170
className={clsx(
@@ -203,7 +226,9 @@ export const FirstBillingComponent = () => {
203226
)}
204227
</div>
205228
<div className="flex flex-col mt-[54px] gap-[24px]">
206-
<div className="text-[24px] font-[700]">{t('billing_features', 'Features')}</div>
229+
<div className="text-[24px] font-[700]">
230+
{t('billing_features', 'Features')}
231+
</div>
207232
<BillingFeatures tier={tier} />
208233
</div>
209234
</div>
@@ -225,28 +250,43 @@ export const BillingFeatures: FC<{ tier: string }> = ({ tier }) => {
225250
const currentPricing = pricing[tier];
226251
const channelsOr = currentPricing.channel;
227252
const list: FeatureItem[] = [];
228-
253+
229254
list.push({
230255
key: channelsOr === 1 ? 'billing_channel' : 'billing_channels',
231256
defaultValue: channelsOr === 1 ? 'channel' : 'channels',
232257
prefix: channelsOr,
233258
});
234-
259+
235260
list.push({
236261
key: 'billing_posts_per_month',
237262
defaultValue: 'posts per month',
238-
prefix: currentPricing.posts_per_month > 10000 ? 'unlimited' : currentPricing.posts_per_month,
263+
prefix:
264+
currentPricing.posts_per_month > 10000
265+
? 'unlimited'
266+
: currentPricing.posts_per_month,
239267
});
240-
268+
241269
if (currentPricing.team_members) {
242-
list.push({ key: 'billing_unlimited_team_members', defaultValue: 'Unlimited team members' });
270+
list.push({
271+
key: 'billing_unlimited_team_members',
272+
defaultValue: 'Unlimited team members',
273+
});
243274
}
244275
if (currentPricing?.ai) {
245-
list.push({ key: 'billing_ai_auto_complete', defaultValue: 'AI auto-complete' });
276+
list.push({
277+
key: 'billing_ai_auto_complete',
278+
defaultValue: 'AI auto-complete',
279+
});
246280
list.push({ key: 'billing_ai_copilots', defaultValue: 'AI copilots' });
247-
list.push({ key: 'billing_ai_autocomplete', defaultValue: 'AI Autocomplete' });
281+
list.push({
282+
key: 'billing_ai_autocomplete',
283+
defaultValue: 'AI Autocomplete',
284+
});
248285
}
249-
list.push({ key: 'billing_advanced_picture_editor', defaultValue: 'Advanced Picture Editor' });
286+
list.push({
287+
key: 'billing_advanced_picture_editor',
288+
defaultValue: 'Advanced Picture Editor',
289+
});
250290
if (currentPricing?.image_generator) {
251291
list.push({
252292
key: 'billing_ai_images_per_month',

0 commit comments

Comments
 (0)