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

package/src/views/option.tsx

@@ -0,0 +1,400 @@
+'use client';
+
+import * as yup from 'yup';
+import { cloneElement, ReactElement, useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+import {
+  useSetCompleteSavedCardMutation,
+  useSetSavedCardMutation
+} from '../endpoints';
+import { yupResolver } from '@hookform/resolvers/yup';
+import Script from 'next/script';
+import { resetUcs } from '../redux/reducer';
+import { Button, Icon, Image, Input, Select } from '@akinon/next/components';
+import SavedCardInstallments from './installments';
+import '../types';
+
+type SavedCardOptionProps = {
+  texts?: {
+    title?: string;
+    button?: string;
+    installment?: {
+      title?: string;
+      payments?: string;
+    };
+    label?: {
+      cardNumber?: string;
+      expiryDate?: string;
+      cvv?: string;
+    };
+    placeholder?: {
+      cardNumber?: string;
+      cardMonth?: string;
+      cardYear?: string;
+      cardCvv?: string;
+    };
+    errors?: {
+      required?: string;
+      cardNumberLength?: string;
+      cvvLength?: string;
+      saveCard?: string;
+    };
+  };
+  agreementCheckbox?: ReactElement;
+};
+
+const defaultTranslations: SavedCardOptionProps = {
+  texts: {
+    title: 'Pay with Iyzico Saved Card',
+    button: 'Continue with selected card',
+    installment: {
+      title: 'Installment Options'
+    },
+    label: {
+      cardNumber: 'Card Number',
+      expiryDate: 'Expiration Date',
+      cvv: 'CVC'
+    },
+    placeholder: {
+      cardMonth: 'Month',
+      cardYear: 'year'
+    },
+    errors: {
+      required: 'This field is required',
+      cardNumberLength: 'Card number must be 16 digits long.',
+      cvvLength: 'CVV must be 3 digits long.',
+      saveCard:
+        "Please check the 'Save my card with Iyzico' option to proceed with the payment."
+    }
+  }
+};
+
+const formSchema = (translations) => {
+  return yup.object().shape({
+    card_number: yup
+      .string()
+      .transform((value: string) => value.replace(/_/g, '').replace(/ /g, ''))
+      .length(
+        16,
+        translations?.cardNumberLength ??
+          defaultTranslations.texts.errors.cardNumberLength
+      )
+      .required(
+        translations?.required ?? defaultTranslations.texts.errors.required
+      ),
+    card_month: yup
+      .string()
+      .required(
+        translations?.required ?? defaultTranslations.texts.errors.required
+      ),
+    card_year: yup
+      .string()
+      .required(
+        translations?.required ?? defaultTranslations.texts.errors.required
+      ),
+    card_cvv: yup
+      .string()
+      .transform((value: string) => value.replace(/_/g, '').replace(/ /g, ''))
+      .length(
+        3,
+        translations?.cvvLength ?? defaultTranslations.texts.errors.cvvLength
+      )
+      .required(
+        translations?.required ?? defaultTranslations.texts.errors.required
+      ),
+    agreement: yup
+      .boolean()
+      .oneOf(
+        [true],
+        translations?.required ?? defaultTranslations.texts.errors.required
+      )
+  });
+};
+
+export function Option(props: SavedCardOptionProps) {
+  const dispatch = useAppDispatch();
+  const [formError, setFormError] = useState(null);
+  const [months, setMonths] = useState([]);
+  const [years, setYears] = useState([]);
+  const [installmentOptions, setInstallmentOptions] = useState([]);
+
+  const ucs = useAppSelector((state) => state.saved_card.ucs);
+  const [setSavedCard] = useSetSavedCardMutation();
+  const [setCompleteSavedCard] = useSetCompleteSavedCardMutation();
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    formState: { errors }
+  } = useForm({
+    resolver: yupResolver(formSchema(props.texts?.errors))
+  });
+
+  useEffect(() => {
+    window.iyziUcsInit?.createTag();
+
+    const months = [
+      {
+        label:
+          props.texts?.placeholder?.cardMonth ??
+          defaultTranslations.texts.placeholder.cardMonth,
+        value: ''
+      }
+    ];
+    const years = [
+      {
+        label:
+          props.texts?.placeholder?.cardYear ??
+          defaultTranslations.texts.placeholder.cardYear,
+        value: ''
+      }
+    ];
+    const date = new Date();
+    const currentYear = date.getFullYear();
+
+    for (let i = 1; i <= 12; i++) {
+      months.push({ label: i.toString(), value: i.toString() });
+    }
+
+    for (let i = currentYear; i < currentYear + 13; i++) {
+      years.push({ label: i.toString(), value: i.toString() });
+    }
+
+    setMonths(months);
+    setYears(years);
+    setSavedCard(window.iyziUcsInit.ucsToken).then((res) => {
+      if (!('data' in res)) {
+        return;
+      }
+
+      const installmentContext = res.data?.context_list?.find(
+        (context) => context.page_name === 'SavedCardInstallmentSelectionPage'
+      );
+
+      if (installmentContext) {
+        setInstallmentOptions(installmentContext.page_context.installments);
+      }
+    });
+
+    return () => {
+      dispatch(resetUcs());
+    };
+  }, []);
+
+  const onSubmit = async (data) => {
+    if (!window.iyziUcsInit) {
+      return;
+    }
+
+    setFormError({});
+
+    if (window.iyziUcsInit.scriptType === 'CONSUMER_WITH_CARD_EXIST') {
+      const res = await setCompleteSavedCard({
+        ucs_token: window.iyziUcsInit.ucsToken,
+        consumer_token: window.universalCardStorage.consumerToken,
+        card_token: window.universalCardStorage.cardToken
+      });
+
+      if ('data' in res && res.data.errors) {
+        setFormError(res.data.errors);
+      }
+      return;
+    } else {
+      if (!window.universalCardStorage.registerConsumerCard) {
+        setFormError({
+          non_field_errors:
+            props.texts?.errors?.saveCard ??
+            defaultTranslations.texts.errors.saveCard
+        });
+        return;
+      }
+      const res = await setCompleteSavedCard({
+        agreement: data.agreement,
+        card_number: data.card_number.replaceAll(' ', ''),
+        card_month: data.card_month,
+        card_year: data.card_year,
+        card_cvv: data.card_cvv,
+        register_consumer_card: window.universalCardStorage.registerConsumerCard
+      });
+
+      if ('data' in res && res.data.errors) {
+        setFormError(res.data.errors);
+      }
+    }
+  };
+
+  const ucsScript = ucs.script && (
+    <Script
+      id="saved_card"
+      strategy="afterInteractive"
+      dangerouslySetInnerHTML={{ __html: ucs.script }}
+    />
+  );
+
+  return (
+    <>
+      <form
+        className="flex flex-row flex-wrap w-full"
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <div className="w-full flex flex-col xl:w-6/10">
+          <div className="flex justify-start items-center border-solid border-gray-400 px-4 py-2 sm:px-6 sm:py-3 sm:min-h-15">
+            <span className="text-black-800 text-lg font-medium sm:text-2xl">
+              {props.texts?.title ?? defaultTranslations.texts.title}
+            </span>
+          </div>
+
+          {window.iyziUcsInit?.scriptType === 'UCS_CONSENT' && (
+            <>
+              <div className="w-full bg-white">
+                <div className="px-4 my-2 w-full flex justify-between flex-wrap pb-4 sm:px-6 sm:py-6">
+                  <div className="my-2 w-full flex flex-col sm:px-4">
+                    <div className="text-xs text-gray-800 mb-2 w-full flex justify-between items-center">
+                      <span>
+                        {props.texts?.label?.cardNumber ??
+                          defaultTranslations.texts.label.cardNumber}
+                      </span>
+                    </div>
+
+                    <Input
+                      format="#### #### #### ####"
+                      mask="_"
+                      allowEmptyFormatting={true}
+                      control={control}
+                      {...register('card_number')}
+                      error={errors.card_number}
+                    />
+                  </div>
+
+                  <div className="w-full my-2 sm:flex">
+                    <div className="sm:w-2/3 sm:px-4">
+                      <label
+                        className="flex w-full text-xs text-start text-black-400 mb-1.5"
+                        htmlFor="card_month"
+                      >
+                        {props.texts?.label?.expiryDate ??
+                          defaultTranslations.texts.label.expiryDate}
+                      </label>
+
+                      <div className="flex w-full h-10 space-x-2.5">
+                        <div className="w-2/4">
+                          <Select
+                            className="w-full text-xs border-gray-400 sm:text-sm"
+                            options={months}
+                            {...register('card_month')}
+                            error={errors.card_month}
+                          />
+                        </div>
+
+                        <div className="w-2/4">
+                          <Select
+                            className="w-full text-xs border-gray-400 sm:text-sm"
+                            options={years}
+                            {...register('card_year')}
+                            error={errors.card_year}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                    <div className="my-2 sm:w-1/3 sm:px-4 sm:my-0">
+                      <label
+                        className="flex w-full text-xs text-start text-black-400 mb-1.5"
+                        htmlFor="card_cvv"
+                      >
+                        {props.texts?.label?.cvv ??
+                          defaultTranslations.texts.label.cvv}
+                      </label>
+                      <Input
+                        format="###"
+                        mask="_"
+                        control={control}
+                        allowEmptyFormatting={true}
+                        {...register('card_cvv')}
+                        error={errors.card_cvv}
+                      />
+                      <div className="group relative flex items-center justify-start text-gray-600 cursor-pointer mt-2 transition-all hover:text-secondary">
+                        <span className="text-xs underline">
+                          {props.texts?.label?.cvv ??
+                            defaultTranslations.texts.label.cvv}
+                        </span>
+                        <Icon
+                          name="cvc"
+                          size={16}
+                          className="leading-none ml-2"
+                        />
+                        <div className="hidden group-hover:block absolute right-0 bottom-5 w-[11rem] lg:w-[21rem] lg:left-auto lg:right-auto border-2">
+                          <Image
+                            src="/cvv.jpg"
+                            alt="Cvv"
+                            width={385}
+                            height={262}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div id="ucs-permission"></div>
+            </>
+          )}
+          {window.iyziUcsInit?.scriptType !== 'UCS_CONSENT' && (
+            <div id="ucs-cards"></div>
+          )}
+        </div>
+
+        <div className="w-full flex flex-col border-gray-400 border-solid xl:w-4/10 xl:border-l xl:border-t-0">
+          <div className="flex justify-start items-center border-solid border-gray-400 px-4 py-2 sm:px-6 sm:py-3 sm:min-h-15">
+            <span className="text-black-800 text-lg font-medium sm:text-2xl">
+              {props.texts?.installment?.title ??
+                defaultTranslations.texts.installment.title}
+            </span>
+          </div>
+
+          <div className="w-full border-solid border-gray-400 bg-white">
+            <SavedCardInstallments
+              installmentOptions={installmentOptions}
+              translations={props.texts?.installment}
+              error={errors.installment}
+            />
+
+            <div className="flex flex-col text-xs pb-4 px-4 sm:px-6 sm:pb-6 md:mt-0 mt-4">
+              {props.agreementCheckbox &&
+                cloneElement(props.agreementCheckbox, {
+                  control,
+                  error: errors.agreement,
+                  fieldId: 'agreement'
+                })}
+              {formError?.non_field_errors && (
+                <div className="w-full text-xs text-start px-1 mt-3 text-error">
+                  {formError.non_field_errors}
+                </div>
+              )}
+              {formError?.status && (
+                <div className="w-full text-xs text-start px-1 mt-3 text-error">
+                  {formError.status}
+                </div>
+              )}
+              <Button
+                className="group uppercase mt-4 inline-flex items-center justify-center"
+                type="submit"
+              >
+                <span>
+                  {props.texts?.button ?? defaultTranslations.texts.button}
+                </span>
+                <Icon
+                  name="chevron-end"
+                  size={12}
+                  className="fill-primary-foreground ml-2 h-3 group-hover:fill-primary"
+                />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </form>
+      {ucsScript}
+    </>
+  );
+}

package/src/components/agreement-and-submit.tsx

@@ -1,25 +0,0 @@
-import React, { cloneElement } from 'react';
-import { Button, Icon } from '@akinon/next/components';
-
-export const AgreementAndSubmit = ({
-  agreementCheckbox,
-  control,
-  errors,
-  buttonText
-}) => (
-  <div className="flex flex-col text-xs pb-4 px-4 sm:px-6">
-    {agreementCheckbox &&
-      cloneElement(agreementCheckbox, {
-        control,
-        error: errors.agreement,
-        fieldId: 'agreement'
-      })}
-    <Button
-      type="submit"
-      className="group uppercase mt-4 inline-flex items-center justify-center"
-    >
-      <span>{buttonText}</span>
-      <Icon name="chevron-end" size={12} className="ml-2 h-3" />
-    </Button>
-  </div>
-);

package/src/components/card-label.tsx

@@ -1,17 +0,0 @@
-import { getCreditCardType } from '../utils';
-import React from 'react';
-import { cardImages } from '../views/saved-card-option';
-import { Image } from '@akinon/next/components';
-
-export const CardLabel = ({ card }) => (
-  <label className="flex flex-col w-full cursor-pointer md:flex-row md:items-center md:justify-between">
-    <p className="w-full text-[10px] lg:w-1/3">{card.masked_card_number}</p>
-    <Image
-      className="w-8 h-6 object-contain flex items-center justify-center"
-      width={50}
-      height={50}
-      src={cardImages[getCreditCardType(card.masked_card_number)].src}
-      alt={card.name}
-    />
-  </label>
-);

package/src/components/card-selection-section.tsx

@@ -1,51 +0,0 @@
-import { setDeletionModalId, setDeletionModalVisible } from '../redux/reducer';
-import React from 'react';
-import { ErrorText } from './error-text';
-import { CardLabel } from './card-label';
-import { DeleteIcon } from './delete-icon';
-
-export const CardSelectionSection = ({
-  title,
-  cards,
-  selectedCard,
-  onSelect,
-  register,
-  errors,
-  dispatch
-}) => (
-  <div className="border-solid border-gray-400 px-4 py-2">
-    <span className="text-black-800 text-lg font-medium">{title}</span>
-    <ul className="mt-4 text-xs w-full">
-      {cards?.map((card) => (
-        <li
-          key={card.token}
-          className="p-4 mb-2 border-2 border-gray-200 flex justify-between items-center cursor-pointer"
-          onClick={(e) => {
-            e.preventDefault();
-            onSelect(card);
-          }}
-        >
-          <input
-            name="card"
-            type="radio"
-            checked={selectedCard?.token === card.token}
-            value={card.token}
-            id={card.token}
-            className="mr-2"
-            onChange={() => {}}
-            {...register('card')}
-          />
-          <CardLabel card={card} />
-          <DeleteIcon
-            onClick={(e) => {
-              e.stopPropagation();
-              dispatch(setDeletionModalId(card.id));
-              dispatch(setDeletionModalVisible(true));
-            }}
-          />
-        </li>
-      ))}
-    </ul>
-    {errors.card && <ErrorText message={errors.card?.message} />}
-  </div>
-);

package/src/components/delete-confirmation-modal.tsx

@@ -1,80 +0,0 @@
-'use client';
-
-import { Button, LoaderSpinner, Modal } from '@akinon/next/components';
-import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import {
-  setCards,
-  setDeletionModalId,
-  setDeletionModalVisible
-} from '../redux/reducer';
-import { useDeleteSavedCardMutation } from '../redux/api';
-import { useState } from 'react';
-import { DeletePopupTexts } from '../types';
-
-const defaultTranslations = {
-  title: 'Are you sure you want to delete this card?',
-  delete_button: 'Delete',
-  cancel_button: 'Cancel'
-};
-
-export interface DeleteConfirmationModalProps {
-  translations?: DeletePopupTexts;
-}
-
-export const DeleteConfirmationModal = ({
-  translations
-}: DeleteConfirmationModalProps) => {
-  const [error, setError] = useState<string | null>(null);
-  const { cards, deletion } = useAppSelector((state) => state.savedCard);
-  const dispatch = useAppDispatch();
-
-  const [deleteCard, { isLoading }] = useDeleteSavedCardMutation();
-
-  const handleClose = () => {
-    dispatch(setDeletionModalId(null));
-    dispatch(setDeletionModalVisible(false));
-    setError(null);
-  };
-
-  const handleDelete = async () => {
-    try {
-      await deleteCard(deletion.id).unwrap();
-      dispatch(setCards(cards.filter((card) => card.id !== deletion.id)));
-      handleClose();
-    } catch (error) {
-      setError(error.data.detail);
-    }
-  };
-
-  return (
-    <Modal
-      portalId="saved-card-remove-card-modal"
-      className="w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto"
-      open={deletion.isModalVisible}
-      setOpen={() => dispatch(setDeletionModalVisible(false))}
-    >
-      <div className="px-6">
-        <h3 className="text-center mt-4 text-lg">
-          {translations?.title ?? defaultTranslations.title}
-        </h3>
-        <div className="flex flex-col gap-3 p-5 w-3/4 m-auto">
-          <Button className="py-3 h-auto" onClick={handleDelete}>
-            {isLoading ? (
-              <LoaderSpinner className="w-4 h-4" />
-            ) : (
-              translations?.delete_button ?? defaultTranslations.delete_button
-            )}
-          </Button>
-          <Button
-            appearance="outlined"
-            className="underline px-5 py-3 h-auto"
-            onClick={handleClose}
-          >
-            {translations?.cancel_button ?? defaultTranslations.cancel_button}
-          </Button>
-          {error && <p className="text-error text-xs text-center">{error}</p>}
-        </div>
-      </div>
-    </Modal>
-  );
-};

package/src/components/delete-icon.tsx

@@ -1,8 +0,0 @@
-import { Icon } from '@akinon/next/components';
-import React from 'react';
-
-export const DeleteIcon = ({ onClick }) => (
-  <span className="cursor-pointer p-1" onClick={onClick}>
-    <Icon name="close" size={12} />
-  </span>
-);

package/src/components/error-text.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-export const ErrorText = ({ message }) => (
-  <div className="w-full text-xs text-start px-1 mt-3 text-error">
-    {message}
-  </div>
-);

package/src/components/installment-section.tsx

@@ -1,22 +0,0 @@
-import SavedCardInstallments from './installments';
-import React from 'react';
-
-export const InstallmentSection = ({
-  title,
-  selectedCard,
-  installmentOptions,
-  translations,
-  errors
-}) => (
-  <div className="border-solid border-gray-400 bg-white">
-    <div className="px-4 py-2">
-      <span className="text-black-800 text-lg font-medium">{title}</span>
-    </div>
-    <SavedCardInstallments
-      selectedCard={selectedCard}
-      installmentOptions={installmentOptions}
-      translations={translations}
-      error={errors}
-    />
-  </div>
-);