@akinon/pz-bkm 1.89.0 → 1.90.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @akinon/pz-bkm
 
+## 1.90.0
+
+### Minor Changes
+
+- 1044bce: ZERO-3379: Add custom UI rendering support
+
 ## 1.89.0
 
 ## 1.88.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-bkm",
-  "version": "1.89.0",
+  "version": "1.90.0",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

package/readme.md

@@ -35,7 +35,59 @@ export default Bkm;
 
 ### Props
 
-| Property       | Type     | Description                               |
-| -------------- | -------- | ----------------------------------------- |
-| `translations` | `object` | Object containing translation strings.    |
-| `classes`      | `object` | Object containing custom CSS class names. |
+| Property | Type | Description |
+| --- | --- | --- |
+| `translations` | `object` | Object containing translation strings. |
+| `classes` | `object` | Object containing custom CSS class names. |
+| `customUIRender` | `React.ReactNode` | Optional function to fully customize the bkm express. Receives control, errors, translations, bkmFrameId and handleSubmit props. |
+
+### Customizing BKM Express
+
+```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

@@ -2,11 +2,21 @@ 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 {
+  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,7 +49,8 @@ const formSchema = (requiredText?: string) =>
 const BKMOption = ({
   translations,
   classes,
-  agreementCheckbox
+  agreementCheckbox,
+  customUIRender
 }: BKMOptionProps) => {
   const id = useId();
   const {
@@ -39,13 +58,13 @@ const BKMOption = ({
     control,
     formState: { errors },
     getValues
-  } = useForm({
+  } = useForm<BKMOptionForm>({
     resolver: yupResolver(formSchema(translations?.required))
   });
   const [setBkm] = useSetBkmMutation();
   const [completeBkm] = useCompleteBkmMutation();
 
-  const onSubmit: SubmitHandler<null> = async () => {
+  const onSubmit: SubmitHandler<BKMOptionForm> = async () => {
     const response = await setBkm(getValues('agreement')).unwrap();
 
     const bexContext = response.context_list.find(
@@ -86,6 +105,25 @@ const BKMOption = ({
     );
   };
 
+  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)}>