@akinon/pz-checkout-gift-pack 1.98.0-rc.65 → 1.98.0

package/CHANGELOG.md

@@ -1,18 +1,6 @@
 # @akinon/pz-checkout-gift-pack
 
-## 1.98.0-rc.65
-
-### Minor Changes
-
-- d8be48fb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
-- 16aff543: ZERO-3431: Add test script for redirect utility in package.json
-- 64699d3f: ZERO-2761: Fix invalid import for plugin module
-- e974d8e8: ZERO-3406: Fix rc build
-- 7eb51ca9: ZERO-3424 :Update package versions
-- 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
-- 8b1d24eb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
-- 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
-- 8bc82f02: ZERO-3405: Update Readme
+## 1.98.0
 
 ## 1.97.0
 

package/README.md

@@ -22,120 +22,246 @@ npx @akinon/projectzero@latest --plugins
 | customUIRender | `(props: { hasGiftPack: boolean; hasNote: { state: boolean }; note: string; onAddGiftPack: () => void; onRemoveGiftPack: () => void; onAddNote: () => void; formContent: React.ReactNode; translations: Record<string, string> }) => React.ReactNode` | A custom render function to fully override the default gift pack UI. This gives complete control over the display and interactions. |
 | customGiftNoteFormUIRender | `(props: { register: any; errors: any; note: string; textAreaCount: number; onSubmit: (data: any) => void; removeNote: () => void; handleSubmit: any; translations: Record<string, string> }) => React.ReactNode` | A render function that replaces the default gift note form UI. Useful for providing a customized textarea, button layout, or validation display. |
 
-### Default Usage
-
-```js
-import PluginModule, { Component } from '@akinon/next/components/plugin-module';
-
-<PluginModule
-  component={Component.CheckoutGiftPack}
-  props={{
-    className: 'flex flex-col w-full mb-4 border border-solid border-gray-400'
-  }}
-/>;
-```
-
 ### Customized sample code
 
 ```js
-import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+  <PluginModule
+    component={Component.CheckoutGiftPack}
+    props={{
+      className:
+        'flex flex-col w-full mb-4 border border-solid border-gray-400',
+      translations: {
+        addGiftPackText: 'Add Gift Pack',
+        giftPackAdded: 'Gift Pack Added',
+        removeGiftPackText: 'Remove Gift Pack',
+        informationText: 'This order will be gift packaged*',
+        updateNote: 'Update Note',
+        removeGiftNoteText: 'Remove Gift Note',
+        charactersLength: 'characters left',
+        placeholderInput:
+          'You can leave empty this area. However it will be a gift package without note.',
+        accordionTitle: 'Gift Note',
+        warningMessage:
+          'Make sure that this field is not longer than the character limit.',
+        save: 'SAVE',
+        close: 'Close'
+      },
+      customUIRender: ({
+        hasGiftPack,
+        hasNote,
+        note,
+        onAddGiftPack,
+        onRemoveGiftPack,
+        onAddNote,
+        formContent,
+        translations
+      }) => (
+        <div className="custom-gift-pack">
+          {hasGiftPack ? (
+            <div className="gift-pack-added p-4 border border-gray-200">
+              <div className="flex justify-between items-center mb-4">
+                <span className="font-medium">
+                  {translations.giftPackAdded}
+                </span>
+                <button
+                  onClick={onRemoveGiftPack}
+                  className="text-red-500 hover:text-red-700"
+                >
+                  {translations.removeGiftPackText}
+                </button>
+              </div>
 
-<PluginModule
-  component={Component.CheckoutGiftPack}
-  props={{
-    className: 'flex flex-col w-full mb-4 border border-solid border-gray-400',
-    translations: {
-      addGiftPackText: 'Add Gift Pack',
-      giftPackAdded: 'Gift Pack Added',
-      removeGiftPackText: 'Remove Gift Pack',
-      informationText: 'This order will be gift packaged*',
-      updateNote: 'Update Note',
-      removeGiftNoteText: 'Remove Gift Note',
-      charactersLength: 'characters left',
-      placeholderInput:
-        'You can leave empty this area. However it will be a gift package without note.',
-      accordionTitle: 'Gift Note',
-      warningMessage:
-        'Make sure that this field is not longer than the character limit.',
-      save: 'SAVE',
-      close: 'Close'
-    },
-    customUIRender: ({
-      hasGiftPack,
-      hasNote,
-      note,
-      onAddGiftPack,
-      onRemoveGiftPack,
-      onAddNote,
-      formContent,
-      translations
-    }) => (
-      <div className="custom-gift-pack">
-        {hasGiftPack ? (
-          <div className="gift-pack-added p-4 border border-gray-200">
-            <div className="flex justify-between items-center mb-4">
-              <span className="font-medium">{translations.giftPackAdded}</span>
-              <button
-                onClick={onRemoveGiftPack}
-                className="text-red-500 hover:text-red-700"
-              >
-                {translations.removeGiftPackText}
-              </button>
-            </div>
+              <div className="gift-note-info bg-gray-50 p-3 rounded">
+                <span className="text-sm text-gray-600">
+                  {translations.informationText}
+                </span>
+                {note && <p className="mt-2 text-sm">{note}</p>}
+                <button
+                  onClick={onAddNote}
+                  className="mt-2 text-blue-500 hover:text-blue-700"
+                >
+                  {translations.updateNote}
+                </button>
+              </div>
 
-            <div className="gift-note-info bg-gray-50 p-3 rounded">
-              <span className="text-sm text-gray-600">
-                {translations.informationText}
-              </span>
-              {note && <p className="mt-2 text-sm">{note}</p>}
-              <button
-                onClick={onAddNote}
-                className="mt-2 text-blue-500 hover:text-blue-700"
-              >
-                {translations.updateNote}
-              </button>
+              {hasNote.state && <div className="mt-4">{formContent}</div>}
             </div>
-
-            {hasNote.state && <div className="mt-4">{formContent}</div>}
+          ) : (
+            <button
+              onClick={onAddGiftPack}
+              className="w-full p-2 text-center border border-gray-200 hover:bg-gray-50"
+            >
+              {translations.addGiftPackText}
+            </button>
+          )}
+        </div>
+      ),
+      customGiftNoteFormUIRender: ({
+        register,
+        errors,
+        note,
+        textAreaCount,
+        onSubmit,
+        removeNote,
+        handleSubmit,
+        translations: formTranslations
+      }) => (
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <textarea
+            {...register('message')}
+            value={note}
+            placeholder={formTranslations.placeholderInput}
+          />
+          {errors.message && <span>{errors.message.message}</span>}
+          <div className="character-count">
+            {textAreaCount}/160 {formTranslations.charactersLength}
+          </div>
+          <div className="buttons">
+            <button type="button" onClick={removeNote}>
+              {formTranslations.removeGiftNoteText}
+            </button>
+            <button type="submit">{formTranslations.save}</button>
           </div>
-        ) : (
-          <button
-            onClick={onAddGiftPack}
-            className="w-full p-2 text-center border border-gray-200 hover:bg-gray-50"
+        </form>
+      )
+    }}
+  />
+  <div className="flex flex-col w-full border border-solid border-gray-400">
+    <div className="flex justify-between items-center flex-row border-b border-solid border-gray-400 px-4 py-2 sm:px-5 sm:py-4 sm:min-h-15">
+      <span className="text-black-800 text-xl font-light sm:text-2xl">
+        {t('checkout.summary.title')}
+      </span>
+      <span className="text-gray-950 text-xs">
+        {preOrder.basket.basketitem_set.length}{' '}
+        {t('checkout.summary.items').toUpperCase()}
+      </span>
+    </div>
+    <div className="border-b border-solid border-gray-400 max-h-64 overflow-y-auto">
+      {preOrder.basket.basketitem_set.map((item, index) => (
+        <div
+          key={`summary-basketitem-${index}`}
+          className="flex flex-row border-b border-solid border-gray-400 py-3 px-4 last:border-b-0 sm:px-5"
+        >
+          <Link
+            href={'#'}
+            className={twMerge(
+              'min-w-max flex items-center justify-center',
+              isMobileApp && 'pointer-events-none'
+            )}
+            passHref
           >
-            {translations.addGiftPackText}
-          </button>
-        )}
+            <Image
+              src={item.product.productimage_set[0]?.image}
+              alt="Checkout Summary Image"
+              width={64}
+              height={96}
+            />
+          </Link>
+          <div className="w-full flex flex-wrap justify-between pl-4">
+            <div className="flex justify-center flex-col w-1/2">
+              <Link
+                href={item.product.absolute_url}
+                className={twMerge(
+                  'text-xs text-black-800 transition-all mb-1 hover:text-secondary',
+                  isMobileApp && 'pointer-events-none'
+                )}
+              >
+                {item.product.name}
+              </Link>
+              <div className="flex flex-col">
+                <div className="flex text-xs text-black-800">
+                  <span>{t('checkout.summary.quantity')}:</span>
+                  <span className="ml-1 min-w-max">{item.quantity}</span>
+                </div>
+              </div>
+            </div>
+            <div className="flex items-end justify-center flex-col w-1/2">
+              {item.product.retail_price !== item.product.price && (
+                <div className="text-xs text-black-800 line-through min-w-max sm:text-sm">
+                  <Price value={item.product.retail_price} />
+                </div>
+              )}
+              <div className="text-xs text-secondary min-w-max sm:text-sm">
+                <Price value={item.product.price} />
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+    <div className="pt-3">
+      <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
+        <span>
+          {t('checkout.summary.subtotal')} (
+          {preOrder.basket.basketitem_set.length}{' '}
+          {t('checkout.summary.items')})
+        </span>
+        <span>
+          <Price value={preOrder?.basket?.total_amount} />
+        </span>
+      </div>
+      <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
+        <span>{t('checkout.summary.shipping')}</span>
+        <span>
+          <Price value={preOrder?.shipping_amount} />
+        </span>
+      </div>
+      <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
+        <span>{t('checkout.summary.discounts_total')}</span>
+        <span>
+          <Price
+            value={preOrder?.basket?.total_discount_amount}
+            useNegative
+          />
+        </span>
       </div>
-    ),
-    customGiftNoteFormUIRender: ({
-      register,
-      errors,
-      note,
-      textAreaCount,
-      onSubmit,
-      removeNote,
-      handleSubmit,
-      translations: formTranslations
-    }) => (
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <textarea
-          {...register('message')}
-          value={note}
-          placeholder={formTranslations.placeholderInput}
-        />
-        {errors.message && <span>{errors.message.message}</span>}
-        <div className="character-count">
-          {textAreaCount}/160 {formTranslations.charactersLength}
+      <div className="flex items-center justify-between w-full text-black-800 px-4 sm:px-5 text-lg border-t border-solid border-gray-400 py-2 mt-3 sm:text-xl sm:py-3">
+        <span className="font-light">{t('checkout.summary.total')}</span>
+        <span className="min-w-max pl-4">
+          <Price value={preOrder?.unpaid_amount} />
+        </span>
+      </div>
+    </div>
+  </div>
+  {currentStep === CheckoutStep.Payment && (
+    <div className="flex flex-col w-full border border-solid border-gray-400 mt-4">
+      <div className="flex justify-between items-center flex-row border-b border-solid border-gray-400 px-4 py-2 sm:px-5 sm:py-3 sm:min-h-15">
+        <div className="text-black-800 text-xl font-light sm:text-2xl">
+          {t('checkout.summary.delivery_info')}
+        </div>
+        <div
+          className="text-xs text-black-800 italic cursor-pointer underline transition-all hover:text-secondary"
+          onClick={() => dispatch(setCurrentStep(CheckoutStep.Shipping))}
+        >
+          {t('checkout.summary.change')}
         </div>
-        <div className="buttons">
-          <button type="button" onClick={removeNote}>
-            {formTranslations.removeGiftNoteText}
-          </button>
-          <button type="submit">{formTranslations.save}</button>
+      </div>
+      <div className="flex flex-col py-4 px-4 text-black-800 text-xs sm:px-5">
+        <div className="w-full overflow-hidden overflow-ellipsis mb-1 last:mb-0">
+          <Trans
+            i18nKey="checkout.summary.info"
+            components={{
+              ShippingAddress: (
+                <Text title={preOrder.shipping_address?.title} />
+              ),
+              ShippingOption: (
+                <Text title={preOrder.shipping_option?.name} />
+              )
+            }}
+          />
         </div>
-      </form>
-    )
-  }}
-/>;
+        <div className="w-full overflow-hidden overflow-ellipsis mb-1 last:mb-0">
+          {preOrder.shipping_address?.line}{' '}
+          {preOrder.shipping_address?.postcode}{' '}
+          {preOrder.shipping_address?.district && (
+            <>{preOrder.shipping_address?.district.name} / </>
+          )}
+          {preOrder.shipping_address?.township && (
+            <>{preOrder.shipping_address?.township.name} / </>
+          )}
+          {preOrder.shipping_address?.city?.name}
+        </div>
+      </div>
+    </div>
+  )}
 ```

package/package.json

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