@akinon/pz-gpay 1.15.0

package/.gitattributes

@@ -0,0 +1,15 @@
+*.js    text eol=lf
+*.jsx   text eol=lf
+*.ts    text eol=lf
+*.tsx   text eol=lf
+*.json  text eol=lf
+*.md    text eol=lf
+
+.eslintignore text eol=lf
+.eslintrc text eol=lf
+.gitignore text eol=lf
+.prettierrc text eol=lf
+.yarnrc text eol=lf
+
+* text=auto
+

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/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @akinon/pz-gpay
+
+## 1.15.0
+
+### Minor Changes
+
+- 96dd05f: ZERO-2385: Add gitattributes file

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@akinon/pz-gpay",
+  "version": "1.15.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/readme.md

@@ -0,0 +1,38 @@
+# pz-gpay
+
+### Example Usage
+##### File Path: src/views/checkout/steps/payment/options/gpay.tsx
+
+```javascript
+import { GPayOption } from '@akinon/pz-gpay';
+
+export default function GPay() {
+  return (
+    <GPayOption
+      translations={{
+        title: 'Pay with GarantiPay',
+        description:
+          'Click the button below to pay for your order using GarantiPay.',
+        button: 'Pay Now'
+      }}
+      titleClassName="text-4xl"
+    />
+  );
+}
+```
+
+##### File Path: src/app/[commerce]/[locale]/[currency]/orders/garanti-pay-redirect/page.tsx
+
+```javascript
+import { GarantiPayRedirect } from '@akinon/pz-gpay/src/routes/garanti-pay-redirect';
+
+export default GarantiPayRedirect;
+```
+
+### Props
+| Properties           | Type   | Description                                |
+|----------------------|--------|--------------------------------------------|
+| translations         | object | The translations of the component.         |
+| titleClassName       | string | The CSS class to apply to the title.       |
+| descriptionClassName | string | The CSS class to apply to the description. |
+| buttonClassName      | string | The CSS class to apply to the button.      |

package/src/endpoints.ts

@@ -0,0 +1,45 @@
+import { CheckoutContext, PreOrder } from '@akinon/next/types';
+import { api } from '@akinon/next/data/client/api';
+import { buildClientRequestUrl } from '@akinon/next/utils';
+import { setPaymentStepBusy } from '@akinon/next/redux/reducers/checkout';
+
+interface CheckoutResponse {
+  pre_order?: PreOrder;
+  errors: {
+    non_field_errors: string;
+  };
+  context_list?: CheckoutContext[];
+  template_name?: string;
+  redirect_url?: string;
+}
+
+export const gpayApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    setGPayMethod: build.mutation<CheckoutResponse, void>({
+      query: () => ({
+        url: buildClientRequestUrl(`/orders/checkout?page=GPaySelectionPage`),
+        method: 'POST',
+        body: {}
+      }),
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+        dispatch(setPaymentStepBusy(true));
+        await queryFulfilled;
+        dispatch(setPaymentStepBusy(false));
+      }
+    }),
+    setCompleteGPay: build.mutation<CheckoutResponse, void>({
+      query: () => ({
+        url: buildClientRequestUrl(`/orders/checkout?page=GPayRedirectPage`),
+        method: 'POST',
+        body: {}
+      }),
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+        dispatch(setPaymentStepBusy(true));
+        await queryFulfilled;
+        dispatch(setPaymentStepBusy(false));
+      }
+    })
+  })
+});
+
+export const { useSetGPayMethodMutation, useSetCompleteGPayMutation } = gpayApi;

package/src/index.tsx

@@ -0,0 +1 @@
+export * from './views/gpay-option';

package/src/routes/garanti-pay-redirect.tsx

@@ -0,0 +1,29 @@
+import { cookies } from 'next/headers';
+import settings from 'settings';
+import { redirect } from 'next/navigation';
+import { ROUTES } from 'routes';
+
+export const GarantiPayRedirect = async () => {
+  const nextCookies = cookies();
+  const sessionId = nextCookies.get('osessionid')?.value;
+
+  if (!sessionId) {
+    return redirect(ROUTES.CHECKOUT);
+  }
+
+  const commerceUrl = settings.commerceUrl;
+
+  const response = await fetch(`${commerceUrl}/orders/garanti-pay-redirect`, {
+    headers: {
+      Cookie: nextCookies.toString()
+    }
+  });
+
+  const data = await response.text();
+
+  if (!data.includes('form3D')) {
+    return redirect(ROUTES.CHECKOUT);
+  }
+
+  return <div dangerouslySetInnerHTML={{ __html: data }}></div>;
+};

package/src/views/gpay-option.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import * as yup from 'yup';
+import { ReactNode, useEffect, useState } from 'react';
+import { RootState } from 'redux/store';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import { useSetPaymentOptionMutation } from '@akinon/next/data/client/checkout';
+import {
+  useSetCompleteGPayMutation,
+  useSetGPayMethodMutation
+} from '../endpoints';
+import { twMerge } from 'tailwind-merge';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Button } from '@akinon/next/components/button';
+
+const gpayFormSchema = yup.object();
+
+enum Elements {
+  title,
+  description,
+  button
+}
+
+type ElementClassKey = `${keyof typeof Elements}ClassName`;
+
+type GpayOptionProps = {
+  [key in ElementClassKey]?: string;
+} & {
+  translations?: {
+    [element in keyof typeof Elements]?: string | ReactNode;
+  };
+};
+
+export function GPayOption(props: GpayOptionProps) {
+  const [formError, setFormError] = useState(null);
+
+  const { preOrder } = useAppSelector((state: RootState) => state.checkout);
+  const isPaymentStepBusy = useAppSelector(
+    (state: RootState) => state.checkout.steps.payment.busy
+  );
+
+  const { handleSubmit } = useForm({
+    resolver: yupResolver(gpayFormSchema)
+  });
+
+  const [setPaymentOption] = useSetPaymentOptionMutation();
+  const [setGPayMethod] = useSetGPayMethodMutation();
+  const [setCompleteGPay] = useSetCompleteGPayMutation();
+
+  const onSubmit: SubmitHandler<null> = async () => {
+    if (isPaymentStepBusy) return;
+
+    setFormError([]);
+
+    await setGPayMethod();
+
+    const response = await setCompleteGPay().unwrap();
+
+    if (response?.errors?.non_field_errors) {
+      setFormError(response?.errors?.non_field_errors);
+    }
+  };
+
+  // this is necessary because we need to set the payment_option after the redirect
+  useEffect(() => {
+    setPaymentOption(preOrder.payment_option.pk);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <form
+      id="gpay_payment"
+      className="p-5 space-y-5 lg:p-10"
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <h1 className={twMerge('text-2xl font-bold', props.titleClassName)}>
+        {props.translations?.title ?? 'Pay with GarantiPay'}
+      </h1>
+      <div className={twMerge('text-sm', props.descriptionClassName)}>
+        {props.translations?.description ? (
+          props.translations.description
+        ) : (
+          <>
+            <li>
+              Click on the “Pay with GarantiPay” button. Guarantee for payment
+              you will be redirected to the payment page.
+            </li>
+            <li>
+              Log in to your account with your username and password on the
+              Garanti Pay page. If you do not have a Garanti Pay membership,
+              create a new membership you can create.
+            </li>
+            <li>
+              Complete the payment process by selecting your card and payment
+              type.
+            </li>
+          </>
+        )}
+      </div>
+      <Button className={twMerge('w-full mt-3', props.buttonClassName)}>
+        {props.translations?.button ?? 'Pay with GarantiPay'}
+      </Button>
+      {formError && (
+        <div className="w-full text-xs text-start px-1 mt-3 text-error">
+          {formError}
+        </div>
+      )}
+    </form>
+  );
+}