@akinon/pz-gpay 1.15.0 → 1.16.0

package/.gitattributes

@@ -1,15 +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
-
+*.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

@@ -1,13 +1,13 @@
-{
-  "bracketSameLine": false,
-  "tabWidth": 2,
-  "singleQuote": true,
-  "jsxSingleQuote": false,
-  "bracketSpacing": true,
-  "semi": true,
-  "useTabs": false,
-  "arrowParens": "always",
-  "endOfLine": "lf",
-  "proseWrap": "never",
-  "trailingComma": "none"
-}
+{
+  "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

@@ -1,5 +1,7 @@
 # @akinon/pz-gpay
 
+## 1.16.0
+
 ## 1.15.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-gpay",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

package/readme.md

@@ -1,38 +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.      |
+# 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

@@ -1,45 +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;
+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

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

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

@@ -1,29 +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>;
-};
+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

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