@akinon/pz-checkout-gift-pack 1.0.0

package/.gitattributes

@@ -0,0 +1,15 @@
+*.js    text eol=lf
+*.jsx   text eol=lf
+*.ts    text eol=lf
+*.tsx   text eol=lf
+*.json  text eol=lf
+*.md    text eol=lf
+
+.eslintignore text eol=lf
+.eslintrc text eol=lf
+.gitignore text eol=lf
+.prettierrc text eol=lf
+.yarnrc text eol=lf
+
+* text=auto
+

package/.prettierrc

@@ -0,0 +1,13 @@
+{
+  "bracketSameLine": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "bracketSpacing": true,
+  "semi": true,
+  "useTabs": false,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "proseWrap": "never",
+  "trailingComma": "none"
+}

package/README.md

@@ -0,0 +1,29 @@
+# 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
+
+# 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"]);
+```
+
+### Example Usage
+##### File Path: src/views/checkout/summary.tsx
+
+
+```javascript
+import { CheckoutGiftPackage } from 'pz-checkout-gift-package';
+
+<CheckoutGiftPackage />
+```

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@akinon/pz-checkout-gift-pack",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "src/index.tsx",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.7.8",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.7.4"
+  }
+}

package/src/endpoints.ts

@@ -0,0 +1,39 @@
+import { CheckoutContext, PreOrder } from '@akinon/next/types';
+import { buildClientRequestUrl } from '@akinon/next/utils';
+import { api } from '@akinon/next/data/client/api';
+
+interface CheckoutResponse {
+  pre_order?: PreOrder;
+  errors: {
+    non_field_errors: string;
+  };
+  context_list?: CheckoutContext[];
+  template_name?: string;
+  redirect_url?: string;
+}
+
+export const checkoutApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    addGiftPack: build.mutation<CheckoutResponse, { note: string }>({
+      query: ({ note }) => ({
+        url: buildClientRequestUrl('/orders/checkout?page=GiftBoxPage', {
+          useFormData: true
+        }),
+        method: 'POST',
+        body: {
+          note
+        }
+      })
+    }),
+    removeGiftPack: build.mutation<CheckoutResponse, void>({
+      query: () => ({
+        url: buildClientRequestUrl('/orders/checkout?page=GiftBoxIndexPage'),
+        method: 'POST'
+      })
+    })
+  }),
+  overrideExisting: false
+});
+
+export const { useAddGiftPackMutation, useRemoveGiftPackMutation } =
+  checkoutApi;

package/src/index.tsx

@@ -0,0 +1,219 @@
+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 { useEffect, useState } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { RootState } from 'redux/store';
+import * as yup from 'yup';
+import { useAddGiftPackMutation, useRemoveGiftPackMutation } from './endpoints';
+
+interface GiftPackForm {
+  message: string;
+}
+
+interface CheckoutGiftPackProps {
+  className?: string;
+  translations: {
+    addGiftPackText: string;
+    giftPackAdded: string;
+    removeGiftPackText: string;
+    informationText: string;
+    updateNote: string;
+    removeGiftNoteText: string;
+    charactersLength: string;
+    placeholderInput: string;
+    accordionTitle: string;
+    warningMessage: string;
+    save: string;
+  };
+}
+
+export const CheckoutGiftPack = ({
+  className,
+  translations
+}: CheckoutGiftPackProps) => {
+  const [isNoteFormOpen, setIsNoteFormOpen] = useState(false);
+
+  const { preOrder, hasGiftBox } = useAppSelector(
+    (state: RootState) => state.checkout
+  );
+
+  const defaultTranslations = {
+    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: 'Ensure this field has no more than 160 characters.',
+    save: 'SAVE'
+  };
+
+  const _translations = {
+    ...defaultTranslations,
+    ...translations
+  };
+
+  const giftPackFormSchema = () =>
+    yup.object().shape({
+      message: yup.string().max(160, _translations.warningMessage)
+    });
+
+  if (!hasGiftBox) {
+    console.warn(
+      'Gift box for checkout is disabled. Please enable it from Omnitron.'
+    );
+    return null;
+  }
+
+  const [addGiftPack] = useAddGiftPackMutation();
+  const [removeGiftPack] = useRemoveGiftPackMutation();
+  const DEFAULT_NOTE = 'NO-GIFT-MESSAGE';
+
+  const {
+    register,
+    watch,
+    handleSubmit,
+    resetField,
+    setValue,
+    formState: { errors }
+  } = useForm<GiftPackForm>({
+    resolver: yupResolver(giftPackFormSchema())
+  });
+
+  const subscribeNote = watch('message');
+  const noteLength = subscribeNote?.length ?? 0;
+  const giftBox = preOrder?.gift_box;
+
+  const onSubmit: SubmitHandler<GiftPackForm> = async (data) => {
+    await addGiftPack({
+      note: noteLength > 0 ? data.message : DEFAULT_NOTE
+    }).unwrap();
+    setIsNoteFormOpen(false);
+  };
+
+  const removeGiftNote = async () => {
+    await addGiftPack({ note: DEFAULT_NOTE }).unwrap();
+    resetField('message');
+  };
+
+  useEffect(() => {
+    if (giftBox?.note !== DEFAULT_NOTE) {
+      setValue('message', giftBox?.note);
+    }
+  }, [giftBox]);
+
+  return (
+    <div className={className}>
+      <div className="flex justify-between items-center py-2 px-5">
+        <div className="flex gap-2 items-center">
+          <Icon name="giftbox" size={16} className="fill-[#000000]" />
+          <span className="text-[1rem] font-light">
+            {giftBox ? (
+              _translations.giftPackAdded
+            ) : (
+              <Button
+                appearance="ghost"
+                className="cursor-pointer border-0 px-0 py-0 text-[1rem] font-light h-auto hover:bg-transparent hover:text-[#000000]"
+                onClick={() => addGiftPack({ note: DEFAULT_NOTE })}
+              >
+                {_translations.addGiftPackText}
+              </Button>
+            )}
+          </span>
+        </div>
+        <Button
+          appearance="ghost"
+          className={clsx(
+            'text-[0.75rem] underline cursor-pointer border-0 px-0 py-0 h-auto hover:bg-transparent hover:text-[#e95151]',
+            {
+              hidden: !giftBox
+            }
+          )}
+          onClick={async () => {
+            await removeGiftPack().unwrap();
+            setIsNoteFormOpen(false);
+          }}
+        >
+          {_translations.removeGiftPackText}
+        </Button>
+      </div>
+      <div
+        className={clsx(
+          'flex flex-col gap-2 bg-[#f7f7f7] text-[#58585a] text-[0.875rem] py-2 px-5',
+          {
+            hidden: !giftBox
+          }
+        )}
+      >
+        <div className="flex justify-between items-center">
+          <span>{_translations.informationText}</span>
+          <Icon name="giftbox" size={14} className="fill-[#58585a]" />
+        </div>
+        <div className="flex justify-between items-center gap-8">
+          <span>{giftBox?.note !== DEFAULT_NOTE ? giftBox?.note : ''}</span>
+          <Button
+            appearance="ghost"
+            className="underline cursor-pointer flex-shrink-0 border-0 px-0 py-0 h-auto hover:bg-transparent hover:text-[#000000]"
+            onClick={() => setIsNoteFormOpen(true)}
+          >
+            {_translations.updateNote}
+          </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>
+          )}
+          <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>
+        </Accordion>
+      </form>
+    </div>
+  );
+};