@akinon/pz-multi-basket 1.42.0-rc.15

package/.gitattributes

@@ -0,0 +1,14 @@
+*.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-multi-basket
+
+## 1.42.0-rc.15
+
+### Minor Changes
+
+- 5ea00a6: ZERO-2761: Add multi basket package

package/README.md

@@ -0,0 +1,29 @@
+# pz-multi-basket
+
+### Setting the Visibility of Multi Basket
+
+```javascript
+// settings.js file
+
+module.exports = {
+  // other settings
+  plugins: {
+    // other plugin settings
+    multiBasket: true
+  }
+};
+```
+
+### Usage in Plugin Module System
+
+```javascript
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+
+<PluginModule component={Component.MultiBasket} props={{ BasketItem }} />;
+```
+
+## Props
+
+| Property   | Type          | Description                               |
+| ---------- | ------------- | ----------------------------------------- |
+| BasketItem | `JSX.Element` | product component displayed in the basket |

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@akinon/pz-multi-basket",
+  "version": "1.42.0-rc.15",
+  "license": "MIT",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "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"
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { MultiBasket } from './views/MultiBasket';

package/src/views/MultiBasket.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import {
+  useGetBasketQuery,
+  useGetAllBasketsQuery,
+  useGetBasketDetailMutation,
+  useRemoveBasketMutation,
+  useSelectMainBasketMutation
+} from '@akinon/next/data/client/basket';
+import { Button, Icon, Price } from '@akinon/next/components';
+import { useLocalization } from '@akinon/next/hooks';
+import clsx from 'clsx';
+
+interface Props {
+  BasketItem?: React.JSXElementConstructor<any>;
+}
+
+export const MultiBasket = (props: Props) => {
+  const { t } = useLocalization();
+  const { data: basketData } = useGetBasketQuery();
+  const { data: allBaskets, isSuccess: isAllBasketsSuccess } =
+    useGetAllBasketsQuery();
+  const { BasketItem } = props;
+  const [getBasketDetail] = useGetBasketDetailMutation();
+  const [removeBasket] = useRemoveBasketMutation();
+  const [selectMainBasket] = useSelectMainBasketMutation();
+  const [detailedBaskets, setDetailedBaskets] = useState<any[]>([]);
+
+  useEffect(() => {
+    const fetchAllBasketDetails = async () => {
+      if (!allBaskets) return;
+
+      if (allBaskets) {
+        const basketDetails = [];
+
+        for (const basket of allBaskets) {
+          try {
+            const detail = await getBasketDetail({
+              namespace: basket.namespace
+            }).unwrap();
+            basketDetails.push(detail);
+          } catch (error) {
+            console.error('Error fetching basket details:', error);
+          }
+        }
+        setDetailedBaskets(basketDetails);
+      }
+    };
+
+    fetchAllBasketDetails();
+  }, [allBaskets, getBasketDetail]);
+
+  return (
+    <>
+      {isAllBasketsSuccess && (
+        <>
+          {detailedBaskets.map(({ basket }) => (
+            <div key={basket.pk}>
+              {basket?.basketitem_set?.length > 0 && (
+                <div className="border mb-4">
+                  <div
+                    className={clsx(
+                      'w-full flex items-center justify-end border-b font-medium py-2 px-4 text-sm',
+                      {
+                        'justify-between': basket.namespace
+                      }
+                    )}
+                  >
+                    {basket.namespace && <h1>{basket.namespace}</h1>}
+                    <Button
+                      onClick={() => removeBasket({ pk: basket.pk })}
+                      appearance="ghost"
+                      data-testid="basket-select-button"
+                      className="text-primary-500 font-medium border-0 p-0 m-0 hover:bg-transparent hover:text-error"
+                    >
+                      {t('basket.remove_basket')}
+                    </Button>
+                  </div>
+                  <ul className="px-4">
+                    {basket.basketitem_set.map((basketItem, index) => (
+                      <BasketItem
+                        basketItem={basketItem}
+                        key={index}
+                        namespace={basket.namespace}
+                      />
+                    ))}
+                  </ul>
+                  <div className="flex justify-end items-center gap-2 p-4">
+                    <div className="flex items-center gap-3">
+                      <div className="">
+                        <div className="text-xs text-right font-light text-gray-900">
+                          {t('basket.total')}
+                        </div>
+                        <Price
+                          value={basket.total_amount}
+                          data-testid="basket-total"
+                          className="text-sm font-medium"
+                        />
+                      </div>
+                      <Button
+                        onClick={() => selectMainBasket({ pk: basket.pk })}
+                        data-testid="basket-select-button"
+                      >
+                        {basketData?.pk == basket?.pk ? (
+                          <div className="flex items-center">
+                            <Icon name="check" className="mr-2" />
+                            <span>{t('basket.selected_basket')}</span>
+                          </div>
+                        ) : (
+                          <span>{t('basket.select_basket')}</span>
+                        )}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+        </>
+      )}
+    </>
+  );
+};
+
+export default MultiBasket;