@akinon/pz-basket-gift-pack 1.0.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/README.md

@@ -0,0 +1,35 @@
+# pz-basket-gift-pack
+
+### Install the npm package
+
+```bash
+# For latest version
+yarn add ​git+ssh://git@bitbucket.org:akinonteam/pz-basket-gift-pack.git
+
+# For specific version
+yarn add ​git+ssh://git@bitbucket.org:akinonteam/pz-basket-gift-pack.git#0e7cde5
+```
+
+### Next Config Configuration
+
+##### apps/web/next.config.js**
+
+```javascript
+const withTM = require("next-transpile-modules")(["pz-basket-gift-pack"]);
+```
+
+### Example Usage
+##### File Path: src/views/basket/basket-item.tsx
+
+
+```javascript
+import { BasketGiftPackage } from 'pz-basket-gift-pack';
+
+<BasketGiftPackage basketItem={basketItem}/>
+```
+
+### Props
+
+| Properties | Type     | Description          |
+| ---------- | -------- | -------------------- |
+| basketItem | `object` | Product information. |

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@akinon/pz-basket-gift-pack",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "src/index.tsx",
+  "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/endpoints.ts

@@ -0,0 +1,47 @@
+import { Basket } from "@akinon/next/types";
+import { buildClientRequestUrl } from "@akinon/next/utils";
+import { api } from "@akinon/next/data/client/api";
+
+export const basketApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    addGiftPackage: build.mutation<Basket, { message: string; id: number }>({
+      query: ({ id, message }) => ({
+        url: buildClientRequestUrl("/baskets/basket_items", {
+          useTrailingSlash: false,
+          contentType: "application/json",
+        }),
+        method: "PATCH",
+        body: {
+          attributes: {
+            gift_note: message,
+          },
+          id,
+          is_all: true,
+        },
+      }),
+      transformResponse: (response: { basket: Basket }) => response.basket,
+      invalidatesTags: ["Basket"],
+    }),
+    removeGiftPackage: build.mutation<Basket, { id: number }>({
+      query: ({ id }) => ({
+        url: buildClientRequestUrl("/baskets/basket_items", {
+          contentType: "application/json",
+        }),
+        method: "PATCH",
+        body: {
+          attributes: {
+            gift_note: "",
+          },
+          id,
+          is_all: true,
+        },
+      }),
+      transformResponse: (response: { basket: Basket }) => response.basket,
+      invalidatesTags: ["Basket"],
+    }),
+  }),
+  overrideExisting: true,
+});
+
+export const { useAddGiftPackageMutation, useRemoveGiftPackageMutation } =
+  basketApi;

package/src/index.tsx

@@ -0,0 +1,283 @@
+import {
+  useAddGiftPackageMutation,
+  useRemoveGiftPackageMutation
+} from './endpoints';
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import { useEffect, useState } from 'react';
+import { Button } from '@akinon/next/components/button';
+import { Icon } from '@akinon/next/components/icon';
+import { BasketItem as BasketItemType } from '@akinon/next/types';
+
+interface GiftPackForm {
+  message: string;
+}
+
+interface Props {
+  basketItem: BasketItemType;
+  translations?: {
+    placeholderInput?: string;
+    warningMessage?: string;
+    addNote?: string;
+    addGiftNote?: string;
+    changeNote?: string;
+    giftPackAdded?: string;
+    addGiftPack?: string;
+    removeGiftPack?: string;
+    charactersLength?: string;
+    removeNote?: string;
+    save?: string;
+    close?: string;
+  };
+  className?: string;
+}
+
+export const BasketGiftPack = ({
+  basketItem,
+  translations,
+  className
+}: Props) => {
+  const defaultTranslations = {
+    placeholderInput:
+      'You can leave this area empty. However it will be a gift package without note.',
+    warningMessage: 'Ensure this field has no more than 160 characters.',
+    addNote: 'Add Note',
+    addGiftNote: 'Add Gift Note',
+    changeNote: 'Change Note',
+    giftPackAdded: 'Gift Pack Added',
+    addGiftPack: 'Add Gift Pack',
+    removeGiftPack: 'Remove Gift Pack',
+    charactersLength: 'characters left',
+    removeNote: 'Remove Note',
+    save: 'SAVE',
+    close: 'Close'
+  };
+
+  const _translations = {
+    ...defaultTranslations,
+    ...translations
+  };
+
+  const [addGiftPackage] = useAddGiftPackageMutation();
+  const [removeGiftPackage] = useRemoveGiftPackageMutation();
+  const [hasGiftPack, setHasGiftPack] = useState(false);
+  const [hasNote, setHasNote] = useState({
+    title: _translations.addNote,
+    state: false
+  });
+  const [textAreaCount, setTextAreaCount] = useState(0);
+  const [note, setNote] = useState('');
+  const defaultMessage = 'NO-GIFT-NOTE';
+
+  const giftPackFormSchema = () =>
+    yup.object().shape({
+      message: yup.string().max(160, _translations.warningMessage)
+    });
+
+  const {
+    register,
+    watch,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<GiftPackForm>({
+    resolver: yupResolver(giftPackFormSchema())
+  });
+
+  const onSubmit: SubmitHandler<GiftPackForm> = async (data) => {
+    addGiftPackage({ id: basketItem.id, message: data.message })
+      .unwrap()
+      .then(() => {
+        setHasNote((prevstate) => ({ ...prevstate, state: false }));
+        changeNoteTitle(data.message);
+      });
+  };
+
+  const addGiftPack = () => {
+    addGiftPackage({ id: basketItem.id, message: defaultMessage })
+      .unwrap()
+      .then(() => {
+        setHasGiftPack(true);
+        setHasNote((prevstate) => ({ ...prevstate, state: false }));
+      });
+  };
+
+  const removeGiftPack = () => {
+    removeGiftPackage({ id: basketItem.id });
+    setHasGiftPack(false);
+    setHasNote((prevstate) => ({ ...prevstate, state: false }));
+  };
+
+  const removeNote = () => {
+    addGiftPackage({ id: basketItem.id, message: defaultMessage });
+    setHasNote((prevstate) => ({ ...prevstate, state: false }));
+    changeNoteTitle(defaultMessage);
+  };
+
+  const changeNoteTitle = (value) => {
+    if (value !== defaultMessage) {
+      setHasNote((prevstate) => ({
+        ...prevstate,
+        title: _translations.changeNote
+      }));
+    } else {
+      setHasNote((prevstate) => ({
+        ...prevstate,
+        title: _translations.addNote
+      }));
+    }
+  };
+
+  useEffect(() => {
+    for (const [key, value] of Object.entries(basketItem.attributes)) {
+      if (value === '') {
+        setHasGiftPack(false);
+        setHasNote((prevstate) => ({ ...prevstate, state: false }));
+        setNote('');
+        setTextAreaCount(0);
+        return;
+      }
+
+      if (key) {
+        changeNoteTitle(value);
+        setNote(value);
+        setHasGiftPack(true);
+        setTextAreaCount(value?.length);
+      }
+    }
+  }, [basketItem.attributes]);
+
+  useEffect(() => {
+    const subscription = watch(({ message }) => {
+      setNote(message);
+      setTextAreaCount(message.length);
+    });
+
+    return () => subscription.unsubscribe();
+  }, [watch]);
+
+  return (
+    <div
+      className={twMerge(
+        clsx(
+          'mt-4 sm:mt-0',
+          {
+            'sm:mt-8': hasNote.state
+          },
+          className
+        )
+      )}
+    >
+      <div className="flex gap-4">
+        <div className="flex items-center gap-2">
+          <Icon
+            name="giftbox"
+            size={15}
+            className={clsx(hasGiftPack ? 'text-[#e85150]' : 'text-[#000000]')}
+          />
+
+          {hasGiftPack ? (
+            <span className="text-[0.75rem]">
+              {_translations.giftPackAdded}
+            </span>
+          ) : (
+            <Button
+              appearance="ghost"
+              className="text-[#000000] cursor-pointer underline border-0 px-0 py-0 text-[0.75rem] h-auto hover:bg-transparent hover:text-[#000000]"
+              onClick={addGiftPack}
+            >
+              {_translations.addGiftPack}
+            </Button>
+          )}
+        </div>
+        <Button
+          appearance="ghost"
+          className={clsx(
+            'text-[#000000] underline cursor-pointer border-0 px-0 py-0 text-[0.75rem] h-auto hover:bg-transparent hover:text-[#000000]',
+            {
+              hidden: !hasGiftPack
+            }
+          )}
+          onClick={() =>
+            setHasNote((prevstate) => ({ ...prevstate, state: true }))
+          }
+        >
+          {hasNote.title}
+        </Button>
+
+        <Button
+          appearance="ghost"
+          className={clsx(
+            'text-[#000000] cursor-pointer border-0 px-0 py-0 text-[0.75rem] underline h-auto hover:bg-transparent hover:text-[#000000]',
+            {
+              hidden: !hasGiftPack
+            }
+          )}
+          onClick={removeGiftPack}
+        >
+          {_translations.removeGiftPack}
+        </Button>
+      </div>
+      <div
+        className={clsx('mt-4', {
+          hidden: !hasNote.state
+        })}
+      >
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className="flex justify-between mb-3">
+            <span className="text-[0.75rem] font-bold">
+              {_translations.addGiftNote}
+            </span>
+            <Button
+              appearance="ghost"
+              className="text-[#000000] cursor-pointer border-0 px-0 py-0 text-[0.75rem] select-none underline h-auto hover:bg-transparent hover:text-[#000000]"
+              onClick={(e) => {
+                e.preventDefault();
+                setHasNote((prevstate) => ({ ...prevstate, state: false }));
+              }}
+            >
+              {_translations.close}
+            </Button>
+          </div>
+          <textarea
+            className="w-full border border-solid border-[#4a4f53] p-4 placeholder:text-[0.75rem] placeholder:text-[#c8c9c8] outline-none text-[0.75rem]"
+            rows={7}
+            name="message"
+            value={note !== defaultMessage ? note : ' '}
+            placeholder={_translations.placeholderInput}
+            {...register('message')}
+          />
+          {errors.message && (
+            <span className="text-sm text-[#d72a04]">
+              {errors.message.message}
+            </span>
+          )}
+          <div className="flex justify-between items-center mt-2">
+            <span
+              className={clsx(
+                'text-[0.75rem] ',
+                textAreaCount > 160 ? 'text-[#e85150]' : 'text-[#82a27c]'
+              )}
+            >
+              {textAreaCount}/160 {_translations.charactersLength}
+            </span>
+            <div className="flex items-center gap-3">
+              <Button
+                appearance="ghost"
+                className="text-[#000000] cursor-pointer border-0 px-0 py-0 text-[0.75rem] select-none underline h-auto hover:bg-transparent hover:text-[#000000]"
+                onClick={removeNote}
+              >
+                {_translations.removeNote}
+              </Button>
+              <Button type="submit" className="w-28 h-7 font-medium uppercase">
+                {_translations.save}
+              </Button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};