@akinon/pz-basket-gift-pack 1.42.0-rc.9 → 1.43.0-rc.0

package/CHANGELOG.md

@@ -1,28 +1,13 @@
 # @akinon/pz-basket-gift-pack
 
-## 1.42.0-rc.9
-
-## 1.42.0-rc.8
-
-## 1.42.0-rc.7
+## 1.43.0-rc.0
 
 ### Minor Changes
 
 - 50b9069: ZERO-2767: update plugin readme files
+- 18e8197: ZERO-2782: Add modal support for basket gift pack
 
-## 1.42.0-rc.6
-
-## 1.42.0-rc.5
-
-## 1.42.0-rc.4
-
-## 1.42.0-rc.3
-
-## 1.42.0-rc.2
-
-## 1.42.0-rc.1
-
-## 1.42.0-rc.0
+## 1.42.0
 
 ## 1.41.0
 

package/README.md

@@ -10,8 +10,22 @@ yarn add @akinon/pz-basket-gift-pack
 npx @akinon/projectzero@latest --plugins
 ```
 
+### 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. |
+| Properties | Type | Description |
+| --- | --- | --- |
+| basketItem | `object` | Product information. |
+| useModal | `boolean` | This prop determines whether the gift pack form will be displayed inside a modal. When set to true, the form will open inside a modal. |
+| modalClassName | `string` | This prop is used to customize the overall style of the modal. |
+| modalTitle | `string` | This prop sets the title of the modal. |
+| modalContentClassName | `string` | This prop is used to customize the style of the modal content. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-basket-gift-pack",
-  "version": "1.42.0-rc.9",
+  "version": "1.43.0-rc.0",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

package/src/index.tsx

@@ -8,8 +8,7 @@ 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 { Button, Icon, Modal } from '@akinon/next/components';
 import { BasketItem as BasketItemType } from '@akinon/next/types';
 
 interface GiftPackForm {
@@ -18,6 +17,10 @@ interface GiftPackForm {
 
 interface Props {
   basketItem: BasketItemType;
+  useModal?: boolean;
+  modalTitle?: string;
+  modalClassName?: string;
+  modalContentClassName?: string;
   translations?: {
     placeholderInput?: string;
     warningMessage?: string;
@@ -38,7 +41,11 @@ interface Props {
 export const BasketGiftPack = ({
   basketItem,
   translations,
-  className
+  className,
+  useModal = false,
+  modalTitle = 'Gift Note',
+  modalClassName,
+  modalContentClassName
 }: Props) => {
   const defaultTranslations = {
     placeholderInput:
@@ -130,6 +137,61 @@ export const BasketGiftPack = ({
     }
   };
 
+  const formContent = (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {!useModal && (
+        <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>
+  );
+
   useEffect(() => {
     for (const [key, value] of Object.entries(basketItem.attributes)) {
       if (value === '') {
@@ -220,64 +282,32 @@ export const BasketGiftPack = ({
           {_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>
+      {useModal ? (
+        <Modal
+          portalId="basket-gift-pack-modal"
+          title={modalTitle}
+          className={twMerge(
+            'w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto',
+            modalClassName
           )}
-          <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>
+          open={hasNote.state}
+          setOpen={(state) =>
+            setHasNote((prevstate) => ({ ...prevstate, state }))
+          }
+        >
+          <div className={twMerge('px-6 py-4', modalContentClassName)}>
+            {formContent}
           </div>
-        </form>
-      </div>
+        </Modal>
+      ) : (
+        <div
+          className={clsx('mt-4', {
+            hidden: !hasNote.state
+          })}
+        >
+          {formContent}
+        </div>
+      )}
     </div>
   );
 };