[_]: feat/renewal label for subscriptions with coupon code

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"

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"

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"

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"

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"

src/app/i18n/locales/ru.json

@@ -180,6 +180,7 @@
       "selectedPlan": "Выбранный план",
       "numberOfUsers": "Количество пользователей: {{seats}}",
       "renewalPeriod": {
+        "renewsAt": "* Продлевается",
         "month": "ежемесячный",
         "year": "ежегодный",
         "lifetime": "пожизненный"

src/app/i18n/locales/tw.json

@@ -197,6 +197,7 @@
       "selectedPlan": "選擇的計劃",
       "numberOfUsers": "用戶數：{{seats}}",
       "renewalPeriod": {
+        "renewsAt": "* 續訂日期為",
         "month": "每月",
         "year": "每年",
         "lifetime": "終身"

src/app/i18n/locales/zh.json

@@ -197,6 +197,7 @@
       "selectedPlan": "选择的计划",
       "numberOfUsers": "用户数量：{{seats}}",
       "renewalPeriod": {
+        "renewsAt": "* 续订日期为",
         "month": "每月",
         "year": "每年",
         "lifetime": "终身"

src/app/payment/components/checkout/ProductCardComponent.tsx → 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,12 +67,14 @@ export const ProductFeaturesComponent = ({
   onSeatsChange,
   onRemoveAppliedCouponCode,
   onCouponInputChange,
-}: ProductFeaturesComponentProps) => {
+}: CheckoutProductCardProps) => {
   const { translate, translateList } = useTranslationContext();
   const { checkoutTheme } = useThemeContext();
   const [couponName, setCouponName] = useState<string>('');
   const [openCouponCodeDropdown, setOpenCouponCodeDropdown] = useState<boolean>(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}
             </p>
             <p className="font-semibold">
-              {Currency[selectedPlan.currency]}
+              {currencySymbol}
               {planAmount}
             </p>
           </div>
@@ -149,7 +154,7 @@ export const ProductFeaturesComponent = ({
                 </p>
               </div>
               <p className="text-gray-50 line-through">
-                {Currency[selectedPlan.currency]}
+                {currencySymbol}
                 {normalPriceAmount}
               </p>
             </div>
@@ -170,7 +175,7 @@ export const ProductFeaturesComponent = ({
           <div className="flex flex-row items-center justify-between text-2xl font-semibold text-gray-100">
             <p>{textContent.totalLabel}</p>
             <p>
-              {Currency[selectedPlan.currency]}
+              {currencySymbol}
               {totalAmount}
             </p>
           </div>
@@ -197,15 +202,15 @@ export const ProductFeaturesComponent = ({
                   <div className="flex h-full rounded-lg bg-green/10 px-3 py-1">
                     <p className="text-sm text-green">
                       {translate('checkout.productCard.amountSaved')}
-                      {Currency[selectedPlan.currency]}
+                      {currencySymbol}
                       {upsellManager.amountSaved}
                     </p>
                   </div>
                   <p className="font-medium text-gray-80">{translate('checkout.productCard.withAnnualBilling')}</p>
                 </div>
                 <div className="flex flex-row items-center">
                   <p className="text-sm text-gray-80">
-                    {Currency[selectedPlan.currency]}
+                    {currencySymbol}
                     {upsellPlanAmount}/{translate('views.account.tabs.account.view.subscription.yearly')}
                   </p>
                 </div>
@@ -292,6 +297,7 @@ export const ProductFeaturesComponent = ({
           )}
         </div>
       </div>
+      {couponCodeData && selectedPlan.interval !== 'lifetime' && <p className="text-gray-60">{renewalPeriodLabel}</p>}
     </div>
   );
 };

src/app/payment/components/checkout/UserAuthComponent.tsx → 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,15 +21,15 @@ interface CreateAccountComponentProps {
   onLogOut: () => void;
 }
 
-export const UserAuthComponent = ({
+export const CheckoutUserAuth = ({
   register,
   errors,
   authMethod,
   authError,
   onAuthMethodToggled,
   userData,
   onLogOut,
-}: CreateAccountComponentProps) => {
+}: CheckoutUserAuthProps) => {
   const { translate } = useTranslationContext();
 
   const isUserSignedIn = authMethod === 'userIsSignedIn';
@@ -45,12 +45,21 @@ export const UserAuthComponent = ({
     signUp: translate('auth.signup.login'),
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+    }
+  };
+
   return (
     <div className="flex flex-col space-y-8">
       <p className="text-2xl font-semibold text-gray-100">
         1. {translate(`checkout.authComponent.title.${authMethod}`)}
       </p>
-      <div className="flex flex-col space-y-4 rounded-2xl border border-gray-10 bg-surface p-5">
+      <div
+        onKeyDown={handleKeyDown}
+        className="flex flex-col space-y-4 rounded-2xl border border-gray-10 bg-surface p-5"
+      >
         {isUserSignedIn ? (
           <div className="flex w-full items-center justify-center">
             <div className="flex flex-col items-center gap-2.5">

src/app/payment/components/checkout/OptionalB2BDropdownComponent.tsx → 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<IFormValues>;
   translate: (key: string, props?: Record<string, unknown>) => string;
   register: UseFormRegister<IFormValues>;
 }
 
-export const OptionalB2BDropdownComponent = ({ errors, translate, register }: OptionalB2BDropdownComponentProps) => {
+export const OptionalB2BDropdown = ({ errors, translate, register }: OptionalB2BDropdownProps) => {
   const [optionalAddressBillingDetailsDialogClicked, setOptionalAddressBillingDetailsDialogClicked] =
     useState<boolean>();
 

src/app/payment/views/IntegratedCheckoutView/CheckoutView.tsx

@@ -1,18 +1,18 @@
-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';
 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 ? (
             <div className="flex flex-col items-center justify-center gap-10 lg:flex-row lg:items-start lg:justify-between">
               <div className="flex w-full max-w-xl flex-col space-y-14" ref={userAuthComponentRef}>
-                <UserAuthComponent
+                <CheckoutUserAuth
                   errors={errors}
                   authError={error?.auth}
                   register={register}
@@ -119,7 +119,7 @@ const CheckoutView = ({
                       />
                     </div>
                     {currentSelectedPlan.type === UserType.Business ? (
-                      <OptionalB2BDropdownComponent errors={errors} register={register} translate={translate} />
+                      <OptionalB2BDropdown errors={errors} register={register} translate={translate} />
                     ) : undefined}
                   </div>
                   <p className="text-2xl font-semibold text-gray-100">3. {translate('checkout.paymentTitle')}</p>
@@ -135,7 +135,7 @@ const CheckoutView = ({
                 </div>
               </div>
               <div className="top-5 flex w-full max-w-xl flex-col gap-5 pb-10 lg:sticky lg:max-w-lg">
-                <ProductFeaturesComponent
+                <CheckoutProductCard
                   selectedPlan={currentSelectedPlan}
                   couponCodeData={couponCodeData}
                   couponError={error?.coupon}