@akinon/pz-bkm 2.0.0-beta.1 → 2.0.0-beta.11

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @akinon/pz-bkm
 
+## 2.0.0-beta.11
+
+### Minor Changes
+
+- ac783d6: ZERO-3482: Update tailwindcss to version 4.1.11 and enhance button cursor styles
+
+## 2.0.0-beta.10
+
+### Minor Changes
+
+- 2806320: ZERO-3390: Update version tailwindcss, autoprefixer, tailwind-merge, postcss
+
+## 2.0.0-beta.9
+
+### Minor Changes
+
+- 0fe7711: ZERO-3387: Upgrade nextjs, eslint-config-next
+
+## 2.0.0-beta.8
+
+## 2.0.0-beta.7
+
+## 2.0.0-beta.6
+
+### Minor Changes
+
+- 8f05f9b: ZERO-3250: Beta branch synchronized with Main branch
+
+## 2.0.0-beta.5
+
+## 2.0.0-beta.4
+
+## 2.0.0-beta.3
+
+## 2.0.0-beta.2
+
+### Minor Changes
+
+- a006015: ZERO-3116: Add not-found page and update default middleware.
+- 1eeb3d8: ZERO-3116: Add not found page
+
 ## 2.0.0-beta.1
 
 ### Minor Changes

package/package.json

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

package/readme.md

@@ -1,16 +1,17 @@
 # @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
+
 ```
 
 ### Example Usage
+
 ##### File Path: src/views/checkout/steps/payment/options/bkm.tsx
 
 ```javascript
@@ -33,7 +34,60 @@ 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)}>
@@ -138,7 +176,7 @@ const BKMOption = ({
       </form>
       <div
         id={`js-bkm-frame-${id}`}
-        className="bkm-frame !flex justify-center items-center !pt-0"
+        className="bkm-frame flex! justify-center items-center pt-0!"
       ></div>
       <Script src="https://js.bkmexpress.com.tr/v1/javascripts/bex.js" defer />
     </>