@akinon/pz-one-click-checkout 2.0.0-beta.2 → 2.0.0-beta.20

package/CHANGELOG.md

@@ -1,18 +1,122 @@
 # @akinon/pz-one-click-checkout
 
-## 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
+
+## 1.121.0
+
+## 1.120.0
+
+## 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
 
-- ZERO-3091: Upgrade Next.js to v15 and React to v19
+- 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
+
+- 99b3fd6: ZERO-3375: Add custom UI rendering option for OneClickCheckoutButton
+
+## 1.89.0
+
+### Minor Changes
+
+- c759d6b: ZERO-3336: Add data-testid attribute to OneClickCheckoutButton for improved testing
+
+## 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/README.md

@@ -1,13 +1,13 @@
 # @akinon/pz-one-click-checkout
 
-### 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-one-click-checkout
 
-# Preferred installation method
 npx @akinon/projectzero@latest --plugins
+
 ```
 
 ## Props
@@ -25,3 +25,43 @@ npx @akinon/projectzero@latest --plugins
 | content | `React.ReactNode` | It is used to create custom content. |
 | openMiniBasket | `boolean` | Manages the opening status of the minibasket. |
 | translations.buttonText | `string` | The text of the button. |
+| customUIRender | `React.ReactNode` | Optional function to fully customize the button rendering. Receives onClick, disabled, loading, provider, productError and content props. |
+
+### Customizing Checkout Button
+
+```javascript
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+
+<PluginModule
+  component={Component.OneClickCheckoutButtons}
+  props={{
+    customUIRender: ({
+      onClick,
+      disabled,
+      loading,
+      provider,
+      productError,
+      content
+    }) => (
+      <>
+        <button
+          onClick={onClick}
+          disabled={disabled}
+          className="relative w-full py-3 bg-[#ff2000] text-black hover:bg-[#547ee7] text-sm font-semibold flex items-center justify-center"
+        >
+          {loading && (
+            <span className="absolute left-3 w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+          )}
+          {loading ? 'Please wait...' : content ?? `Buy with ${provider.name}`}
+        </button>
+
+        {productError && (
+          <div className="mt-4 text-xs text-center text-[#d72b01]">
+            {productError}
+          </div>
+        )}
+      </>
+    )
+  }}
+/>;
+```

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@akinon/pz-one-click-checkout",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.20",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
   "license": "MIT",
   "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",
     "@reduxjs/toolkit": "^1.8.3"
   },
   "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": "^4.7.4",
     "@reduxjs/toolkit": "^1.8.3",
     "express": "4.17.3",
     "node-fetch": "2.6.7",

package/src/types/index.ts

@@ -19,6 +19,14 @@ export interface OneClickCheckoutProps {
     buttonText?: string;
   };
   content?: React.ReactNode;
+  customUIRender?: (props: {
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled: boolean;
+    loading: boolean;
+    provider: OneClickCheckoutButtonProps['provider'];
+    productError?: string | null;
+    content?: React.ReactNode;
+  }) => React.ReactNode;
 }
 
 export interface OneClickCheckoutButtonProps extends OneClickCheckoutProps {

package/src/views/providers/provider-button.tsx

@@ -27,7 +27,8 @@ export const OneClickCheckoutButton = (props: OneClickCheckoutButtonProps) => {
     onError,
     provider,
     translations,
-    content
+    content,
+    customUIRender
   } = props;
 
   const [disabled, setDisabled] = useState(isDisabled);
@@ -101,9 +102,21 @@ export const OneClickCheckoutButton = (props: OneClickCheckoutButtonProps) => {
     setDisabled(false);
   };
 
+  if (customUIRender) {
+    return customUIRender({
+      onClick: (e) => handleOnClick(e, provider?.pk),
+      disabled,
+      loading: disabled,
+      provider,
+      content,
+      productError
+    });
+  }
+
   return (
     <>
       <Button
+        data-testid={`one-click-checkout-${provider?.slug}`}
         onClick={(e) => handleOnClick(e, provider.pk)}
         className={twMerge(
           clsx(
@@ -119,7 +132,7 @@ export const OneClickCheckoutButton = (props: OneClickCheckoutButtonProps) => {
       >
         {content
           ? content
-          : translations?.buttonText ?? `${provider.name} Checkout`}
+          : translations?.buttonText ?? `${provider?.name} Checkout`}
 
         {disabled && (
           <div className="absolute flex justify-center items-center bg-[#000000] opacity-50 w-full h-full">