@akinon/pz-saved-card 1.66.0 → 1.68.0

package/src/types/index.ts

@@ -1,17 +1,51 @@
-export {};
+import { ReactElement } from 'react';
 
-declare global {
-  interface Window {
-    iyziUcsInit: {
-      scriptType: string;
-      ucsToken: string;
-      createTag: () => void;
-    };
-    universalCardStorage: {
-      binNumber: number;
-      cardToken: string;
-      consumerToken: string;
-      registerConsumerCard: boolean;
-    };
-  }
-}
+export type InstallmentTexts = {
+  title?: string;
+  payments?: string;
+  per_month?: string;
+  total?: string;
+};
+
+export type DeletePopupTexts = {
+  title?: string;
+  delete_button?: string;
+  cancel_button?: string;
+};
+
+export type ErrorTexts = {
+  required?: string;
+};
+
+export type SavedCardOptionTexts = {
+  title?: string;
+  button?: string;
+  installment?: InstallmentTexts;
+  deletePopup?: DeletePopupTexts;
+  errors?: ErrorTexts;
+};
+
+export type CardSelectionSectionProps = {
+  title: string;
+  cards: any[];
+  selectedCard: any;
+  onSelect: (card: any) => void;
+  register: any;
+  errors: any;
+  dispatch: any;
+};
+
+export type InstallmentSectionProps = {
+  title: string;
+  selectedCard: any;
+  installmentOptions: any;
+  translations: InstallmentTexts;
+  errors: any;
+};
+
+export type AgreementAndSubmitProps = {
+  agreementCheckbox: ReactElement | undefined;
+  control: any;
+  errors: any;
+  buttonText: string;
+};

package/src/utils/index.ts

@@ -0,0 +1,15 @@
+export const getCreditCardType = (maskedCardNumber: string): string => {
+  const cardNumber = maskedCardNumber.replace(/\D/g, '');
+
+  if (/^4/.test(cardNumber)) {
+    return 'visa';
+  } else if (/^5[1-5]/.test(cardNumber)) {
+    return 'mastercard';
+  } else if (/^3[47]/.test(cardNumber)) {
+    return 'amex';
+  } else if (/^9/.test(cardNumber)) {
+    return 'troy';
+  } else {
+    return 'other';
+  }
+};

package/src/views/saved-card-option.tsx

@@ -0,0 +1,232 @@
+'use client';
+
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useForm } from 'react-hook-form';
+import React, { ReactElement, useEffect, useMemo } from 'react';
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+import {
+  useCompleteSavedCardMutation,
+  useGetSavedCardsQuery,
+  useSetSavedCardMutation
+} from '../redux/api';
+
+import amex from '../../assets/img/amex.jpg';
+import mastercard from '../../assets/img/mastercard.png';
+import other from '../../assets/img/other.png';
+import troy from '../../assets/img/troy.png';
+import visa from '../../assets/img/visa.png';
+import { setCards } from '../redux/reducer';
+import { DeleteConfirmationModal } from '../components/delete-confirmation-modal';
+import {
+  AgreementAndSubmitProps,
+  CardSelectionSectionProps,
+  ErrorTexts,
+  InstallmentSectionProps,
+  SavedCardOptionTexts
+} from '../types';
+import { CardSelectionSection } from '../components/card-selection-section';
+import { InstallmentSection } from '../components/installment-section';
+import { AgreementAndSubmit } from '../components/agreement-and-submit';
+
+export const cardImages = { amex, mastercard, troy, visa, other };
+
+type SavedCardOptionProps = {
+  texts?: SavedCardOptionTexts;
+  agreementCheckbox?: ReactElement;
+  customRender?: {
+    cardSelectionSection?: (props: CardSelectionSectionProps) => ReactElement;
+    installmentSection?: (props: InstallmentSectionProps) => ReactElement;
+    agreementAndSubmit?: (props: AgreementAndSubmitProps) => ReactElement;
+  };
+  formWrapperClassName?: string;
+  cardSelectionWrapperClassName?: string;
+  installmentWrapperClassName?: string;
+  formProps?: React.FormHTMLAttributes<HTMLFormElement>;
+  cardSelectionWrapperProps?: React.HTMLAttributes<HTMLDivElement>;
+  installmentWrapperProps?: React.HTMLAttributes<HTMLDivElement>;
+};
+
+const defaultTranslations: SavedCardOptionTexts = {
+  title: 'Pay with Saved Card',
+  button: 'Continue with selected card',
+  installment: {
+    title: 'Installment Options'
+  },
+  errors: {
+    required: 'This field is required'
+  }
+};
+
+const mergeTranslations = (
+  customTranslations: SavedCardOptionTexts,
+  defaultTranslations: SavedCardOptionTexts
+) => {
+  return {
+    ...defaultTranslations,
+    ...customTranslations,
+    installment: {
+      ...defaultTranslations.installment,
+      ...customTranslations.installment
+    },
+    errors: {
+      ...defaultTranslations.errors,
+      ...customTranslations.errors
+    },
+    deletePopup: {
+      ...defaultTranslations.deletePopup,
+      ...customTranslations.deletePopup
+    }
+  };
+};
+
+const createFormSchema = (errors: ErrorTexts) =>
+  yup.object().shape({
+    card: yup
+      .string()
+      .required(errors?.required ?? defaultTranslations.errors.required)
+      .typeError(errors?.required ?? defaultTranslations.errors.required),
+    agreement: yup
+      .boolean()
+      .oneOf([true], errors?.required ?? defaultTranslations.errors.required)
+  });
+
+const SavedCardOption = ({
+  texts = defaultTranslations,
+  agreementCheckbox,
+  customRender,
+  formWrapperClassName = 'flex flex-wrap w-full',
+  cardSelectionWrapperClassName = 'w-full flex flex-col xl:w-6/10',
+  installmentWrapperClassName = 'w-full xl:w-4/10 xl:border-l xl:border-t-0',
+  formProps = {},
+  cardSelectionWrapperProps = {},
+  installmentWrapperProps = {}
+}: SavedCardOptionProps) => {
+  const mergedTexts = useMemo(
+    () => mergeTranslations(texts, defaultTranslations),
+    [texts]
+  );
+  const dispatch = useAppDispatch();
+  const { data: savedCards } = useGetSavedCardsQuery();
+  const [completeSavedCard] = useCompleteSavedCardMutation();
+  const [setSavedCard] = useSetSavedCardMutation();
+  const installmentOptions = useAppSelector(
+    (state) => state.checkout.installmentOptions
+  );
+  const cards = useAppSelector((state) => state.savedCard.cards);
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    formState: { errors },
+    setValue,
+    watch
+  } = useForm({
+    resolver: yupResolver(createFormSchema(mergedTexts.errors))
+  });
+
+  const selectedCardToken = watch('card');
+  const selectedCard = useMemo(
+    () => cards?.find((card) => card.token === selectedCardToken),
+    [cards, selectedCardToken]
+  );
+
+  const handleCardSelection = async (card) => {
+    await setSavedCard({ card }).unwrap();
+    setValue('card', card.token, { shouldValidate: true });
+  };
+
+  const onSubmit = async () => {
+    try {
+      await completeSavedCard({ agreement: true });
+    } catch (error) {
+      console.error('Error completing saved card:', error);
+    }
+  };
+
+  useEffect(() => {
+    if (savedCards?.results && !cards?.length) {
+      dispatch(setCards(savedCards.results));
+    }
+  }, [savedCards, cards, dispatch]);
+
+  return (
+    <>
+      <form
+        className={formWrapperClassName}
+        onSubmit={handleSubmit(onSubmit)}
+        {...formProps}
+      >
+        <div
+          className={cardSelectionWrapperClassName}
+          {...cardSelectionWrapperProps}
+        >
+          {customRender?.cardSelectionSection ? (
+            customRender.cardSelectionSection({
+              title: mergedTexts.title,
+              cards,
+              selectedCard,
+              onSelect: handleCardSelection,
+              register,
+              errors,
+              dispatch
+            })
+          ) : (
+            <CardSelectionSection
+              title={mergedTexts.title}
+              cards={cards}
+              selectedCard={selectedCard}
+              onSelect={handleCardSelection}
+              register={register}
+              errors={errors}
+              dispatch={dispatch}
+            />
+          )}
+        </div>
+
+        <div
+          className={installmentWrapperClassName}
+          {...installmentWrapperProps}
+        >
+          {customRender?.installmentSection ? (
+            customRender.installmentSection({
+              title: mergedTexts.installment?.title,
+              selectedCard,
+              installmentOptions,
+              translations: mergedTexts.installment,
+              errors: errors.installment
+            })
+          ) : (
+            <InstallmentSection
+              title={mergedTexts.installment?.title}
+              selectedCard={selectedCard}
+              installmentOptions={installmentOptions}
+              translations={mergedTexts.installment}
+              errors={errors.installment}
+            />
+          )}
+
+          {customRender?.agreementAndSubmit ? (
+            customRender.agreementAndSubmit({
+              agreementCheckbox,
+              control,
+              errors,
+              buttonText: mergedTexts.button
+            })
+          ) : (
+            <AgreementAndSubmit
+              agreementCheckbox={agreementCheckbox}
+              control={control}
+              errors={errors}
+              buttonText={mergedTexts.button}
+            />
+          )}
+        </div>
+      </form>
+      <DeleteConfirmationModal translations={mergedTexts.deletePopup} />
+    </>
+  );
+};
+
+export default SavedCardOption;

package/src/redux/middleware.ts

@@ -1,25 +0,0 @@
-import { Middleware } from '@reduxjs/toolkit';
-import { setUcs } from './reducer';
-
-const savedCardMiddleware: Middleware = ({ dispatch }) => {
-  return (next) => (action) => {
-    const result = next(action);
-
-    const ucsContext = result.payload?.context_list?.find(
-      (context) => context.page_context.ucs
-    );
-
-    if (ucsContext) {
-      const ucs = JSON.parse(JSON.stringify(ucsContext.page_context.ucs));
-
-      const match = ucs.script.match(/<script\b[^>]*>([\s\S]*?)<\/script>/);
-      ucs.script = match ? match[1] : ucs.script;
-
-      dispatch(setUcs(ucs));
-    }
-
-    return result;
-  };
-};
-
-export default savedCardMiddleware;

package/src/routes/saved-card-redirect.tsx

@@ -1,25 +0,0 @@
-import { cookies } from 'next/headers';
-import settings from 'settings';
-import { redirect } from 'next/navigation';
-import { ROUTES } from 'routes';
-
-export const SavedCardRedirect = async () => {
-  const nextCookies = cookies();
-  const sessionId = nextCookies.get('osessionid')?.value;
-
-  if (!sessionId) {
-    return redirect(ROUTES.CHECKOUT);
-  }
-
-  const commerceUrl = settings.commerceUrl;
-
-  const response = await fetch(`${commerceUrl}/orders/saved-card-redirect`, {
-    headers: {
-      Cookie: nextCookies.toString()
-    }
-  });
-
-  const data = await response.text();
-
-  return <div dangerouslySetInnerHTML={{ __html: data }}></div>;
-};

package/src/views/installments.tsx

@@ -1,108 +0,0 @@
-import { Price, Radio } from '@akinon/next/components';
-import { useLocalization } from '@akinon/next/hooks';
-import { useSetInstallmentMutation } from '../endpoints';
-import { useEffect, useState } from 'react';
-
-const defaultTranslations = {
-  payments: 'Payments',
-  per_month: 'Per Month',
-  total: 'Total'
-};
-
-const SavedCardInstallments = ({ installmentOptions, translations, error }) => {
-  const { t } = useLocalization();
-  const [installmentOption, setInstallmentOption] = useState(null);
-  const [setInstallment] = useSetInstallmentMutation();
-
-  const errorMessage = (
-    <div className="px-6 mt-4 text-sm text-error">{error?.message}</div>
-  );
-
-  useEffect(() => {
-    if (
-      installmentOptions[0]?.pk &&
-      installmentOption !== installmentOptions[0]?.pk
-    ) {
-      setInstallment(installmentOptions[0].pk);
-      setInstallmentOption(installmentOptions[0].pk);
-    }
-  }, [installmentOptions, setInstallment]);
-
-  if (installmentOptions.length === 0) {
-    return (
-      <>
-        <div className="text-xs text-black-800 p-4 sm:p-6">
-          {t('checkout.payment.installment_options.description')}
-        </div>
-      </>
-    );
-  }
-
-  return (
-    <>
-      <div>
-        <div className="px-4 mb-4 sm:px-6 sm:mb-6">
-          <table className="w-full border-t border-b border-solid border-gray-400">
-            <thead>
-              <tr>
-                <th
-                  scope="col"
-                  className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 border-0 text-start"
-                >
-                  {translations?.payments ?? defaultTranslations.payments}
-                </th>
-                <th
-                  scope="col"
-                  className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 border-0 text-right"
-                >
-                  {translations?.per_month ?? defaultTranslations.per_month}
-                </th>
-                <th
-                  scope="col"
-                  className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 border-0 text-right"
-                >
-                  {translations?.total ?? defaultTranslations.total}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {installmentOptions.map((option) => (
-                <tr
-                  key={`installment-${option.pk}`}
-                  className="border-t border-solid border-gray-400"
-                >
-                  <td className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 text-left">
-                    <Radio
-                      value={option.pk}
-                      name="installment"
-                      checked={option.pk === installmentOption}
-                      onChange={() => {
-                        setInstallmentOption(option.pk);
-                        setInstallment(option.pk);
-                      }}
-                    >
-                      <span className="w-full flex items-center justify-start pl-2">
-                        <span className="text-xs text-black-800 transition-all">
-                          {option.label}
-                        </span>
-                      </span>
-                    </Radio>
-                  </td>
-                  <td className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 text-right">
-                    <Price value={option.monthly_price_with_accrued_interest} />
-                  </td>
-                  <td className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 text-right">
-                    <Price value={option.price_with_accrued_interest} />
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-        {error && errorMessage}
-      </div>
-    </>
-  );
-};
-
-export default SavedCardInstallments;