@akinon/pz-basket-gift-pack 1.50.0-rc.1 → 1.51.0

package/CHANGELOG.md

@@ -1,14 +1,8 @@
 # @akinon/pz-basket-gift-pack
 
-## 1.50.0-rc.1
+## 1.51.0
 
-## 1.50.0-rc.0
-
-### Minor Changes
-
-- 50b90692: ZERO-2767: update plugin readme files
-- 18e8197: ZERO-2782: Add modal support for basket gift pack
-- 64699d3: ZERO-2761: Fix invalid import for plugin module
+## 1.50.0
 
 ## 1.49.0
 

package/README.md

@@ -1,31 +1,35 @@
-# @akinon/pz-basket-gift-pack
+# pz-basket-gift-pack
 
 ### Install the npm package
 
 ```bash
 # For latest version
-yarn add @akinon/pz-basket-gift-pack
+yarn add ​git+ssh://git@bitbucket.org:akinonteam/pz-basket-gift-pack.git
 
-# Preferred installation method
-npx @akinon/projectzero@latest --plugins
+# For specific version
+yarn add ​git+ssh://git@bitbucket.org:akinonteam/pz-basket-gift-pack.git#0e7cde5
 ```
 
-### Example Usage
+### 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} />;
+<BasketGiftPackage basketItem={basketItem}/>
 ```
 
 ### Props
 
-| 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. |
+| Properties | Type     | Description          |
+| ---------- | -------- | -------------------- |
+| basketItem | `object` | Product information. |

package/package.json

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

package/src/index.tsx

@@ -8,7 +8,8 @@ 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, Icon, Modal } from '@akinon/next/components';
+import { Button } from '@akinon/next/components/button';
+import { Icon } from '@akinon/next/components/icon';
 import { BasketItem as BasketItemType } from '@akinon/next/types';
 
 interface GiftPackForm {
@@ -17,10 +18,6 @@ interface GiftPackForm {
 
 interface Props {
   basketItem: BasketItemType;
-  useModal?: boolean;
-  modalTitle?: string;
-  modalClassName?: string;
-  modalContentClassName?: string;
   translations?: {
     placeholderInput?: string;
     warningMessage?: string;
@@ -41,11 +38,7 @@ interface Props {
 export const BasketGiftPack = ({
   basketItem,
   translations,
-  className,
-  useModal = false,
-  modalTitle = 'Gift Note',
-  modalClassName,
-  modalContentClassName
+  className
 }: Props) => {
   const defaultTranslations = {
     placeholderInput:
@@ -137,61 +130,6 @@ 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 === '') {
@@ -282,32 +220,64 @@ export const BasketGiftPack = ({
           {_translations.removeGiftPack}
         </Button>
       </div>
-      {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={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>
           )}
-          open={hasNote.state}
-          setOpen={(state) =>
-            setHasNote((prevstate) => ({ ...prevstate, state }))
-          }
-        >
-          <div className={twMerge('px-6 py-4', modalContentClassName)}>
-            {formContent}
+          <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>
-        </Modal>
-      ) : (
-        <div
-          className={clsx('mt-4', {
-            hidden: !hasNote.state
-          })}
-        >
-          {formContent}
-        </div>
-      )}
+        </form>
+      </div>
     </div>
   );
 };