@akinon/pz-bkm 1.0.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/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@akinon/pz-bkm",
+  "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": "5.2.2"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "2.9.0",
+    "react-hook-form": "7.31.3",
+    "yup": "0.32.11"
+  }
+}

package/readme.md

@@ -0,0 +1,36 @@
+# pz-bkm
+
+### Install the npm package
+
+```bash
+# For latest version
+yarn add git+ssh://git@bitbucket.org:akinonteam/pz-bkm.git
+
+# For specific version
+yarn add git+ssh://git@bitbucket.org:akinonteam/pz-bkm.git#eX4mPl3
+```
+
+### Example Usage
+##### File Path: src/views/checkout/steps/payment/options/bkm.tsx
+
+```javascript
+import { BKMOption } from 'pz-bkm';
+
+export default function BKM() {
+  return (
+    <BKMOption
+      translations={{
+        title: 'Pay with BKM Express',
+        description: `When paying with BKM Express, you will be redirected to www.bkmexpress.com.tr.`,
+        button: 'Pay Now'
+      }}
+    />
+  );
+}
+```
+
+### Props
+| Property       | Type      | Description                                      |
+|----------------|-----------|--------------------------------------------------|
+| `translations` | `object`  | Object containing translation strings.           |
+| `classes`      | `object`  | Object containing custom CSS class names.       |

package/src/endpoints.ts

@@ -0,0 +1,60 @@
+import {
+  CheckoutContext as BaseCheckoutContext,
+  PreOrder
+} from '@akinon/next/types';
+import { setPaymentStepBusy } from '@akinon/next/redux/reducers/checkout';
+import { api } from '@akinon/next/data/client/api';
+import { buildClientRequestUrl } from '@akinon/next/utils';
+
+type CheckoutContext = BaseCheckoutContext & {
+  page_context?: {
+    transaction_id?: string;
+    path?: string;
+    token?: string;
+  };
+};
+
+interface CheckoutResponse {
+  pre_order?: PreOrder;
+  errors: {
+    non_field_errors: string;
+  };
+  context_list?: CheckoutContext[];
+  template_name?: string;
+  redirect_url?: string;
+}
+
+export const bkmApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    setBkm: build.mutation<CheckoutResponse, boolean>({
+      query: (agreement: boolean) => ({
+        url: buildClientRequestUrl('/orders/checkout/?page=BexSelectionPage', {
+          useFormData: true
+        }),
+        method: 'POST',
+        body: {
+          agreement
+        }
+      }),
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+        dispatch(setPaymentStepBusy(true));
+        await queryFulfilled;
+        dispatch(setPaymentStepBusy(false));
+      }
+    }),
+    completeBkm: build.mutation<CheckoutResponse, void>({
+      query: () => ({
+        url: buildClientRequestUrl('/orders/checkout/?page=BexCompletePage'),
+        method: 'POST'
+      }),
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+        dispatch(setPaymentStepBusy(true));
+        await queryFulfilled;
+        dispatch(setPaymentStepBusy(false));
+      }
+    })
+  }),
+  overrideExisting: false
+});
+
+export const { useSetBkmMutation, useCompleteBkmMutation } = bkmApi;

package/src/index.tsx

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

package/src/views/bkm-option.tsx

@@ -0,0 +1,147 @@
+import React, { ReactElement, useId } from 'react';
+import Script from 'next/script';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { Button } from '@akinon/next/components';
+import { useCompleteBkmMutation, useSetBkmMutation } from '../endpoints';
+import { twMerge } from 'tailwind-merge';
+
+type BKMOptionProps = {
+  translations?: {
+    title?: string;
+    description?: string;
+    button?: string;
+    required?: string;
+  };
+  classes?: {
+    description?: string;
+    button?: string;
+  };
+  agreementCheckbox?: ReactElement;
+};
+
+const formSchema = (requiredText?: string) =>
+  yup.object().shape({
+    agreement: yup
+      .boolean()
+      .oneOf([true], requiredText ?? 'This field is required.')
+  });
+
+const BKMOption = ({
+  translations,
+  classes,
+  agreementCheckbox
+}: BKMOptionProps) => {
+  const id = useId();
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+    getValues
+  } = useForm({
+    resolver: yupResolver(formSchema(translations?.required))
+  });
+  const [setBkm] = useSetBkmMutation();
+  const [completeBkm] = useCompleteBkmMutation();
+
+  const onSubmit: SubmitHandler<null> = async () => {
+    const response = await setBkm(getValues('agreement')).unwrap();
+
+    const bexContext = response.context_list.find(
+      (context) => context.page_name === 'BexBinNumberPage'
+    );
+
+    if (!bexContext) {
+      return;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    window.Bex.init(
+      {
+        id: bexContext.page_context.transaction_id,
+        path: bexContext.page_context.path,
+        token: bexContext.page_context.token
+      },
+      'modal',
+      {
+        container: `js-bkm-frame-${id}`,
+        buttonSize: [500, 500],
+        skipButton: true,
+        onComplete: async (status) => {
+          if (status == 'success') {
+            const data = await completeBkm().unwrap();
+            const redirectUrl =
+              data.context_list?.[0]?.page_context?.redirect_url;
+
+            if (!redirectUrl) {
+              return;
+            }
+
+            window.location.href = redirectUrl;
+          }
+        }
+      }
+    );
+  };
+
+  return (
+    <>
+      <form className="flex flex-col w-full" onSubmit={handleSubmit(onSubmit)}>
+        <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">
+            {translations?.title ?? 'BKM Express'}
+          </span>
+        </div>
+
+        <div className="w-full bg-white">
+          <div className="text-black-800 px-4 sm:px-6">
+            <p className={twMerge('text-sm w-full mb-2', classes?.description)}>
+              {translations?.description ?? (
+                <>
+                  When paying with BKM Express, you will be redirected to
+                  www.bkmexpress.com.tr. <br />
+                  You need to log in to the application with the username and
+                  password you used when signing up to BKM Express. You can
+                  easily pay by selecting the card you want to make a
+                  transaction and the payment method from the payment screen
+                  that appears. After completing your shopping, you will
+                  automatically return to site.
+                </>
+              )}
+            </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">
+            {agreementCheckbox &&
+              React.cloneElement(agreementCheckbox, {
+                control: control,
+                error: errors.agreement,
+                fieldId: 'agreement'
+              })}
+            <Button
+              className={twMerge(
+                'group uppercase mt-4 inline-flex items-center justify-center w-full',
+                classes?.button
+              )}
+              type="submit"
+              data-testid="checkout-bank-account-place-order"
+            >
+              <span>{translations?.button ?? 'Pay with BKM Express'}</span>
+            </Button>
+          </div>
+        </div>
+      </form>
+      <div
+        id={`js-bkm-frame-${id}`}
+        className="bkm-frame !flex justify-center items-center !pt-0"
+      ></div>
+      <Script src="https://js.bkmexpress.com.tr/v1/javascripts/bex.js" defer />
+    </>
+  );
+};
+
+export { BKMOption };