@akinon/pz-one-click-checkout 1.17.0

package/.gitattributes

@@ -0,0 +1,15 @@
+*.js    text eol=lf
+*.jsx   text eol=lf
+*.ts    text eol=lf
+*.tsx   text eol=lf
+*.json  text eol=lf
+*.md    text eol=lf
+
+.eslintignore text eol=lf
+.eslintrc text eol=lf
+.gitignore text eol=lf
+.prettierrc text eol=lf
+.yarnrc text eol=lf
+
+* text=auto
+

package/.prettierrc

@@ -0,0 +1,13 @@
+{
+  "bracketSameLine": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "bracketSpacing": true,
+  "semi": true,
+  "useTabs": false,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "proseWrap": "never",
+  "trailingComma": "none"
+}

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @akinon/pz-one-click-checkout
+
+## 1.17.0
+
+### Minor Changes
+
+- Publish One-Click Checkout plugin

package/README.md

@@ -0,0 +1,61 @@
+# pz-one-click-checkout
+
+### Install the npm package
+
+```
+# For latest version
+
+yarn add git+ssh://git@bitbucket.org:akinonteam/pz-one-click-checkout.git
+
+# For specific version
+
+yarn add git+ssh://git@bitbucket.org:akinonteam/pz-one-click-checkout.git#COMMIT_HASH
+
+```
+
+### Next Config Configuration
+
+**next.config.js**
+
+```javascript
+transpilePackages: ['pz-one-click-checkout'],
+```
+
+### tailwind.config.js Configuration
+
+**tailwind.config.js**
+
+```javascript
+module.exports = {
+  content: ["..", "...", "./node_modules/pz-*/src/**/*.{js,ts,jsx,tsx}"],
+};
+```
+
+
+### Usage in plugin module system
+```javascript
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+
+<PluginModule
+  component={Component.OneClickCheckoutButtons}
+  props={{
+    addProductToBasket: false,
+    product: data.product,
+    translations: {
+      buttonText: 'Pay with AKIFAST'
+    }
+  }}
+/>
+```
+
+## Props
+
+| Properties      | Type      | Description                                                        | Default |
+| --------------- | --------- | ------------------------------------------------------------------ | ------- |
+| product         | `object`  | Product information.                                               |
+| productQuantity | `number`  | It is used to determine the quantity of the product to be added to the cart. |
+| clearBasket     | `boolean` | It is used when the basket needs to be cleaned while adding the product. | `true`  |
+| isDisabled      | `boolean` | Button click control is provided.                                  | `false`  |
+| className       | `string`  | The CSS class to apply to the button.                              | `bg-[#5381f7] px-7 py-2 w-full text-white text-sm font-semibold hover:bg-[#547ee7]`|
+| translations.buttonText | `string` | The text of the button.                                    | `ProviderName Checkout`|
+| addBeforeClick   | `function`| Can be used for checks before the Click event. The function should return boolean as value.|

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@akinon/pz-one-click-checkout",
+  "version": "1.17.0",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@reduxjs/toolkit": "^1.8.3"
+  },
+  "devDependencies": {
+    "@types/node": "^18.7.8",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.7.4",
+    "@reduxjs/toolkit": "^1.8.3",
+    "express": "4.17.3",
+    "node-fetch": "2.6.7",
+    "@types/express": "4.17.13"
+  }
+}

package/src/endpoints.ts

@@ -0,0 +1,37 @@
+import { api } from '@akinon/next/data/client/api';
+import { buildClientRequestUrl } from '@akinon/next/utils';
+import { checkout } from '@akinon/next/data/urls';
+
+export const checkoutProviderApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    getCheckoutProviders: build.query<any, void>({
+      query: () => ({
+        url: buildClientRequestUrl(checkout.getCheckoutProviders)
+      })
+    }),
+    getCheckoutProvidersIndex: build.mutation<any, void>({
+      query: () => ({
+        url: buildClientRequestUrl(checkout.getCheckoutProvidersIndex),
+        method: 'POST'
+      })
+    }),
+    setCheckoutProviders: build.mutation({
+      query: (pk: number) => ({
+        url: buildClientRequestUrl(checkout.setCheckoutProvider, {
+          useFormData: true
+        }),
+        method: 'POST',
+        body: {
+          checkout_provider: String(pk)
+        }
+      })
+    })
+  }),
+  overrideExisting: true
+});
+
+export const {
+  useGetCheckoutProvidersQuery,
+  useGetCheckoutProvidersIndexMutation,
+  useSetCheckoutProvidersMutation } =
+  checkoutProviderApi;

package/src/index.ts

@@ -0,0 +1 @@
+export * from './one-click-checkout-buttons';

package/src/one-click-checkout-buttons/index.tsx

@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import {
+  basketApi,
+  useClearBasketMutation
+} from '@akinon/next/data/client/basket';
+import { useAppDispatch } from '@akinon/next/redux/hooks';
+import { Product } from '@akinon/next/types';
+import { useAddProductToBasket } from 'hooks';
+import {
+  useGetCheckoutProvidersQuery,
+  useGetCheckoutProvidersIndexMutation,
+  useSetCheckoutProvidersMutation
+} from '../endpoints';
+
+type ProvidersType = [
+  {
+    pk: number;
+    name: string;
+    slug: string;
+  }
+];
+
+export interface OneClickCheckoutButtonsProps {
+  product?: Product;
+  productQuantity?: number;
+  clearBasket?: boolean;
+  isDisabled?: boolean;
+  className?: string;
+  translations: {
+    buttonText?: string;
+  };
+  addBeforeClick?: () => boolean;
+  openMiniBasket?: boolean;
+  providers?: ProvidersType[];
+}
+
+export const OneClickCheckoutButtons = (
+  props: OneClickCheckoutButtonsProps
+) => {
+  const dispatch = useAppDispatch();
+  const {
+    product,
+    productQuantity = 1,
+    clearBasket = false,
+    isDisabled = false,
+    className,
+    translations,
+    openMiniBasket = false,
+    addBeforeClick,
+    providers = []
+  } = props;
+
+  const [disabled, setDisabled] = useState(isDisabled);
+  const [clearBasketAction] = useClearBasketMutation();
+  const [addProductToBasketAction] = useAddProductToBasket();
+  const [checkoutProvidersIndex] = useGetCheckoutProvidersIndexMutation();
+  const [setCheckoutProvider] = useSetCheckoutProvidersMutation();
+  const { data:checkoutProviders } = useGetCheckoutProvidersQuery(null, { skip: providers.length > 0 });
+  const providersList = (providers.length > 0 ? providers : checkoutProviders) ?? [];
+
+  const handleOnClick = async (e, value) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (addBeforeClick) {
+      const isContinue = addBeforeClick();
+      if(!isContinue) {
+        return;
+      }
+    }
+
+    setDisabled(true);
+
+    if (clearBasket) {
+      await clearBasketAction()
+        .unwrap()
+        .then((basket) =>
+          dispatch(
+            basketApi.util.updateQueryData(
+              'getBasket',
+              undefined,
+              (draftBasket) => {
+                Object.assign(draftBasket, basket);
+              }
+            )
+          )
+        );
+    }
+
+    if (product) {
+      await addProductToBasketAction({
+        product: product?.pk,
+        quantity: productQuantity,
+        attributes: {},
+        shouldOpenMiniBasket: openMiniBasket
+      });
+    }
+
+    await checkoutProvidersIndex();
+    await setCheckoutProvider(value.pk);
+
+    setDisabled(false);
+  };
+
+  return (
+    <div className="w-full mt-4">
+
+      {providersList.map((value) => {
+        return (
+          <button
+            key={value.slug}
+            onClick={(e) => handleOnClick(e, value)}
+            className={twMerge(
+              clsx(
+                'bg-[#5381f7] px-7 py-2 w-full text-white text-sm font-semibold hover:bg-[#547ee7]',
+                className
+              )
+            )}
+            disabled={disabled}
+          >
+            {translations?.buttonText
+              ? translations.buttonText
+              : `${value.name} Checkout`}
+          </button>
+        );
+      })}
+    </div>
+  );
+};