@akinon/pz-one-click-checkout 2.0.0-beta.10 → 2.0.0-beta.11

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @akinon/pz-one-click-checkout
 
+## 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

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": "2.0.0-beta.10",
+  "version": "2.0.0-beta.11",
   "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,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">