Merge pull request #320 from jwplayer/feat/change-subscription

feat: initial inplayer subscription change implementation

package.json

@@ -41,7 +41,7 @@
   "dependencies": {
     "@adyen/adyen-web": "^5.42.1",
     "@codeceptjs/allure-legacy": "^1.0.2",
-    "@inplayer-org/inplayer.js": "^3.13.12",
+    "@inplayer-org/inplayer.js": "^3.13.13",
     "classnames": "^2.3.1",
     "date-fns": "^2.28.0",
     "dompurify": "^2.3.8",

public/locales/en/user.json

@@ -70,9 +70,14 @@
     "billing_history": "Billing history",
     "cancel_subscription": "Cancel subscription",
     "card_number": "Card number",
+    "change_plan": "Change Plan",
+    "change_plan_error": "There was a problem saving your subscription plan change.",
     "change_subscription": "Change subscription",
     "complete_subscription": "Complete subscription",
+    "current_plan": "CURRENT PLAN",
     "daily_subscription": "Daily subscription",
+    "downgrade_on": "Pending downgrade on {{date}}",
+    "downgrade_plan_success": "You've successfully changed the subscription plan. Your new plan will start after the end of the current cycle ({{date}}).",
     "expiry_date": "Expiry date",
     "granted_subscription": "Granted subscription",
     "hidden_transactions_one": "One more transaction",
@@ -85,6 +90,7 @@
     "no_transactions": "No transactions",
     "other": "other",
     "payment_method": "Payment method",
+    "pending_downgrade": "Pending downgrade",
     "pending_offer_switch": "Will update to a \"{{title}}\" after the next billing date",
     "price_paid_with": "{{price}} paid with {{method}}",
     "price_paid_with_card": "Price paid with card",
@@ -95,6 +101,7 @@
     "subscription_details": "Subscription details",
     "subscription_expires_on": "This plan will expire on {{date}}",
     "update_payment_details": "Update payment details",
+    "upgrade_plan_success": "You've successfully changed the subscription plan. You can enjoy your additional benefits immediately.",
     "weekly_subscription": "Weekly subscription"
   }
 }

public/locales/es/user.json

@@ -70,9 +70,14 @@
     "billing_history": "Historial de facturación",
     "cancel_subscription": "Cancelar suscripción",
     "card_number": "Número de tarjeta",
+    "change_plan": "",
+    "change_plan_error": "",
     "change_subscription": "Cambiar suscripción",
     "complete_subscription": "Completar suscripción",
+    "current_plan": "",
     "daily_subscription": "Suscripción diaria",
+    "downgrade_on": "",
+    "downgrade_plan_success": "",
     "expiry_date": "Fecha de vencimiento",
     "granted_subscription": "Suscripción otorgada",
     "hidden_transactions_one": "Una transacción más",
@@ -86,6 +91,7 @@
     "no_transactions": "No hay transacciones",
     "other": "otro",
     "payment_method": "Método de pago",
+    "pending_downgrade": "",
     "pending_offer_switch": "Se actualizará a \"{{title}}\" después de la próxima fecha de facturación",
     "price_paid_with": "{{price}} pagado con {{method}}",
     "price_paid_with_card": "Precio pagado con tarjeta",
@@ -96,6 +102,7 @@
     "subscription_details": "Detalles de la suscripción",
     "subscription_expires_on": "Este plan expirará el {{date}}",
     "update_payment_details": "Actualizar detalles de pago",
+    "upgrade_plan_success": "",
     "weekly_subscription": "Suscripción semanal"
   }
 }

src/components/OfferSwitch/OfferSwitch.module.scss

@@ -0,0 +1,62 @@
+@use 'src/styles/variables';
+@use 'src/styles/theme';
+
+.offerSwitchContainer {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: auto;
+  padding: 16px;
+  gap: 25px;
+  color: variables.$gray-white;
+  background-color: theme.$panel-bg;
+  border-radius: 4px;
+}
+
+.activeOfferSwitchContainer {
+  color: variables.$gray-darker;
+  background-color: variables.$white;
+}
+
+.offerSwitchInfoContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  height: 100%;
+  gap: 4px;
+  font-weight: 600;
+}
+
+.offerSwitchPlanContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 2px;
+}
+
+.currentPlanHeading {
+  color: variables.$gray;
+  font-size: 10px;
+}
+
+.activeCurrentPlanHeading {
+  color: variables.$gray;
+}
+
+.nextBillingDate {
+  color: variables.$gray;
+  font-weight: 400;
+  font-size: 12px;
+}
+
+.price {
+  margin-left: auto;
+  font-size: 20px;
+  line-height: 28px;
+}
+
+.paymentFrequency {
+  font-size: 12px;
+}

src/components/OfferSwitch/OfferSwitch.tsx

@@ -0,0 +1,55 @@
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+
+import styles from './OfferSwitch.module.scss';
+
+import type { Offer } from '#types/checkout';
+import Checkbox from '#components/Checkbox/Checkbox';
+import { formatLocalizedDate, formatPrice } from '#src/utils/formatting';
+
+type OfferSwitchProps = {
+  isCurrentOffer: boolean;
+  pendingDowngradeOfferId: string;
+  offer: Offer;
+  selected: boolean;
+  onChange: (offerId: string) => void;
+  expiresAt: number | undefined;
+};
+
+const OfferSwitch = ({ isCurrentOffer, pendingDowngradeOfferId, offer, selected, onChange, expiresAt }: OfferSwitchProps) => {
+  const { t, i18n } = useTranslation(['user', 'account']);
+  const { customerPriceInclTax, customerCurrency, period } = offer;
+
+  const isPendingDowngrade = pendingDowngradeOfferId === offer.offerId;
+
+  return (
+    <div className={classNames(styles.offerSwitchContainer, { [styles.activeOfferSwitchContainer]: selected })}>
+      <Checkbox disabled={isPendingDowngrade} name={offer.offerId} checked={selected} onChange={() => onChange(offer.offerId)} />
+      <div className={styles.offerSwitchInfoContainer}>
+        {(isCurrentOffer || isPendingDowngrade) && (
+          <div className={classNames(styles.currentPlanHeading, { [styles.activeCurrentPlanHeading]: selected })}>
+            {isCurrentOffer && t('user:payment.current_plan').toUpperCase()}
+            {isPendingDowngrade && t('user:payment.pending_downgrade').toUpperCase()}
+          </div>
+        )}
+        <div className={styles.offerSwitchPlanContainer}>
+          <div>{t(`user:payment.${period === 'month' ? 'monthly' : 'annual'}_subscription`)}</div>
+          {(isCurrentOffer || isPendingDowngrade) && expiresAt && (
+            <div className={styles.nextBillingDate}>
+              {isCurrentOffer &&
+                !pendingDowngradeOfferId &&
+                t('user:payment.next_billing_date_on', { date: formatLocalizedDate(new Date(expiresAt * 1000), i18n.language) })}
+              {isPendingDowngrade && t('user:payment.downgrade_on', { date: formatLocalizedDate(new Date(expiresAt * 1000), i18n.language) })}
+            </div>
+          )}
+        </div>
+      </div>
+      <div className={styles.price}>
+        {formatPrice(customerPriceInclTax, customerCurrency, undefined)}
+        <span className={styles.paymentFrequency}>/{t(`account:periods.${period}_one`)}</span>
+      </div>
+    </div>
+  );
+};
+
+export default OfferSwitch;

src/components/Payment/Payment.module.scss

@@ -83,3 +83,20 @@
     margin: 0 0 8px;
   }
 }
+
+.changePlanContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.changePlanButtons {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  gap: 12px;
+}
+
+.changePlanCancelButton {
+  margin-left: auto;
+}

src/components/Payment/Payment.test.tsx

@@ -25,6 +25,19 @@ describe('<Payment>', () => {
         isLoading={false}
         offerSwitchesAvailable={false}
         onShowReceiptClick={vi.fn()}
+        onUpgradeSubscriptionClick={vi.fn()}
+        onShowAllTransactionsClick={vi.fn()}
+        changeSubscriptionPlan={{
+          isLoading: false,
+          isSuccess: false,
+          isError: false,
+          reset: vi.fn(),
+        }}
+        onChangePlanClick={vi.fn()}
+        selectedOfferId={null}
+        setSelectedOfferId={vi.fn()}
+        isUpgradeOffer={undefined}
+        setIsUpgradeOffer={vi.fn()}
       />,
     );