diff --git a/packages/website/components/account/storageManager/storageManager.js b/packages/website/components/account/storageManager/storageManager.js index 5f3b5e5331..b9bb43ee46 100644 --- a/packages/website/components/account/storageManager/storageManager.js +++ b/packages/website/components/account/storageManager/storageManager.js @@ -33,23 +33,18 @@ const StorageManager = ({ className = '', content }) => { const uploaded = useMemo(() => data?.usedStorage?.uploaded || 0, [data]); const psaPinned = useMemo(() => data?.usedStorage?.psaPinned || 0, [data]); const limit = useMemo(() => { - if (currentPlan?.id === 'earlyAdopter') { - return data?.storageLimitBytes || defaultStorageLimit; - } else { - const byteConversion = currentPlan?.tiers?.[0].upTo ? gibibyte * currentPlan.tiers[0].upTo : defaultStorageLimit; - return byteConversion; - } - }, [data, currentPlan]); + const byteConversion = currentPlan?.tiers?.[0].upTo ? gibibyte * currentPlan.tiers[0].upTo : defaultStorageLimit; + return byteConversion; + }, [currentPlan]); const [componentInViewport, setComponentInViewport] = useState(false); const storageManagerRef = useRef(/** @type {HTMLDivElement | null} */ (null)); - const { maxSpaceLabel, percentUploaded, percentPinned } = useMemo( + const { percentUploaded, percentPinned } = useMemo( () => ({ - maxSpaceLabel: `${Math.floor(limit / tebibyte)} ${content.max_space_tib_label}`, percentUploaded: Math.min((uploaded / limit) * 100, 100), percentPinned: Math.min((psaPinned / limit) * 100, 100), }), - [uploaded, psaPinned, limit, content] + [uploaded, psaPinned, limit] ); useEffect(() => { @@ -116,19 +111,11 @@ const StorageManager = ({ className = '', content }) => { standard: 'iec', })} - {currentPlan?.id === 'earlyAdopter' ? ( - <> -  of {maxSpaceLabel} used - - ) : ( - <> -  of{' '} - - {currentPlan?.tiers?.[0].upTo ? formatAsStorageAmount(currentPlan?.tiers?.[0].upTo) : ''} - {' '} - used - - )} +  of{' '} + + {currentPlan?.tiers?.[0].upTo ? formatAsStorageAmount(currentPlan?.tiers?.[0].upTo) : ''} + {' '} + used diff --git a/packages/website/components/accountPlansModal/accountPlansModal.js b/packages/website/components/accountPlansModal/accountPlansModal.js index 43c3752f14..4a42faa186 100644 --- a/packages/website/components/accountPlansModal/accountPlansModal.js +++ b/packages/website/components/accountPlansModal/accountPlansModal.js @@ -121,9 +121,6 @@ const AccountPlansModal = ({ if (typeof currentPlan === 'undefined') { throw new Error('Change plan modal form submitted without selected plan'); } - if (currentPlan.id === 'earlyAdopter') { - throw new Error('Change plan modal form submitted with early adopter plan, but it must be a paid plan'); - } if (currentPlan.id !== 'free' && currentPlan.id !== 'pro' && currentPlan.id !== 'lite') { throw new Error('Unrecognized plan'); } diff --git a/packages/website/components/contexts/plansContext.js b/packages/website/components/contexts/plansContext.js index 5f9132f29c..6026778f50 100644 --- a/packages/website/components/contexts/plansContext.js +++ b/packages/website/components/contexts/plansContext.js @@ -7,16 +7,6 @@ * @property {StoragePrice|Plan} price */ -/** - * @typedef {null} EarlyAdopterStorageSubscription - * When api's /user/payment .subscription.storage is null, there is no storage subscription. - * And that is what we sometimes render as 'Early Adopter' - */ - -/** - * @typedef {'earlyAdopter'} EarlyAdopterPlanId - */ - /** * @typedef {object} StripeTier * @property {number|null} flatAmount @@ -34,7 +24,23 @@ * @property {StripeTier[]} [tiers] */ -export const sharedPlans = [ +export const freePlan = { + id: /** @type {const} */ ('free'), + description: 'You are currently on the free tier. You can use our service up to 5GiB without being charged.', + label: 'Free', + bandwidth: '10', + isPreferred: false, + tiers: [ + { + flatAmount: 0, + unitAmount: 0, + upTo: 5, + }, + ], +}; + +export const plans = [ + freePlan, { id: /** @type {const} */ ('lite'), description: 'For those that want to take advantage of more storage', @@ -74,32 +80,3 @@ export const sharedPlans = [ ], }, ]; - -export const freePlan = { - id: /** @type {const} */ ('free'), - description: 'You are currently on the free tier. You can use our service up to 5GiB without being charged.', - label: 'Free', - bandwidth: '10', - isPreferred: false, - tiers: [ - { - flatAmount: 0, - unitAmount: 0, - upTo: 5, - }, - ], -}; - -export const earlyAdopterPlan = { - id: /** @type {const} */ ('earlyAdopter'), - isPreferred: true, - bandwidth: null, - description: - 'As an early adopter we appreciate your support and can continue to use the storage you are already accustomed to.', - label: 'Early Adopter', - tiers: [], -}; - -export const plans = [freePlan, ...sharedPlans]; -export const plansEarly = [earlyAdopterPlan, ...sharedPlans]; -export const plansAll = [freePlan, earlyAdopterPlan, ...sharedPlans]; diff --git a/packages/website/hooks/use-payment.js b/packages/website/hooks/use-payment.js index ce02d6cc36..abc503fc14 100644 --- a/packages/website/hooks/use-payment.js +++ b/packages/website/hooks/use-payment.js @@ -2,7 +2,7 @@ import { useState, useEffect, useMemo } from 'react'; import { userBillingSettings } from '../lib/api'; import constants from '../lib/constants'; -import { earlyAdopterPlan, plans, plansEarly } from '../components/contexts/plansContext'; +import { freePlan, plans } from '../components/contexts/plansContext'; /** * @typedef {import('../components/contexts/plansContext').Plan} Plan @@ -42,19 +42,6 @@ export const usePayment = () => { loadPaymentSettings(); }, [needsFetchPaymentSettings]); - // When storageSubscription is null, user sees a version of planList that contains 'Early Adopter' instead of 'free' - /** @type {Array} */ - const planList = useMemo(() => { - if (typeof paymentSettings === 'undefined') { - return plans; - } - const storageSubscription = paymentSettings.subscription.storage; - if (storageSubscription === null) { - return plansEarly; - } - return plans; - }, [paymentSettings]); - // whenever the optimisticCurrentPlan is set, enqueue a fetch of actual payment settings useEffect(() => { if (optimisticCurrentPlan) { @@ -72,10 +59,9 @@ export const usePayment = () => { } const storageSubscription = paymentSettings.subscription.storage; if (!storageSubscription) { - // user has no storage subscription, show early adopter plan - return earlyAdopterPlan; + return freePlan; } - const matchingStandardPlan = planList.find(plan => { + const matchingStandardPlan = plans.find(plan => { return plan.id === storageSubscription.price; }); @@ -84,7 +70,7 @@ export const usePayment = () => { } return matchingStandardPlan; - }, [planList, paymentSettings, optimisticCurrentPlan]); + }, [paymentSettings, optimisticCurrentPlan]); const savedPaymentMethod = useMemo(() => { return paymentSettings?.paymentMethod; diff --git a/packages/website/lib/api.js b/packages/website/lib/api.js index c4f107c842..1162584473 100644 --- a/packages/website/lib/api.js +++ b/packages/website/lib/api.js @@ -333,8 +333,6 @@ export class UnexpectedAPIResponseError extends APIError { /** * @typedef {import('../components/contexts/plansContext').StorageSubscription} StorageSubscription - * @typedef {import('../components/contexts/plansContext').EarlyAdopterStorageSubscription - * } EarlyAdopterStorageSubscription */ /** @@ -364,7 +362,7 @@ export function isW3STermsOfServiceAgreement(value) { * Gets/Puts saved user plan and billing settings. * @param {W3STermsOfServiceAgreement|undefined} agreement * @param {string} [pmId] - payment method id - * @param {StorageSubscription|EarlyAdopterStorageSubscription} [storageSubscription] + * @param {StorageSubscription} [storageSubscription] */ export async function userBillingSettings(agreement, pmId, storageSubscription) { const putBody = diff --git a/packages/website/pages/account/payment.js b/packages/website/pages/account/payment.js index 3525b8f11a..ece06548b1 100644 --- a/packages/website/pages/account/payment.js +++ b/packages/website/pages/account/payment.js @@ -14,7 +14,7 @@ import PaymentTable from '../../components/account/paymentTable.js/paymentTable. import PaymentMethodCard from '../../components/account/paymentMethodCard/paymentMethodCard.js'; import AccountPlansModal from '../../components/accountPlansModal/accountPlansModal.js'; import AddPaymentMethodForm from '../../components/account/addPaymentMethodForm/addPaymentMethodForm.js'; -import { earlyAdopterPlan, plans, plansEarly } from '../../components/contexts/plansContext'; +import { plans, freePlan } from '../../components/contexts/plansContext'; import { userBillingSettings } from '../../lib/api'; import GeneralPageData from '../../content/pages/general.json'; import constants from '../../lib/constants.js'; @@ -23,7 +23,6 @@ import constants from '../../lib/constants.js'; * @typedef {import('../../components/contexts/plansContext').Plan} Plan * @typedef {import('../../components/contexts/plansContext').StorageSubscription} StorageSubscription * @typedef {import('../../components/contexts/plansContext').StoragePrice} StoragePrice - * @typedef {import('../../components/contexts/plansContext').EarlyAdopterPlanId} EarlyAdopterPlanId */ /** @@ -96,19 +95,6 @@ const PaymentSettingsPage = props => { loadPaymentSettings(); }, [needsFetchPaymentSettings]); - // When storageSubscription is null, user sees a version of planList that contains 'Early Adopter' instead of 'free' - /** @type {Array} */ - const planList = useMemo(() => { - if (typeof paymentSettings === 'undefined') { - return plans; - } - const storageSubscription = paymentSettings.subscription.storage; - if (storageSubscription === null) { - return plansEarly; - } - return plans; - }, [paymentSettings]); - // whenever the optimisticCurrentPlan is set, enqueue a fetch of actual payment settings useEffect(() => { if (optimisticCurrentPlan) { @@ -126,15 +112,14 @@ const PaymentSettingsPage = props => { } const storageSubscription = paymentSettings.subscription.storage; if (!storageSubscription) { - // user has no storage subscription, show early adopter plan - return earlyAdopterPlan; + return freePlan; } return typeof storageSubscription.price === 'string' - ? planList.find(plan => { + ? plans.find(plan => { return plan.id === storageSubscription.price; }) : storageSubscription.price; - }, [planList, paymentSettings, optimisticCurrentPlan]); + }, [paymentSettings, optimisticCurrentPlan]); const savedPaymentMethod = useMemo(() => { return paymentSettings?.paymentMethod; }, [paymentSettings]); @@ -160,7 +145,7 @@ const PaymentSettingsPage = props => { ) : ( { removePlanQueryParam(); } }} - planList={planList} + planList={plans} planSelection={planSelection} setCurrentPlan={setOptimisticCurrentPlan} savedPaymentMethod={savedPaymentMethod}