@akinon/pz-bkm 2.0.0-beta.2 → 2.0.0-beta.20

package/CHANGELOG.md

@@ -1,18 +1,126 @@
 # @akinon/pz-bkm
 
-## 2.0.0-beta.2
+## 2.0.0-beta.20
 
-## 2.0.0-beta.1
+## 1.125.0
+
+## 1.124.0
+
+## 1.123.0
+
+## 1.122.0
+
+### Minor Changes
+
+- d35e8ac1: ZERO-3402 :Update README.md to enhance props documentation and usage examples for customUIRender
+
+## 1.121.0
+
+## 1.120.0
+
+### Minor Changes
+
+- 6ad72e8d: ZERO-4032: Add loading state management for payment submissions across multiple components and add safe guarding
+
+## 1.119.0
+
+## 1.118.0
+
+## 1.117.0
+
+## 1.116.0
+
+## 1.115.0
+
+## 1.114.0
+
+## 1.113.0
+
+## 1.112.0
+
+## 1.111.0
+
+## 1.110.0
+
+## 1.109.0
+
+## 1.108.0
+
+## 1.107.0
+
+## 1.106.0
+
+## 1.105.0
+
+## 1.104.0
+
+## 1.103.0
+
+## 1.102.0
+
+## 1.101.0
+
+## 1.100.0
+
+## 1.99.0
+
+### Minor Changes
+
+- d58538b: ZERO-3638: Enhance RC pipeline: add fetch, merge, and pre-release setup with conditional commit
+
+## 1.98.0
+
+## 1.97.0
+
+## 1.96.0
+
+## 1.95.0
+
+## 1.94.0
+
+## 1.93.0
+
+## 1.92.0
+
+## 1.91.0
+
+## 1.90.0
 
 ### Minor Changes
 
-- ZERO-3091: Upgrade Next.js to v15 and React to v19
+- 1044bce: ZERO-3379: Add custom UI rendering support
+
+## 1.89.0
+
+## 1.88.0
+
+## 1.87.0
+
+## 1.86.0
+
+## 1.85.0
+
+## 1.84.0
+
+### Minor Changes
+
+- 624a4eb: ZERO-3276: Update installation instructions across multiple README files to standardize format and improve clarity
+
+## 1.83.0
+
+## 1.82.0
+
+## 1.81.0
+
+## 1.80.0
+
+## 1.79.0
 
-## 2.0.0-beta.0
+## 1.78.0
 
-### Major Changes
+## 1.77.0
 
-- be6c09d: ZERO-3114: Create beta version.
+## 1.76.0
 
 ## 1.75.0
 

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@akinon/pz-bkm",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.20",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/node": "^22.10.2",
-    "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "typescript": "^5.7.2"
+    "@types/node": "^18.7.8",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "5.2.2"
   },
   "dependencies": {
     "@hookform/resolvers": "2.9.0",

package/readme.md

@@ -1,17 +1,50 @@
 # @akinon/pz-bkm
 
-### Install the npm package
+## Installation method
+
+You can use the following command to install the extension with the latest plugins:
 
 ```bash
-# For latest version
-yarn add @akinon/pz-bkm
 
-# Preferred installation method
 npx @akinon/projectzero@latest --plugins
+
+```
+
+### Props
+
+| Property | Type | Required | Description |
+| --- | --- | --- | --- |
+| `translations` | `object` | Optional | Object containing translation strings. |
+| `classes` | `object` | Optional | Object containing custom CSS class names. |
+| `customUIRender` | `React.ReactNode` | Optional | Custom rendering functions. |
+
+### customUIRender Props
+
+| Property | Type | Required | Description |
+| --- | --- | --- | --- |
+| `handleSubmit` | `UseFormHandleSubmit<BKMOptionForm>` | Required | Form submission handler from `react-hook-form`. Wraps the `handleSubmit` method. |
+| `onSubmit` | `SubmitHandler<BKMOptionForm>` | Required | Callback function executed on successful form submission. |
+| `control` | `Control<BKMOptionForm>` | Required | Control object used to register form inputs with `react-hook-form`. |
+| `errors` | `FieldErrors<BKMOptionForm>` | Required | Contains validation errors for form fields. |
+| `translations` | `BKMOptionProps['translations']` | Optional | Optional prop for providing localized strings like title and description. |
+| `bkmFrameId` | `string` | Required | The DOM `id` attribute for the embedded BKM iframe element. |
+
+### Translations Properties
+
+| Key | Type | Description |
+| --- | --- | --- |
+| `title` | `string` | The title text displayed at the top of the component. |
+| `description` | `string` | A short description or informative message for the user. |
+| `button` | `string` | Text displayed on the submit button. |
+| `required` | `string` | Validation message shown when a required field is empty. |
+
+### Usage Examples
+
+```bash
+src/views/checkout/steps/payment/options/bkm.tsx
 ```
 
-### Example Usage
-##### File Path: src/views/checkout/steps/payment/options/bkm.tsx
+#### Default Usage
 
 ```javascript
 const Bkm = () => {
@@ -32,8 +65,53 @@ const Bkm = () => {
 export default Bkm;
 ```
 
-### Props
-| Property       | Type      | Description                                      |
-|----------------|-----------|--------------------------------------------------|
-| `translations` | `object`  | Object containing translation strings.           |
-| `classes`      | `object`  | Object containing custom CSS class names.       |
+#### Customized Usage with customUIRender
+
+```javascript
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+
+<PluginModule
+  component={Component.BKMExpress}
+  props={{
+    customUIRender: ({
+      handleSubmit,
+      onSubmit,
+      control,
+      errors,
+      translations,
+      bkmFrameId
+    }) => (
+      <div className="px-4 py-6">
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <h2 className="font-semibold text-2xl mb-4">{translations?.title}</h2>
+          <p className="text-sm">
+            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 className="py-4">
+            <CheckoutAgreements
+              control={control}
+              error={errors?.agreement}
+              fieldId="agreement"
+            />
+          </div>
+
+          <button className="w-full bg-primary text-white h-9" type="submit">
+            Pay with BKM Express
+          </button>
+        </form>
+
+        <div
+          id={bkmFrameId}
+          className="bkm-frame !flex justify-center items-center !pt-0"
+        ></div>
+      </div>
+    )
+  }}
+/>;
+```

package/src/views/bkm-option.tsx

@@ -1,12 +1,22 @@
-import React, { ReactElement, useId } from 'react';
+import React, { ReactElement, useId, useState } 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 {
+  SubmitHandler,
+  useForm,
+  UseFormHandleSubmit,
+  Control,
+  FieldErrors
+} from 'react-hook-form';
 import { Button } from '@akinon/next/components';
 import { useCompleteBkmMutation, useSetBkmMutation } from '../endpoints';
 import { twMerge } from 'tailwind-merge';
 
+interface BKMOptionForm {
+  agreement: boolean;
+}
+
 type BKMOptionProps = {
   translations?: {
     title?: string;
@@ -18,6 +28,14 @@ type BKMOptionProps = {
     description?: string;
     button?: string;
   };
+  customUIRender?: (params: {
+    handleSubmit: UseFormHandleSubmit<BKMOptionForm>;
+    onSubmit: SubmitHandler<BKMOptionForm>;
+    control: Control<BKMOptionForm>;
+    errors: FieldErrors<BKMOptionForm>;
+    translations?: BKMOptionProps['translations'];
+    bkmFrameId: string;
+  }) => ReactElement;
   agreementCheckbox?: ReactElement;
 };
 
@@ -31,61 +49,93 @@ const formSchema = (requiredText?: string) =>
 const BKMOption = ({
   translations,
   classes,
-  agreementCheckbox
+  agreementCheckbox,
+  customUIRender
 }: BKMOptionProps) => {
   const id = useId();
+  const [isProcessing, setIsProcessing] = useState(false);
   const {
     handleSubmit,
     control,
-    formState: { errors },
+    formState: { errors, isSubmitting },
     getValues
-  } = useForm({
-    resolver: yupResolver(formSchema(translations?.required))
+  } = useForm<BKMOptionForm>({
+    resolver: yupResolver(formSchema(translations?.required)) as any
   });
-  const [setBkm] = useSetBkmMutation();
+  const [setBkm, { isLoading: isSettingBkm }] = useSetBkmMutation();
   const [completeBkm] = useCompleteBkmMutation();
 
-  const onSubmit: SubmitHandler<null> = async () => {
-    const response = await setBkm(getValues('agreement')).unwrap();
+  const isButtonDisabled = isSubmitting || isSettingBkm || isProcessing;
 
-    const bexContext = response.context_list.find(
-      (context) => context.page_name === 'BexBinNumberPage'
-    );
+  const onSubmit: SubmitHandler<BKMOptionForm> = async () => {
+    if (isButtonDisabled) return;
 
-    if (!bexContext) {
-      return;
-    }
+    setIsProcessing(true);
 
-    // 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;
-            }
+    try {
+      const response = await setBkm(getValues('agreement')).unwrap();
+
+      const bexContext = response.context_list.find(
+        (context) => context.page_name === 'BexBinNumberPage'
+      );
+
+      if (!bexContext) {
+        setIsProcessing(false);
+        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;
 
-            window.location.href = redirectUrl;
+              if (!redirectUrl) {
+                return;
+              }
+
+              window.location.href = redirectUrl;
+            }
           }
         }
-      }
-    );
+      );
+    } catch (error) {
+      setIsProcessing(false);
+    }
   };
 
+  if (customUIRender) {
+    return (
+      <>
+        {customUIRender({
+          handleSubmit,
+          onSubmit,
+          control,
+          errors,
+          translations,
+          bkmFrameId: `js-bkm-frame-${id}`
+        })}
+        <Script
+          src="https://js.bkmexpress.com.tr/v1/javascripts/bex.js"
+          defer
+        />
+      </>
+    );
+  }
+
   return (
     <>
       <form className="flex flex-col w-full" onSubmit={handleSubmit(onSubmit)}>
@@ -117,9 +167,8 @@ const BKMOption = ({
         <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, {
-                // @ts-ignore
-                control: control,
+              React.cloneElement(agreementCheckbox as any, {
+                control: control as any,
                 error: errors.agreement,
                 fieldId: 'agreement'
               })}
@@ -129,6 +178,7 @@ const BKMOption = ({
                 classes?.button
               )}
               type="submit"
+              disabled={isButtonDisabled}
               data-testid="checkout-bank-account-place-order"
             >
               <span>{translations?.button ?? 'Pay with BKM Express'}</span>