@akinon/pz-saved-card 1.62.0-rc.24 → 1.63.0

package/src/components/installments.tsx

@@ -1,113 +0,0 @@
-import { Price, Radio } from '@akinon/next/components';
-import { useLocalization } from '@akinon/next/hooks';
-import { useSetSavedCardInstallmentOptionMutation } from '../redux/api';
-import { useEffect, useState } from 'react';
-import { SavedCard } from '../redux/reducer';
-import { InstallmentTexts } from '../types';
-
-const defaultTranslations = {
-  payments: 'Payments',
-  per_month: 'Per Month',
-  total: 'Total'
-};
-
-type SavedCardInstallmentsProps = {
-  selectedCard: SavedCard;
-  installmentOptions: any[];
-  translations?: InstallmentTexts;
-  error: any;
-};
-
-const SavedCardInstallments = ({
-  selectedCard,
-  installmentOptions = [],
-  translations,
-  error
-}: SavedCardInstallmentsProps) => {
-  const { t } = useLocalization();
-  const [installmentOption, setInstallmentOption] = useState(null);
-  const [setInstallment] = useSetSavedCardInstallmentOptionMutation();
-
-  useEffect(() => {
-    if (
-      selectedCard &&
-      installmentOptions.length > 0 &&
-      installmentOptions[0]?.pk !== installmentOption
-    ) {
-      const firstOptionPk = installmentOptions[0].pk;
-      setInstallment({
-        installment: firstOptionPk
-      });
-      setInstallmentOption(firstOptionPk);
-    }
-  }, [installmentOptions, installmentOption, setInstallment, selectedCard]);
-
-  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 border-solid border-gray-400">
-          <thead>
-            <tr>
-              <th className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 text-start">
-                {translations?.payments || defaultTranslations.payments}
-              </th>
-              <th className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 text-right">
-                {translations?.per_month || defaultTranslations.per_month}
-              </th>
-              <th className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 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={() => {
-                      setInstallment({
-                        installment: option.pk
-                      });
-                      setInstallmentOption(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 && (
-        <div className="px-6 mt-4 text-sm text-error">{error.message}</div>
-      )}
-    </div>
-  );
-};
-
-export default SavedCardInstallments;

package/src/utils/index.ts

@@ -1,15 +0,0 @@
-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

@@ -1,232 +0,0 @@
-'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;