@akinon/pz-checkout-gift-pack 1.42.0-rc.1 → 1.42.0-rc.10

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @akinon/pz-checkout-gift-pack
 
+## 1.42.0-rc.10
+
+### Minor Changes
+
+- 69ca080: ZERO-2780: add modal support for checkout gift pack
+
+## 1.42.0-rc.9
+
+## 1.42.0-rc.8
+
+## 1.42.0-rc.7
+
+### Minor Changes
+
+- 50b9069: ZERO-2767: update plugin readme files
+
+## 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

package/README.md

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

package/src/index.tsx

@@ -1,7 +1,8 @@
 import { useAppSelector } from '@akinon/next/redux/hooks';
 import { yupResolver } from '@hookform/resolvers/yup';
 import clsx from 'clsx';
-import { Accordion, Button, Icon } from '@akinon/next/components';
+import { twMerge } from 'tailwind-merge';
+import { Accordion, Button, Icon, Modal } from '@akinon/next/components';
 import { useEffect, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { RootState } from 'redux/store';
@@ -14,6 +15,10 @@ interface GiftPackForm {
 
 interface CheckoutGiftPackProps {
   className?: string;
+  useModal?: boolean;
+  modalClassName?: string;
+  modalTitle?: string;
+  modalContentClassName?: string;
   translations: {
     addGiftPackText: string;
     giftPackAdded: string;
@@ -31,6 +36,10 @@ interface CheckoutGiftPackProps {
 
 export const CheckoutGiftPack = ({
   className,
+  useModal = false,
+  modalClassName,
+  modalContentClassName,
+  modalTitle = 'Gift Note',
   translations
 }: CheckoutGiftPackProps) => {
   const [isNoteFormOpen, setIsNoteFormOpen] = useState(false);
@@ -102,6 +111,51 @@ 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);
@@ -166,54 +220,33 @@ export const CheckoutGiftPack = ({
           </Button>
         </div>
       </div>
-      <form
-        className={clsx('py-2 px-5', {
-          hidden: !isNoteFormOpen
-        })}
-        onSubmit={handleSubmit(onSubmit)}
-      >
-        <Accordion
-          title={_translations.accordionTitle}
-          titleClassName="text-[0.75rem]"
-          isCollapse={true}
-        >
-          <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>
+
+      {useModal ? (
+        <Modal
+          portalId="checkout-gift-pack-modal"
+          title={modalTitle}
+          className={twMerge(
+            'w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto',
+            modalClassName
           )}
-          <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>
+          open={isNoteFormOpen}
+          setOpen={setIsNoteFormOpen}
+        >
+          <div className={twMerge('px-6 py-4', modalContentClassName)}>
+            {formContent}
           </div>
-        </Accordion>
-      </form>
+        </Modal>
+      ) : (
+        <div className={clsx('py-2 px-5', { hidden: !isNoteFormOpen })}>
+          <Accordion
+            title={_translations.accordionTitle}
+            titleClassName="text-[0.75rem]"
+            isCollapse={true}
+          >
+            {formContent}
+          </Accordion>
+        </div>
+      )}
     </div>
   );
 };