From 99669cce68d507c2ba7df0cd2ddc08e83f5f9daf Mon Sep 17 00:00:00 2001 From: Xavier Abad <77491413+masterprog-cmd@users.noreply.github.com> Date: Fri, 4 Oct 2024 13:35:29 +0200 Subject: [PATCH 1/3] feat: add renewal label (sub price after first cycle) --- src/app/i18n/locales/de.json | 1 + src/app/i18n/locales/en.json | 1 + src/app/i18n/locales/es.json | 1 + src/app/i18n/locales/fr.json | 1 + src/app/i18n/locales/it.json | 1 + src/app/i18n/locales/ru.json | 1 + src/app/i18n/locales/tw.json | 1 + src/app/i18n/locales/zh.json | 1 + .../checkout/ProductCardComponent.tsx | 18 ++++++++++++------ 9 files changed, 20 insertions(+), 6 deletions(-) diff --git a/src/app/i18n/locales/de.json b/src/app/i18n/locales/de.json index 2db844231..683388867 100644 --- a/src/app/i18n/locales/de.json +++ b/src/app/i18n/locales/de.json @@ -174,6 +174,7 @@ "selectedPlan": "Ausgewählter Plan", "numberOfUsers": "Anzahl der Benutzer: {{seats}}", "renewalPeriod": { + "renewsAt": "* Verlängert sich am", "month": "monatlich", "year": "jährlich", "lifetime": "lebenslang" diff --git a/src/app/i18n/locales/en.json b/src/app/i18n/locales/en.json index 4b193ce5f..0a00c4a9a 100644 --- a/src/app/i18n/locales/en.json +++ b/src/app/i18n/locales/en.json @@ -194,6 +194,7 @@ "paymentTitle": "Select a payment method", "productCard": { "renewalPeriod": { + "renewsAt": "* Renews at", "month": "month", "year": "year", "lifetime": "lifetime" diff --git a/src/app/i18n/locales/es.json b/src/app/i18n/locales/es.json index 3f59dc507..7d480bfd2 100644 --- a/src/app/i18n/locales/es.json +++ b/src/app/i18n/locales/es.json @@ -176,6 +176,7 @@ "selectedPlan": "Plan seleccionado", "numberOfUsers": "Número de usuarios: {{seats}}", "renewalPeriod": { + "renewsAt": "* Se renueva en", "month": "mensual", "year": "anual", "lifetime": "lifetime" diff --git a/src/app/i18n/locales/fr.json b/src/app/i18n/locales/fr.json index ffbce598d..8a23fc1cd 100644 --- a/src/app/i18n/locales/fr.json +++ b/src/app/i18n/locales/fr.json @@ -180,6 +180,7 @@ "selectedPlan": "Plan sélectionné", "numberOfUsers": "Nombre d'utilisateurs : {{seats}}", "renewalPeriod": { + "renewsAt": "* Se renouvelle le", "month": "mensuel", "year": "annuel", "lifetime": "à vie" diff --git a/src/app/i18n/locales/it.json b/src/app/i18n/locales/it.json index 6582b80bf..cab64bae2 100644 --- a/src/app/i18n/locales/it.json +++ b/src/app/i18n/locales/it.json @@ -197,6 +197,7 @@ "selectedPlan": "Piano selezionato", "numberOfUsers": "Numero di utenti: {{seats}}", "renewalPeriod": { + "renewsAt": "* Si rinnova il", "month": "mensile", "year": "annuale", "lifetime": "a vita" diff --git a/src/app/i18n/locales/ru.json b/src/app/i18n/locales/ru.json index e09498ae8..d45490de6 100644 --- a/src/app/i18n/locales/ru.json +++ b/src/app/i18n/locales/ru.json @@ -180,6 +180,7 @@ "selectedPlan": "Выбранный план", "numberOfUsers": "Количество пользователей: {{seats}}", "renewalPeriod": { + "renewsAt": "* Продлевается", "month": "ежемесячный", "year": "ежегодный", "lifetime": "пожизненный" diff --git a/src/app/i18n/locales/tw.json b/src/app/i18n/locales/tw.json index baef3f6bd..c66f378ed 100644 --- a/src/app/i18n/locales/tw.json +++ b/src/app/i18n/locales/tw.json @@ -197,6 +197,7 @@ "selectedPlan": "選擇的計劃", "numberOfUsers": "用戶數：{{seats}}", "renewalPeriod": { + "renewsAt": "* 續訂日期為", "month": "每月", "year": "每年", "lifetime": "終身" diff --git a/src/app/i18n/locales/zh.json b/src/app/i18n/locales/zh.json index 5dbe12544..7343f4253 100644 --- a/src/app/i18n/locales/zh.json +++ b/src/app/i18n/locales/zh.json @@ -197,6 +197,7 @@ "selectedPlan": "选择的计划", "numberOfUsers": "用户数量：{{seats}}", "renewalPeriod": { + "renewsAt": "* 续订日期为", "month": "每月", "year": "每年", "lifetime": "终身" diff --git a/src/app/payment/components/checkout/ProductCardComponent.tsx b/src/app/payment/components/checkout/ProductCardComponent.tsx index 1d1b75a9f..ed4a8291f 100644 --- a/src/app/payment/components/checkout/ProductCardComponent.tsx +++ b/src/app/payment/components/checkout/ProductCardComponent.tsx @@ -73,6 +73,8 @@ export const ProductFeaturesComponent = ({ const [couponName, setCouponName] = useState(''); const [openCouponCodeDropdown, setOpenCouponCodeDropdown] = useState(false); const bytes = bytesToString(selectedPlan.bytes); + const currencySymbol = Currency[selectedPlan.currency]; + const normalPriceAmount = selectedPlan.decimalAmount; const { isUpsellSwitchActivated, showUpsellSwitch, onUpsellSwitchButtonClicked } = upsellManager; const isBusiness = selectedPlan.type === UserType.Business; @@ -84,8 +86,11 @@ export const ProductFeaturesComponent = ({ translate, translateList, ); + const renewalPeriodLabel = `${translate('checkout.productCard.renewalPeriod.renewsAt')} + ${currencySymbol}${normalPriceAmount}/${translate( + `checkout.productCard.renewalPeriod.${selectedPlan.interval}`, + )}`; - const normalPriceAmount = selectedPlan.decimalAmount; const planAmount = getProductAmount(selectedPlan.decimalAmount, 1, couponCodeData); const totalAmount = getProductAmount(selectedPlan.decimalAmount, seatsForBusinessSubscription, couponCodeData); const upsellPlanAmount = @@ -134,7 +139,7 @@ export const ProductFeaturesComponent = ({ {textContent.perUserLabel}

- {Currency[selectedPlan.currency]} + {currencySymbol} {planAmount}

@@ -149,7 +154,7 @@ export const ProductFeaturesComponent = ({

- {Currency[selectedPlan.currency]} + {currencySymbol} {normalPriceAmount}

@@ -170,7 +175,7 @@ export const ProductFeaturesComponent = ({

{textContent.totalLabel}

- {Currency[selectedPlan.currency]} + {currencySymbol} {totalAmount}

@@ -197,7 +202,7 @@ export const ProductFeaturesComponent = ({

{translate('checkout.productCard.amountSaved')} - {Currency[selectedPlan.currency]} + {currencySymbol} {upsellManager.amountSaved}

@@ -205,7 +210,7 @@ export const ProductFeaturesComponent = ({

- {Currency[selectedPlan.currency]} + {currencySymbol} {upsellPlanAmount}/{translate('views.account.tabs.account.view.subscription.yearly')}

@@ -292,6 +297,7 @@ export const ProductFeaturesComponent = ({ )} + {couponCodeData && selectedPlan.interval !== 'lifetime' &&

{renewalPeriodLabel}

} ); }; From 5ada2644e5983517654cd21153103acd7fee2180 Mon Sep 17 00:00:00 2001 From: Xavier Abad <77491413+masterprog-cmd@users.noreply.github.com> Date: Fri, 4 Oct 2024 14:48:17 +0200 Subject: [PATCH 2/3] feat: renaming components --- ...ductCardComponent.tsx => CheckoutProductCard.tsx} | 8 ++++---- .../{UserAuthComponent.tsx => CheckoutUserAuth.tsx} | 6 +++--- ...DropdownComponent.tsx => OptionalB2BDropdown.tsx} | 4 ++-- .../views/IntegratedCheckoutView/CheckoutView.tsx | 12 ++++++------ 4 files changed, 15 insertions(+), 15 deletions(-) rename src/app/payment/components/checkout/{ProductCardComponent.tsx => CheckoutProductCard.tsx} (98%) rename src/app/payment/components/checkout/{UserAuthComponent.tsx => CheckoutUserAuth.tsx} (96%) rename src/app/payment/components/checkout/{OptionalB2BDropdownComponent.tsx => OptionalB2BDropdown.tsx} (95%) diff --git a/src/app/payment/components/checkout/ProductCardComponent.tsx b/src/app/payment/components/checkout/CheckoutProductCard.tsx similarity index 98% rename from src/app/payment/components/checkout/ProductCardComponent.tsx rename to src/app/payment/components/checkout/CheckoutProductCard.tsx index ed4a8291f..c173a9cbe 100644 --- a/src/app/payment/components/checkout/ProductCardComponent.tsx +++ b/src/app/payment/components/checkout/CheckoutProductCard.tsx @@ -5,7 +5,7 @@ import { Check, SealPercent, X } from '@phosphor-icons/react'; import { bytesToString } from '../../../drive/services/size.service'; import { useTranslationContext } from '../../../i18n/provider/TranslationProvider'; -import { UpsellManagerProps } from '../../../payment/views/IntegratedCheckoutView/CheckoutViewWrapper'; +import { UpsellManagerProps } from '../../views/IntegratedCheckoutView/CheckoutViewWrapper'; import TextInput from '../../../share/components/ShareItemDialog/components/TextInput'; import Button from '../../../shared/components/Button/Button'; import { useThemeContext } from '../../../theme/ThemeProvider'; @@ -15,7 +15,7 @@ import { CouponCodeData, Currency, RequestedPlanData } from '../../types'; import { SelectSeatsComponent } from './SelectSeatsComponent'; import { getProductAmount } from 'app/payment/utils/getProductAmount'; -interface ProductFeaturesComponentProps { +interface CheckoutProductCardProps { selectedPlan: RequestedPlanData; seatsForBusinessSubscription: number; upsellManager: UpsellManagerProps; @@ -58,7 +58,7 @@ const getTextContent = ( }; }; -export const ProductFeaturesComponent = ({ +export const CheckoutProductCard = ({ selectedPlan, couponCodeData, couponError, @@ -67,7 +67,7 @@ export const ProductFeaturesComponent = ({ onSeatsChange, onRemoveAppliedCouponCode, onCouponInputChange, -}: ProductFeaturesComponentProps) => { +}: CheckoutProductCardProps) => { const { translate, translateList } = useTranslationContext(); const { checkoutTheme } = useThemeContext(); const [couponName, setCouponName] = useState(''); diff --git a/src/app/payment/components/checkout/UserAuthComponent.tsx b/src/app/payment/components/checkout/CheckoutUserAuth.tsx similarity index 96% rename from src/app/payment/components/checkout/UserAuthComponent.tsx rename to src/app/payment/components/checkout/CheckoutUserAuth.tsx index 966063cbb..b25e6ffa9 100644 --- a/src/app/payment/components/checkout/UserAuthComponent.tsx +++ b/src/app/payment/components/checkout/CheckoutUserAuth.tsx @@ -7,7 +7,7 @@ import Button from 'app/shared/components/Button/Button'; import { useTranslationContext } from 'app/i18n/provider/TranslationProvider'; import { InputsComponent } from './InputsComponent'; -interface CreateAccountComponentProps { +interface CheckoutUserAuthProps { userData: { name: string; avatar: Blob | null; @@ -21,7 +21,7 @@ interface CreateAccountComponentProps { onLogOut: () => void; } -export const UserAuthComponent = ({ +export const CheckoutUserAuth = ({ register, errors, authMethod, @@ -29,7 +29,7 @@ export const UserAuthComponent = ({ onAuthMethodToggled, userData, onLogOut, -}: CreateAccountComponentProps) => { +}: CheckoutUserAuthProps) => { const { translate } = useTranslationContext(); const isUserSignedIn = authMethod === 'userIsSignedIn'; diff --git a/src/app/payment/components/checkout/OptionalB2BDropdownComponent.tsx b/src/app/payment/components/checkout/OptionalB2BDropdown.tsx similarity index 95% rename from src/app/payment/components/checkout/OptionalB2BDropdownComponent.tsx rename to src/app/payment/components/checkout/OptionalB2BDropdown.tsx index 5c03f1ecf..f050f3edc 100644 --- a/src/app/payment/components/checkout/OptionalB2BDropdownComponent.tsx +++ b/src/app/payment/components/checkout/OptionalB2BDropdown.tsx @@ -5,13 +5,13 @@ import { IFormValues } from 'app/core/types'; import { useState } from 'react'; import { FieldErrors, UseFormRegister } from 'react-hook-form'; -interface OptionalB2BDropdownComponentProps { +interface OptionalB2BDropdownProps { errors: FieldErrors; translate: (key: string, props?: Record) => string; register: UseFormRegister; } -export const OptionalB2BDropdownComponent = ({ errors, translate, register }: OptionalB2BDropdownComponentProps) => { +export const OptionalB2BDropdown = ({ errors, translate, register }: OptionalB2BDropdownProps) => { const [optionalAddressBillingDetailsDialogClicked, setOptionalAddressBillingDetailsDialogClicked] = useState(); diff --git a/src/app/payment/views/IntegratedCheckoutView/CheckoutView.tsx b/src/app/payment/views/IntegratedCheckoutView/CheckoutView.tsx index 5f4b85cf5..a0350eac5 100644 --- a/src/app/payment/views/IntegratedCheckoutView/CheckoutView.tsx +++ b/src/app/payment/views/IntegratedCheckoutView/CheckoutView.tsx @@ -1,4 +1,4 @@ -import { ProductFeaturesComponent } from '../../components/checkout/ProductCardComponent'; +import { CheckoutProductCard } from '../../components/checkout/CheckoutProductCard'; import { HeaderComponent } from '../../components/checkout/Header'; import LoadingPulse from 'app/shared/components/LoadingPulse/LoadingPulse'; import { AddressElement, PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js'; @@ -6,13 +6,13 @@ import Button from 'app/shared/components/Button/Button'; import { useForm } from 'react-hook-form'; import { IFormValues } from 'app/core/types'; import { AuthMethodTypes } from '../../types'; -import { UserAuthComponent } from '../../components/checkout/UserAuthComponent'; +import { CheckoutUserAuth } from '../../components/checkout/CheckoutUserAuth'; import { useTranslationContext } from 'app/i18n/provider/TranslationProvider'; import { StripePaymentElementOptions } from '@stripe/stripe-js'; import { CheckoutViewManager, UpsellManagerProps, UserInfoProps } from './CheckoutViewWrapper'; import { State } from 'app/payment/store/types'; import { LegacyRef } from 'react'; -import { OptionalB2BDropdownComponent } from 'app/payment/components/checkout/OptionalB2BDropdownComponent'; +import { OptionalB2BDropdown } from 'app/payment/components/checkout/OptionalB2BDropdown'; import { UserType } from '@internxt/sdk/dist/drive/payments/types'; export const PAYMENT_ELEMENT_OPTIONS: StripePaymentElementOptions = { @@ -92,7 +92,7 @@ const CheckoutView = ({ {currentSelectedPlan ? (
-
{currentSelectedPlan.type === UserType.Business ? ( - + ) : undefined}

3. {translate('checkout.paymentTitle')}

@@ -135,7 +135,7 @@ const CheckoutView = ({
- Date: Fri, 4 Oct 2024 16:33:40 +0200 Subject: [PATCH 3/3] fix: handle Enter for CheckoutUserAuth component --- .../payment/components/checkout/CheckoutUserAuth.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/app/payment/components/checkout/CheckoutUserAuth.tsx b/src/app/payment/components/checkout/CheckoutUserAuth.tsx index b25e6ffa9..c9badd828 100644 --- a/src/app/payment/components/checkout/CheckoutUserAuth.tsx +++ b/src/app/payment/components/checkout/CheckoutUserAuth.tsx @@ -45,12 +45,21 @@ export const CheckoutUserAuth = ({ signUp: translate('auth.signup.login'), }; + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + e.preventDefault(); + } + }; + return (

1. {translate(`checkout.authComponent.title.${authMethod}`)}

-
+
{isUserSignedIn ? (