@akinon/projectzero 1.32.0 → 1.33.0

package/app-template/src/views/checkout/steps/payment/options/credit-card/index.tsx

@@ -0,0 +1,382 @@
+import { yupResolver } from '@hookform/resolvers/yup';
+import clsx from 'clsx';
+import { useEffect, useState } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import { RootState } from '@theme/redux/store';
+import {
+  useCompleteCreditCardPaymentMutation,
+  useSetBinNumberMutation
+} from '@akinon/next/data/client/checkout';
+import { CreditCardForm } from '@theme/types';
+import { Button, Icon, Input, Select } from '@theme/components';
+import * as yup from 'yup';
+import CheckoutAgreements from '../../agreements';
+import PaymentHeader from '../../payment-header';
+import CreditCardInstallments from './installments';
+import { useLocalization } from '@akinon/next/hooks';
+import { Image } from '@akinon/next/components/image';
+import { getPosError } from '@akinon/next/utils';
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+import { PaymentOption } from '@akinon/next/types';
+
+const creditCardFormSchema = (
+  t,
+  payment_option: PaymentOption,
+  isMasterpassDirectPurchase?: boolean
+) => {
+  if (
+    payment_option?.payment_type === 'masterpass' &&
+    isMasterpassDirectPurchase === false
+  ) {
+    return yup.object().shape({
+      agreement: yup
+        .boolean()
+        .oneOf([true], t('checkout.payment.credit_card.form.error.required'))
+    });
+  }
+
+  return yup.object().shape({
+    card_holder: yup
+      .string()
+      .required(t('checkout.payment.credit_card.form.error.required'))
+      .matches(
+        /^[a-zA-ZğüşöçıİĞÜŞÖÇ\s]+$/,
+        t('checkout.payment.credit_card.form.error.card_holder_matches')
+      ),
+    card_number: yup
+      .string()
+      .transform((value: string) => value.replace(/_/g, '').replace(/ /g, ''))
+      .length(
+        16,
+        t('checkout.payment.credit_card.form.error.card_number_length')
+      )
+      .required(t('checkout.payment.credit_card.form.error.required')),
+    card_month: yup
+      .string()
+      .required(t('checkout.payment.credit_card.form.error.required')),
+    card_year: yup
+      .string()
+      .required(t('checkout.payment.credit_card.form.error.required')),
+    card_cvv: yup
+      .string()
+      .transform((value: string) => value.replace(/_/g, '').replace(/ /g, ''))
+      .length(3, t('checkout.payment.credit_card.form.error.cvv_length'))
+      .required(t('checkout.payment.credit_card.form.error.required')),
+    installment: yup
+      .number()
+      .required(t('checkout.payment.credit_card.form.error.installment')),
+    agreement: yup
+      .boolean()
+      .oneOf([true], t('checkout.payment.credit_card.form.error.required'))
+  });
+};
+
+const CheckoutCreditCard = () => {
+  const { installment, payment_option } = useAppSelector(
+    (state: RootState) => state.checkout.preOrder
+  );
+  const { cardType } = useAppSelector((state: RootState) => state.checkout);
+  const masterpass = useAppSelector((state: RootState) => state.masterpass);
+  const { t } = useLocalization();
+  const {
+    register,
+    handleSubmit,
+    setValue: setFormValue,
+    trigger: validateInput,
+    control,
+    formState: { errors },
+    setError,
+    getValues
+  } = useForm<CreditCardForm>({
+    resolver: yupResolver(
+      creditCardFormSchema(t, payment_option, masterpass?.isDirectPurchase)
+    )
+  });
+  const [months, setMonths] = useState([]);
+  const [years, setYears] = useState([]);
+  const [formError, setFormError] = useState(null);
+  const [cardBinNumber, setCardBinNumber] = useState(null);
+  const [setBinNumber] = useSetBinNumberMutation();
+  const [completeCreditCardPayment] = useCompleteCreditCardPaymentMutation();
+
+  const handleCardNumberChange = (value) => {
+    const binNumber = value.replace(/\D/g, '').substring(0, 6);
+
+    if (binNumber.length === 6) {
+      if (cardBinNumber !== binNumber) {
+        setBinNumber(binNumber);
+        setCardBinNumber(binNumber);
+      }
+    } else if (cardBinNumber && binNumber.length < 6) {
+      setCardBinNumber(null);
+    }
+  };
+
+  const onSubmit: SubmitHandler<CreditCardForm> = async (data) => {
+    const response = await completeCreditCardPayment(data).unwrap();
+
+    setFormError(response?.errors);
+  };
+
+  useEffect(() => {
+    const posErrors = getPosError();
+
+    if (posErrors) {
+      setFormError(posErrors);
+    }
+
+    const months = [
+      {
+        label: t('checkout.payment.credit_card.form.month.placeholder'),
+        value: ''
+      }
+    ];
+    const years = [
+      {
+        label: t('checkout.payment.credit_card.form.year.placeholder'),
+        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);
+  }, []);
+
+  useEffect(() => {
+    if (installment?.pk) {
+      setFormValue('installment', installment?.pk);
+      validateInput('installment');
+    }
+  }, [installment?.pk, setFormValue, validateInput]);
+
+  useEffect(() => {
+    Object.keys(formError ?? {})
+      .filter((key) => key !== 'non_field_errors')
+      .forEach((item: keyof CreditCardForm) => {
+        setError(item, {
+          type: 'custom',
+          message: formError[item].join(', ')
+        });
+      });
+  }, [formError, setError]);
+
+  return (
+    <form
+      className={clsx('flex flex-row flex-wrap w-full')}
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <div className="w-full flex flex-col xl:w-6/10">
+        {(payment_option?.payment_type === 'credit_card' ||
+          (payment_option?.payment_type === 'masterpass' &&
+            masterpass?.isDirectPurchase)) && (
+          <>
+            <PaymentHeader title={t('checkout.payment.credit_card.title')} />
+
+            <div className="w-full bg-white">
+              <div className="text-xs text-black-800 p-4 sm:p-6">
+                {t('checkout.payment.credit_card.description')}
+              </div>
+
+              <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 sm:px-4">
+                  <Input
+                    label={t(
+                      'checkout.payment.credit_card.form.cardholder_name.placeholder'
+                    )}
+                    {...register('card_holder')}
+                    error={errors.card_holder}
+                    data-testid="checkout-credit-card-holder"
+                  />
+                </div>
+
+                <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>
+                      {t(
+                        'checkout.payment.credit_card.form.card_number.placeholder'
+                      )}
+                    </span>
+
+                    {cardType?.logo && cardBinNumber && (
+                      <Image
+                        width={50}
+                        height={30}
+                        src={cardType?.logo}
+                        alt="bankLogo"
+                      />
+                    )}
+                  </div>
+
+                  <Input
+                    format="#### #### #### ####"
+                    mask="_"
+                    allowEmptyFormatting={true}
+                    control={control}
+                    onValueChange={(values) => {
+                      const { value } = values;
+
+                      handleCardNumberChange(value);
+                    }}
+                    {...register('card_number')}
+                    error={errors.card_number}
+                    data-testid="checkout-credit-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"
+                    >
+                      {t(
+                        'checkout.payment.credit_card.form.expiration_date.title'
+                      )}
+                    </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}
+                          data-testid="checkout-credit-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}
+                          data-testid="checkout-credit-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"
+                    >
+                      {t(
+                        'checkout.payment.credit_card.form.security_code.title'
+                      )}
+                    </label>
+                    <Input
+                      format="###"
+                      mask="_"
+                      control={control}
+                      allowEmptyFormatting={true}
+                      {...register('card_cvv')}
+                      error={errors.card_cvv}
+                      data-testid="checkout-credit-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">
+                        {t(
+                          'checkout.payment.credit_card.form.security_code.cvc'
+                        )}
+                      </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">
+                        {/* TODO: Fix this */}
+                        <Image
+                          src="/cvv.jpg"
+                          alt="Cvv"
+                          width={385}
+                          height={262}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+
+        <PluginModule
+          component={Component.MasterpassCardList}
+          props={{
+            className: 'p-10'
+          }}
+        />
+
+        <PluginModule
+          component={Component.MasterpassCardRegistration}
+          props={{
+            className: 'mt-5 mb-10 sm:px-10',
+            getValues
+          }}
+        />
+      </div>
+
+      <div className="w-full flex flex-col border-gray-400 border-solid xl:w-4/10 xl:border-l xl:border-t-0">
+        <PaymentHeader
+          title={t('checkout.payment.installment_options.title')}
+        />
+
+        <div className="w-full border-solid border-gray-400 bg-white">
+          <CreditCardInstallments 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">
+            <CheckoutAgreements
+              control={control}
+              fieldId="agreement"
+              error={errors.agreement}
+            />
+            {formError?.non_field_errors && (
+              <div
+                className="w-full text-xs text-start px-1 mt-3 text-error"
+                data-testid="checkout-form-error"
+              >
+                {formError.non_field_errors}
+              </div>
+            )}
+            {formError?.status && (
+              <div
+                className="w-full text-xs text-start px-1 mt-3 text-error"
+                data-testid="checkout-form-error"
+              >
+                {formError.status}
+              </div>
+            )}
+            <Button
+              className="group uppercase mt-4 inline-flex items-center justify-center"
+              type="submit"
+              data-testid="checkout-credit-card-place-order"
+            >
+              <span>{t('checkout.payment.credit_card.form.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>
+  );
+};
+
+export default CheckoutCreditCard;

package/app-template/src/views/checkout/steps/payment/options/credit-card/installments.tsx

@@ -0,0 +1,100 @@
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import { RootState } from '@theme/redux/store';
+import { useSetInstallmentOptionMutation } from '@akinon/next/data/client/checkout';
+import { Radio, Price } from '@theme/components';
+import { useLocalization } from '@akinon/next/hooks';
+
+const CreditCardInstallments = ({ error }) => {
+  const { t } = useLocalization();
+  const { preOrder, cardType, installmentOptions } = useAppSelector(
+    (state: RootState) => state.checkout
+  );
+  const [setInstallmentOption] = useSetInstallmentOptionMutation();
+
+  const errorMessage = (
+    <div className="px-6 mt-4 text-sm text-error">{error?.message}</div>
+  );
+
+  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="text-xs text-black-800 p-4">
+          {t('checkout.payment.installment_options.installment')}:{' '}
+          {cardType?.name ?? 'Other'}
+        </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"
+                >
+                  {t('checkout.payment.installment_options.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"
+                >
+                  {t('checkout.payment.installment_options.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"
+                >
+                  {t('checkout.payment.installment_options.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 === preOrder?.installment?.pk}
+                      onChange={() => {
+                        setInstallmentOption(option.pk);
+                      }}
+                      data-testid={`checkout-credit-card-installment-${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 CreditCardInstallments;

package/app-template/src/views/checkout/steps/payment/options/credit-payment.tsx

@@ -0,0 +1,14 @@
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+import CheckoutAgreements from '../agreements';
+
+export default function CreditPayment() {
+
+  return <PluginModule
+    component={Component.CreditPayment}
+    props={{
+      agreementCheckbox: (
+        <CheckoutAgreements control={null} error={null} fieldId="agreement" />
+      )
+  }}
+/>
+}

package/app-template/src/views/checkout/steps/payment/options/funds-transfer.tsx

@@ -0,0 +1,174 @@
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useEffect, useState } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import { RootState } from '@theme/redux/store';
+import {
+  useCompleteFundsTransferMutation,
+  useSetFundsTransferOptionMutation
+} from '@akinon/next/data/client/checkout';
+import { Button, Icon, Price, Radio } from '@theme/components';
+import * as yup from 'yup';
+import CheckoutAgreements from '../agreements';
+import PaymentHeader from '../payment-header';
+import { useLocalization } from '@akinon/next/hooks';
+import { Image } from '@akinon/next/components/image';
+import PaymentOptionButtons from '../payment-option-buttons';
+import { Trans } from '@akinon/next/components/trans';
+
+const fundsTransferFormSchema = (t) =>
+  yup.object().shape({
+    agreement: yup.boolean().oneOf([true], 'This field is required.')
+  });
+
+const CheckoutFundsTransfer = () => {
+  const { t } = useLocalization();
+  const {
+    handleSubmit,
+    control,
+    formState: { errors }
+  } = useForm({
+    resolver: yupResolver(fundsTransferFormSchema(t))
+  });
+  const [formError, setFormError] = useState(null);
+  const { bankAccounts, selectedBankAccountPk, preOrder } = useAppSelector(
+    (state: RootState) => state.checkout
+  );
+  const [setFundsTransferOption] = useSetFundsTransferOptionMutation();
+  const [completeFundsTransfer] = useCompleteFundsTransferMutation();
+
+  const onSubmit: SubmitHandler<null> = async () => {
+    const response = await completeFundsTransfer().unwrap();
+
+    setFormError(response?.errors?.non_field_errors);
+  };
+
+  useEffect(() => {
+    if (!selectedBankAccountPk && bankAccounts?.length) {
+      setFundsTransferOption(bankAccounts[0].pk);
+    }
+  }, [bankAccounts, selectedBankAccountPk, setFundsTransferOption]);
+
+  return (
+    <form className="flex flex-col w-full" onSubmit={handleSubmit(onSubmit)}>
+      <PaymentHeader title={t('checkout.payment.fund_transfer.title')} />
+
+      <div className="w-full bg-white">
+        <div className="text-xs text-black-800 p-4 sm:p-6">
+          <p className="w-full mb-2">
+            {t('checkout.payment.fund_transfer.description')}
+          </p>
+
+          <p className="w-full">
+            <span className="text-soft block sm:inline-block">
+              {t('checkout.payment.fund_transfer.account_title')}{' '}
+              <b>
+                {t('checkout.payment.fund_transfer.receiver')}: Project Zero
+                Ltd. Sti
+              </b>
+            </span>
+          </p>
+        </div>
+      </div>
+      <div className="px-4 sm:px-6">
+        {bankAccounts.map((bankAccount) => (
+          <div
+            key={`bank-account-${bankAccount.pk}`}
+            className="w-full border-t border-solid border-gray-400 py-4 last:border-b"
+          >
+            <label className="w-full flex items-center justify-start">
+              <Radio
+                name="bank_account"
+                type="radio"
+                value={bankAccount.pk}
+                checked={bankAccount.pk === selectedBankAccountPk}
+                onChange={() => {
+                  setFundsTransferOption(bankAccount.pk);
+                }}
+                data-testid={`checkout-bank-account-${bankAccount.pk}`}
+              ></Radio>
+
+              <span className="w-full flex items-start justify-start flex-col pl-3 sm:flex-row sm:items-center sm:pl-0">
+                <div className="flex items-center justify-start sm:w-32 sm:px-3">
+                  <Image
+                    src={bankAccount.bank.logo}
+                    alt={bankAccount.bank.name}
+                    width={80}
+                    height={24}
+                    className="object-contain"
+                  />
+                </div>
+
+                <div className="flex flex-1 items-start justify-start flex-col sm:flex-row sm:items-center">
+                  <span className="min-w-max text-black-800 text-xs">
+                    {bankAccount.bank.name} IBAN:
+                  </span>
+                  <span className="text-black-800 text-xs sm:pl-1">
+                    {bankAccount.iban}
+                  </span>
+                </div>
+              </span>
+            </label>
+          </div>
+        ))}
+      </div>
+      <div className="flex flex-1 items-start justify-start flex-col sm:flex-row sm:items-center">
+        <div className="text-xs text-black-800 p-4 sm:p-6">
+          <p className="w-full mb-1">
+            {t('checkout.payment.fund_transfer.attention')}
+          </p>
+
+          <p className="w-full mb-1">
+            {t('checkout.payment.fund_transfer.transfer_amount_title')}
+
+            <Price className="ml-1" value={preOrder?.total_amount} />
+          </p>
+
+          <p className="w-full mb-2 soft text-[#508bc9]">
+            <Trans
+              i18nKey="checkout.payment.fund_transfer.info_first"
+              components={{
+                BoldTitle: (
+                  <b>{t('checkout.payment.fund_transfer.bold_title')}</b>
+                )
+              }}
+            />
+          </p>
+
+          <p className="w-full mb-1">
+            <i>{t('checkout.payment.fund_transfer.info_second')}</i>
+          </p>
+        </div>
+      </div>
+
+      <div className="px-4 sm:px-6">
+        <div className="flex items-start flex-col border-t border-solid border-gray-400 py-4 space-y-4">
+          <CheckoutAgreements
+            control={control}
+            fieldId="agreement"
+            error={errors.agreement}
+          />
+          {formError && (
+            <div className="w-full text-xs text-start px-1 mt-3 text-error">
+              {formError}
+            </div>
+          )}
+          <Button
+            className="group uppercase mt-4 inline-flex items-center justify-center w-full"
+            type="submit"
+            data-testid="checkout-bank-account-place-order"
+          >
+            <span> {t('checkout.payment.fund_transfer.button')}</span>
+            <Icon
+              name="chevron-end"
+              size={12}
+              className="fill-primary-foreground ml-2 h-3 group-hover:fill-primary"
+            />
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default CheckoutFundsTransfer;

package/app-template/src/views/checkout/steps/payment/options/loyalty.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { useCompleteLoyaltyPaymentMutation } from '@akinon/next/data/client/checkout';
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import { useForm } from 'react-hook-form';
+
+export default function LoyaltyPayment() {
+  const { payment_option } = useAppSelector((state) => state.checkout.preOrder);
+  const { handleSubmit } = useForm();
+  const [completeLoyaltyPayment] = useCompleteLoyaltyPaymentMutation();
+
+  const onSubmit = async () => {
+    completeLoyaltyPayment();
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} id={payment_option.slug}></form>
+  );
+}