@akinon/pz-credit-payment 1.0.0

package/.prettierrc

@@ -0,0 +1,13 @@
+{
+  "bracketSameLine": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "bracketSpacing": true,
+  "semi": true,
+  "useTabs": false,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "proseWrap": "never",
+  "trailingComma": "none"
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@akinon/pz-credit-payment",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "src/index.tsx",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.7.8",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.7.4",
+    "react-hook-form": "7.31.3",
+    "@hookform/resolvers": "2.9.0"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,162 @@
+
+import React from 'react';
+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 'redux/store';
+import { Button, Icon, Radio } from '@akinon/next/components';
+import * as yup from 'yup';
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import {
+  useSetCreditPaymentOptionMutation,
+  useConfirmationCreditPaymentMutation
+} from '@akinon/next/data/client/checkout';
+
+interface CreditPaymentTranslationsProps {
+  title: string;
+  buttonName: string;
+  requiredFieldMessage: string;
+}
+
+const defaultTranslations = {
+  title: 'SHOPPING CREDIT',
+  buttonName: 'Place Order',
+  requiredFieldMessage: 'This field is required'
+};
+
+export interface CreditPaymentProps {
+  translations: Record<string, CreditPaymentTranslationsProps>;
+  agreementCheckbox: React.ReactElement;
+  titleClassName?: string;
+  buttonClassName?: string;
+}
+
+const creditPaymentFormSchema = (requiredFieldMessage) =>
+  yup.object().shape({
+    agreement: yup.boolean().oneOf([true], requiredFieldMessage)
+  });
+
+export const CreditPayment = (
+	{
+		translations,
+		agreementCheckbox,
+    titleClassName,
+    buttonClassName
+	}: CreditPaymentProps
+) => {
+  const _translations = {
+    ...defaultTranslations,
+    ...translations
+  };
+
+  const {
+    handleSubmit,
+    control,
+    register,
+    formState: { errors }
+  } = useForm({
+    resolver: yupResolver(creditPaymentFormSchema(_translations.requiredFieldMessage))
+  });
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const [setCreditPaymentOption] = useSetCreditPaymentOptionMutation();
+  const [confirmationCreditPayment] = useConfirmationCreditPaymentMutation();
+
+  const { creditPaymentOptions, selectedCreditPaymentPk, preOrder } = useAppSelector(
+    (state: RootState) => state.checkout
+  );
+
+  const onSubmit: SubmitHandler<any> = async () => {
+    const response = await confirmationCreditPayment().unwrap();
+
+    if(response?.errors?.non_field_errors) {
+      setFormError(response?.errors?.non_field_errors);
+      return;
+    }
+  };
+
+  useEffect(() => {
+    if (creditPaymentOptions?.length && !preOrder.credit_payment_option) {
+      setCreditPaymentOption(creditPaymentOptions[0].pk);
+    }
+  }, [creditPaymentOptions, selectedCreditPaymentPk, preOrder.credit_payment_option, setCreditPaymentOption]);
+
+  return (
+    <form className="flex flex-col w-full" onSubmit={handleSubmit(onSubmit)}>
+			<div className={clsx(
+        twMerge(
+          'flex justify-start items-center border-solid border-gray-400 px-4 py-2 sm:px-6 sm:py-3 sm:min-h-15',
+          'text-black-800 text-lg font-medium sm:text-2xl',
+          titleClassName
+          )
+      )}>
+        {_translations.title}
+      </div>
+
+      <div className="border-t border-solid border-gray-400 px-4 sm:px-6">
+        {creditPaymentOptions.map((bank) => (
+          <div
+            key={`bank-account-${bank.pk}`}
+            className="w-full border-b border-solid border-gray-400 py-4"
+          >
+            <label className="w-full flex items-center justify-start">
+              <Radio
+                type="radio"
+                value={bank.pk}
+                checked={bank.pk === selectedCreditPaymentPk || preOrder.credit_payment_option?.pk === bank.pk}
+                {...register('paymentType')}
+                onChange={() => {
+                  setCreditPaymentOption(bank.pk);
+                }}
+                data-testid={`checkout-bank-account-${bank.pk}`}
+              ></Radio>
+
+              <span className="w-full flex items-start justify-start flex-col pl-3">
+                {bank.name}
+              </span>
+            </label>
+          </div>
+        ))}
+      </div>
+
+      <div className="px-4 sm:px-6">
+        <div className="flex items-start flex-col py-4 space-y-4">
+        	{agreementCheckbox &&
+            React.cloneElement(agreementCheckbox, {
+              control,
+              error: errors.agreement,
+              fieldId: 'agreement'
+          })}
+
+          {formError && (
+            <div className="w-full text-xs text-start px-1 mt-3 text-error">
+              {formError}
+            </div>
+          )}
+
+          <Button
+            type="submit"
+            data-testid="checkout-bank-account-place-order"
+            className={clsx(
+              twMerge(
+                'group uppercase mt-4 inline-flex items-center justify-center w-full',
+                buttonClassName
+                )
+            )}
+          >
+            <span>{_translations.buttonName}</span>
+
+            <Icon
+              name="chevron-end"
+              size={12}
+              className="fill-primary-foreground ml-2 h-3 group-hover:fill-primary"
+            />
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+};
+