From 22016c1fefacf827f4626f3bc3195a668158921e Mon Sep 17 00:00:00 2001 From: Akash Jana Date: Mon, 1 Sep 2025 13:38:14 +0530 Subject: [PATCH 1/3] fix: Added Back(logout) button on Pricing Page --- packages/console/src/components/PlanGate.tsx | 54 ++++++++++++++------ pnpm-lock.yaml | 28 ++++++---- 2 files changed, 56 insertions(+), 26 deletions(-) diff --git a/packages/console/src/components/PlanGate.tsx b/packages/console/src/components/PlanGate.tsx index 1586f53c1..e93ac802d 100644 --- a/packages/console/src/components/PlanGate.tsx +++ b/packages/console/src/components/PlanGate.tsx @@ -2,13 +2,17 @@ import { ReactNode, useMemo } from 'react' import { useW3 } from '@storacha/ui-react' -import StripePricingTable, { StripeTrialPricingTable, SSOIframeStripePricingTable } from './PricingTable' +import StripePricingTable, { + StripeTrialPricingTable, + SSOIframeStripePricingTable, +} from './PricingTable' import { TopLevelLoader } from './Loader' import { Logo } from '@/brand' import { useConditionalPlan } from '@/hooks' import { useSearchParams } from 'next/navigation' import { useIframe } from '@/contexts/IframeContext' import { useRecordRefcode } from '@/lib/referrals/hooks' +import Link from 'next/link' const PricingTable = ({ email, @@ -18,48 +22,64 @@ const PricingTable = ({ referredBy?: string }) => { const { isIframe } = useIframe() - + return ( -
+
+ + ← Back +
{referredBy ? ( <>

Welcome, {email}!

- Congratulations! You are eligible for a free trial of our Lite or - Business subscriptions. That means we won't charge you - anything today. If you choose a Lite plan, you will get two months - for free! If you choose Business, you will get one month for free! - We do need you to provide a valid credit card before we can start - your trial - pick a plan below and complete the checkout flow to - get started! + Congratulations! You are eligible for a free trial of our Lite + or Business subscriptions. That means we won't charge you + anything today. If you choose a Lite plan, you will get two + months for free! If you choose Business, you will get one month + for free! We do need you to provide a valid credit card before + we can start your trial - pick a plan below and complete the + checkout flow to get started!

Please note that after your free trial ends, you will be charged - 10 USD per month for Lite or 100 USD per month for Business tier. + 10 USD per month for Lite or 100 USD per month for Business + tier.

- {isIframe ? : } + {isIframe ? ( + + ) : ( + + )} ) : ( <>

Welcome, {email}!

- To get started you'll need to sign up for a subscription. If - you choose the starter plan we won't charge your credit card, - but we do need a card on file before we will store your bits. + To get started you'll need to sign up for a subscription. + If you choose the starter plan we won't charge your credit + card, but we do need a card on file before we will store your + bits.

Pick a plan below and complete the Stripe checkout flow to get started!

- {isIframe ? : } + {isIframe ? ( + + ) : ( + + )} )}
@@ -140,4 +160,4 @@ export function MaybePlanGate({ } else { return {children} } -} \ No newline at end of file +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2aa19264f..b4e49699e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -310,7 +310,7 @@ importers: version: 20.3.2(@babel/traverse@7.26.5)(@swc/core@1.11.11(@swc/helpers@0.5.15))(@types/node@22.13.10)(nx@20.3.2(@swc/core@1.11.11(@swc/helpers@0.5.15)))(typescript@5.8.3) '@nx/next': specifier: 20.3.2 - version: 20.3.2(@babel/core@7.26.0)(@babel/traverse@7.26.5)(@rspack/core@1.3.6(@swc/helpers@0.5.15))(@swc/core@1.11.11(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)(@types/node@22.13.10)(@zkochan/js-yaml@0.0.7)(eslint@8.57.1)(next@13.5.11(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.87.0))(nx@20.3.2(@swc/core@1.11.11(@swc/helpers@0.5.15)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.8.3)(webpack@5.99.6(@swc/core@1.11.11(@swc/helpers@0.5.15))) + version: 20.3.2(@babel/core@7.26.0)(@babel/traverse@7.26.5)(@rspack/core@1.3.6(@swc/helpers@0.5.15))(@swc/core@1.11.11(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)(@types/node@22.13.10)(@zkochan/js-yaml@0.0.7)(eslint@8.57.1)(next@13.5.11(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.87.0))(nx@20.3.2(@swc/core@1.11.11(@swc/helpers@0.5.15)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.8.3)(webpack@5.88.0(@swc/core@1.11.11(@swc/helpers@0.5.15))) '@types/npm-registry-fetch': specifier: ^8.0.7 version: 8.0.7 @@ -17048,19 +17048,19 @@ snapshots: - vue-tsc - webpack-cli - '@nx/next@20.3.2(@babel/core@7.26.0)(@babel/traverse@7.26.5)(@rspack/core@1.3.6(@swc/helpers@0.5.15))(@swc/core@1.11.11(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)(@types/node@22.13.10)(@zkochan/js-yaml@0.0.7)(eslint@8.57.1)(next@13.5.11(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.87.0))(nx@20.3.2(@swc/core@1.11.11(@swc/helpers@0.5.15)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.8.3)(webpack@5.99.6(@swc/core@1.11.11(@swc/helpers@0.5.15)))': + '@nx/next@20.3.2(@babel/core@7.26.0)(@babel/traverse@7.26.5)(@rspack/core@1.3.6(@swc/helpers@0.5.15))(@swc/core@1.11.11(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)(@types/node@22.13.10)(@zkochan/js-yaml@0.0.7)(eslint@8.57.1)(next@13.5.11(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.87.0))(nx@20.3.2(@swc/core@1.11.11(@swc/helpers@0.5.15)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.8.3)(webpack@5.88.0(@swc/core@1.11.11(@swc/helpers@0.5.15)))': dependencies: '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.0) '@nx/devkit': 20.3.2(nx@20.3.2(@swc/core@1.11.11(@swc/helpers@0.5.15))) '@nx/eslint': 20.3.2(@babel/traverse@7.26.5)(@swc/core@1.11.11(@swc/helpers@0.5.15))(@types/node@22.13.10)(@zkochan/js-yaml@0.0.7)(eslint@8.57.1)(nx@20.3.2(@swc/core@1.11.11(@swc/helpers@0.5.15))) '@nx/js': 20.3.2(@babel/traverse@7.26.5)(@swc/core@1.11.11(@swc/helpers@0.5.15))(@types/node@22.13.10)(nx@20.3.2(@swc/core@1.11.11(@swc/helpers@0.5.15)))(typescript@5.8.3) - '@nx/react': 20.3.2(@babel/traverse@7.26.5)(@swc/core@1.11.11(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)(@types/node@22.13.10)(@zkochan/js-yaml@0.0.7)(eslint@8.57.1)(next@13.5.11(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.87.0))(nx@20.3.2(@swc/core@1.11.11(@swc/helpers@0.5.15)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.8.3)(webpack@5.99.6(@swc/core@1.11.11(@swc/helpers@0.5.15))) + '@nx/react': 20.3.2(@babel/traverse@7.26.5)(@swc/core@1.11.11(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)(@types/node@22.13.10)(@zkochan/js-yaml@0.0.7)(eslint@8.57.1)(next@13.5.11(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.87.0))(nx@20.3.2(@swc/core@1.11.11(@swc/helpers@0.5.15)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.8.3)(webpack@5.88.0(@swc/core@1.11.11(@swc/helpers@0.5.15))) '@nx/web': 20.3.2(@babel/traverse@7.26.5)(@swc/core@1.11.11(@swc/helpers@0.5.15))(@types/node@22.13.10)(nx@20.3.2(@swc/core@1.11.11(@swc/helpers@0.5.15)))(typescript@5.8.3) '@nx/webpack': 20.3.2(@babel/traverse@7.26.5)(@rspack/core@1.3.6(@swc/helpers@0.5.15))(@swc/core@1.11.11(@swc/helpers@0.5.15))(@types/node@22.13.10)(nx@20.3.2(@swc/core@1.11.11(@swc/helpers@0.5.15)))(typescript@5.8.3) '@phenomnomnominal/tsquery': 5.0.1(typescript@5.8.3) '@svgr/webpack': 8.1.0(typescript@5.8.3) - copy-webpack-plugin: 10.2.4(webpack@5.99.6(@swc/core@1.11.11(@swc/helpers@0.5.15))) - file-loader: 6.2.0(webpack@5.99.6(@swc/core@1.11.11(@swc/helpers@0.5.15))) + copy-webpack-plugin: 10.2.4(webpack@5.88.0(@swc/core@1.11.11(@swc/helpers@0.5.15))) + file-loader: 6.2.0(webpack@5.88.0(@swc/core@1.11.11(@swc/helpers@0.5.15))) ignore: 5.3.2 next: 13.5.11(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.87.0) semver: 7.6.3 @@ -17162,7 +17162,7 @@ snapshots: '@nx/nx-win32-x64-msvc@20.8.2': optional: true - '@nx/react@20.3.2(@babel/traverse@7.26.5)(@swc/core@1.11.11(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)(@types/node@22.13.10)(@zkochan/js-yaml@0.0.7)(eslint@8.57.1)(next@13.5.11(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.87.0))(nx@20.3.2(@swc/core@1.11.11(@swc/helpers@0.5.15)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.8.3)(webpack@5.99.6(@swc/core@1.11.11(@swc/helpers@0.5.15)))': + '@nx/react@20.3.2(@babel/traverse@7.26.5)(@swc/core@1.11.11(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)(@types/node@22.13.10)(@zkochan/js-yaml@0.0.7)(eslint@8.57.1)(next@13.5.11(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.87.0))(nx@20.3.2(@swc/core@1.11.11(@swc/helpers@0.5.15)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.8.3)(webpack@5.88.0(@swc/core@1.11.11(@swc/helpers@0.5.15)))': dependencies: '@nx/devkit': 20.3.2(nx@20.3.2(@swc/core@1.11.11(@swc/helpers@0.5.15))) '@nx/eslint': 20.3.2(@babel/traverse@7.26.5)(@swc/core@1.11.11(@swc/helpers@0.5.15))(@types/node@22.13.10)(@zkochan/js-yaml@0.0.7)(eslint@8.57.1)(nx@20.3.2(@swc/core@1.11.11(@swc/helpers@0.5.15))) @@ -17172,7 +17172,7 @@ snapshots: '@phenomnomnominal/tsquery': 5.0.1(typescript@5.8.3) '@svgr/webpack': 8.1.0(typescript@5.8.3) express: 4.21.2 - file-loader: 6.2.0(webpack@5.99.6(@swc/core@1.11.11(@swc/helpers@0.5.15))) + file-loader: 6.2.0(webpack@5.88.0(@swc/core@1.11.11(@swc/helpers@0.5.15))) http-proxy-middleware: 3.0.5 minimatch: 9.0.3 picocolors: 1.1.1 @@ -21268,6 +21268,16 @@ snapshots: graceful-fs: 4.2.11 p-event: 6.0.1 + copy-webpack-plugin@10.2.4(webpack@5.88.0(@swc/core@1.11.11(@swc/helpers@0.5.15))): + dependencies: + fast-glob: 3.3.3 + glob-parent: 6.0.2 + globby: 12.2.0 + normalize-path: 3.0.0 + schema-utils: 4.3.2 + serialize-javascript: 6.0.2 + webpack: 5.88.0(@swc/core@1.11.11(@swc/helpers@0.5.15)) + copy-webpack-plugin@10.2.4(webpack@5.99.6(@swc/core@1.11.11(@swc/helpers@0.5.15))): dependencies: fast-glob: 3.3.3 @@ -22927,11 +22937,11 @@ snapshots: dependencies: flat-cache: 3.2.0 - file-loader@6.2.0(webpack@5.99.6(@swc/core@1.11.11(@swc/helpers@0.5.15))): + file-loader@6.2.0(webpack@5.88.0(@swc/core@1.11.11(@swc/helpers@0.5.15))): dependencies: loader-utils: 2.0.4 schema-utils: 3.3.0 - webpack: 5.99.6(@swc/core@1.11.11(@swc/helpers@0.5.15)) + webpack: 5.88.0(@swc/core@1.11.11(@swc/helpers@0.5.15)) file-uri-to-path@1.0.0: {} From 90b254f662cf2d68569598a3509ef8a34ab94119 Mon Sep 17 00:00:00 2001 From: Akash Jana Date: Mon, 1 Sep 2025 13:45:03 +0530 Subject: [PATCH 2/3] fix: Matching the storacha UI --- packages/console/src/components/PlanGate.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/console/src/components/PlanGate.tsx b/packages/console/src/components/PlanGate.tsx index e93ac802d..ddee84b73 100644 --- a/packages/console/src/components/PlanGate.tsx +++ b/packages/console/src/components/PlanGate.tsx @@ -30,7 +30,7 @@ const PricingTable = ({
← Back From cf9fd97dde95255705dfb4a5bb79f204bfaa997e Mon Sep 17 00:00:00 2001 From: AkashJana18 Date: Thu, 11 Sep 2025 12:39:36 +0530 Subject: [PATCH 3/3] chore: Removing unnecessary reformatting by prettier --- packages/console/src/components/PlanGate.tsx | 45 +++++++------------- 1 file changed, 16 insertions(+), 29 deletions(-) diff --git a/packages/console/src/components/PlanGate.tsx b/packages/console/src/components/PlanGate.tsx index ddee84b73..bc49a8529 100644 --- a/packages/console/src/components/PlanGate.tsx +++ b/packages/console/src/components/PlanGate.tsx @@ -2,10 +2,7 @@ import { ReactNode, useMemo } from 'react' import { useW3 } from '@storacha/ui-react' -import StripePricingTable, { - StripeTrialPricingTable, - SSOIframeStripePricingTable, -} from './PricingTable' +import StripePricingTable, { StripeTrialPricingTable, SSOIframeStripePricingTable } from './PricingTable' import { TopLevelLoader } from './Loader' import { Logo } from '@/brand' import { useConditionalPlan } from '@/hooks' @@ -22,7 +19,7 @@ const PricingTable = ({ referredBy?: string }) => { const { isIframe } = useIframe() - + return (
@@ -40,46 +37,36 @@ const PricingTable = ({

Welcome, {email}!

- Congratulations! You are eligible for a free trial of our Lite - or Business subscriptions. That means we won't charge you - anything today. If you choose a Lite plan, you will get two - months for free! If you choose Business, you will get one month - for free! We do need you to provide a valid credit card before - we can start your trial - pick a plan below and complete the - checkout flow to get started! + Congratulations! You are eligible for a free trial of our Lite or + Business subscriptions. That means we won't charge you + anything today. If you choose a Lite plan, you will get two months + for free! If you choose Business, you will get one month for free! + We do need you to provide a valid credit card before we can start + your trial - pick a plan below and complete the checkout flow to + get started!

Please note that after your free trial ends, you will be charged - 10 USD per month for Lite or 100 USD per month for Business - tier. + 10 USD per month for Lite or 100 USD per month for Business tier.

- {isIframe ? ( - - ) : ( - - )} + {isIframe ? : } ) : ( <>

Welcome, {email}!

- To get started you'll need to sign up for a subscription. - If you choose the starter plan we won't charge your credit - card, but we do need a card on file before we will store your - bits. + To get started you'll need to sign up for a subscription. If + you choose the starter plan we won't charge your credit card, + but we do need a card on file before we will store your bits.

Pick a plan below and complete the Stripe checkout flow to get started!

- {isIframe ? ( - - ) : ( - - )} + {isIframe ? : } )}
@@ -160,4 +147,4 @@ export function MaybePlanGate({ } else { return {children} } -} +} \ No newline at end of file