@akinon/pz-one-click-checkout 1.89.0 → 1.90.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @akinon/pz-one-click-checkout
 
+## 1.90.0
+
+### Minor Changes
+
+- 99b3fd6: ZERO-3375: Add custom UI rendering option for OneClickCheckoutButton
+
 ## 1.89.0
 
 ### Minor Changes

package/README.md

@@ -25,7 +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,6 +1,6 @@
 {
   "name": "@akinon/pz-one-click-checkout",
-  "version": "1.89.0",
+  "version": "1.90.0",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
   "license": "MIT",

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,6 +102,17 @@ 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
@@ -120,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">