@akinon/pz-saved-card 1.67.0 → 1.68.0

package/src/views/option.tsx

@@ -1,400 +0,0 @@
-'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}
-    </>
-  );
-}