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

package/CHANGELOG.md

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

package/README.md

@@ -1,30 +1,29 @@
-# @akinon/pz-checkout-gift-package
+# pz-checkout-gift-package
 
 ### Install the npm package
 
 ```bash
 # For latest version
-yarn add @akinon/pz-checkout-gift-package
+yarn add ​git+ssh://git@bitbucket.org:akinonteam/pz-checkout-gift-package.git
 
-# Preferred installation method
-npx @akinon/projectzero@latest --plugins
+# For specific version
+yarn add ​git+ssh://git@bitbucket.org:akinonteam/pz-checkout-gift-package.git#445a9da
 ```
 
-### Example Usage
+### Next Config Configuration
+
+##### apps/web/next.config.js**
+
+```javascript
+const withTM = require("next-transpile-modules")(["pz-checkout-gift-package"]);
+```
 
+### Example Usage
 ##### File Path: src/views/checkout/summary.tsx
 
+
 ```javascript
 import { CheckoutGiftPackage } from 'pz-checkout-gift-package';
 
-<CheckoutGiftPackage />;
+<CheckoutGiftPackage />
 ```
-
-### Props
-
-| Properties | Type | Description |
-| --- | --- | --- |
-| 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-checkout-gift-pack",
-  "version": "1.50.0-rc.1",
+  "version": "1.51.0",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

package/src/index.tsx

@@ -1,8 +1,7 @@
 import { useAppSelector } from '@akinon/next/redux/hooks';
 import { yupResolver } from '@hookform/resolvers/yup';
 import clsx from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { Accordion, Button, Icon, Modal } from '@akinon/next/components';
+import { Accordion, Button, Icon } from '@akinon/next/components';
 import { useEffect, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { RootState } from 'redux/store';
@@ -15,10 +14,6 @@ interface GiftPackForm {
 
 interface CheckoutGiftPackProps {
   className?: string;
-  useModal?: boolean;
-  modalClassName?: string;
-  modalTitle?: string;
-  modalContentClassName?: string;
   translations: {
     addGiftPackText: string;
     giftPackAdded: string;
@@ -36,10 +31,6 @@ interface CheckoutGiftPackProps {
 
 export const CheckoutGiftPack = ({
   className,
-  useModal = false,
-  modalClassName,
-  modalContentClassName,
-  modalTitle = 'Gift Note',
   translations
 }: CheckoutGiftPackProps) => {
   const [isNoteFormOpen, setIsNoteFormOpen] = useState(false);
@@ -111,51 +102,6 @@ export const CheckoutGiftPack = ({
     resetField('message');
   };
 
-  const formContent = (
-    <form
-      className={clsx({
-        hidden: !isNoteFormOpen
-      })}
-      onSubmit={handleSubmit(onSubmit)}
-    >
-      <textarea
-        className={clsx(
-          'w-full border border-solid p-4 placeholder:text-[0.75rem] placeholder:text-[#9c9d9d] outline-none text-[0.75rem]',
-          noteLength > 160 ? 'border-[#e85150]' : 'border-[#7b9d75]'
-        )}
-        rows={4}
-        placeholder={_translations.placeholderInput}
-        {...register('message')}
-      />
-      {errors.message && (
-        <span className="text-sm text-[#d72a04] text-[0.875rem]">
-          {errors.message.message}
-        </span>
-      )}
-      <div className="text-[0.75rem]">
-        {noteLength} / 160 {_translations.charactersLength}
-      </div>
-      <div className="flex justify-end items-end gap-2">
-        {giftBox?.note !== DEFAULT_NOTE && (
-          <Button
-            appearance="ghost"
-            className="text-[0.75rem] underline cursor-pointer border-0 px-0 py-0 h-auto hover:bg-transparent hover:text-[#e95151]"
-            onClick={removeGiftNote}
-          >
-            {_translations.removeGiftNoteText}
-          </Button>
-        )}
-        <Button
-          type="submit"
-          className="w-[7rem] h-[1.75rem] font-[0.75rem] uppercase"
-          appearance="outlined"
-        >
-          {_translations.save}
-        </Button>
-      </div>
-    </form>
-  );
-
   useEffect(() => {
     if (giftBox?.note !== DEFAULT_NOTE) {
       setValue('message', giftBox?.note);
@@ -220,33 +166,54 @@ export const CheckoutGiftPack = ({
           </Button>
         </div>
       </div>
-
-      {useModal ? (
-        <Modal
-          portalId="checkout-gift-pack-modal"
-          title={modalTitle}
-          className={twMerge(
-            'w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto',
-            modalClassName
-          )}
-          open={isNoteFormOpen}
-          setOpen={setIsNoteFormOpen}
+      <form
+        className={clsx('py-2 px-5', {
+          hidden: !isNoteFormOpen
+        })}
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <Accordion
+          title={_translations.accordionTitle}
+          titleClassName="text-[0.75rem]"
+          isCollapse={true}
         >
-          <div className={twMerge('px-6 py-4', modalContentClassName)}>
-            {formContent}
+          <textarea
+            className={clsx(
+              'w-full border border-solid p-4 placeholder:text-[0.75rem] placeholder:text-[#9c9d9d] outline-none text-[0.75rem]',
+              noteLength > 160 ? 'border-[#e85150]' : 'border-[#7b9d75]'
+            )}
+            rows={4}
+            placeholder={_translations.placeholderInput}
+            {...register('message')}
+          />
+          {errors.message && (
+            <span className="text-sm text-[#d72a04] text-[0.875rem]">
+              {errors.message.message}
+            </span>
+          )}
+          <div className="text-[0.75rem]">
+            {noteLength} / 160 {_translations.charactersLength}
           </div>
-        </Modal>
-      ) : (
-        <div className={clsx('py-2 px-5', { hidden: !isNoteFormOpen })}>
-          <Accordion
-            title={_translations.accordionTitle}
-            titleClassName="text-[0.75rem]"
-            isCollapse={true}
-          >
-            {formContent}
-          </Accordion>
-        </div>
-      )}
+          <div className="flex justify-end items-end gap-2">
+            {giftBox?.note !== DEFAULT_NOTE && (
+              <Button
+                appearance="ghost"
+                className="text-[0.75rem] underline cursor-pointer border-0 px-0 py-0 h-auto hover:bg-transparent hover:text-[#e95151]"
+                onClick={removeGiftNote}
+              >
+                {_translations.removeGiftNoteText}
+              </Button>
+            )}
+            <Button
+              type="submit"
+              className="w-[7rem] h-[1.75rem] font-[0.75rem] uppercase"
+              appearance="outlined"
+            >
+              {_translations.save}
+            </Button>
+          </div>
+        </Accordion>
+      </form>
     </div>
   );
 };