From 32353862d1d8dea15091ea1b7ebfbc7e6ebc87fb Mon Sep 17 00:00:00 2001
From: nguyenvanhadncntt <nguyenvanhadncntt@gmail.com>
Date: Wed, 18 Sep 2024 16:30:15 +0700
Subject: [PATCH] #1034 implement create promotion page

---
 backoffice/common/items/Input.tsx             |  85 ++++-
 .../components/MultipleAutoComplete.tsx       | 110 ++++++
 .../PromotionGeneralInformation.tsx           | 319 ++++++++++++++++++
 .../modules/promotion/models/Promotion.ts     |  24 +-
 .../promotion/services/ProductService.ts      |  20 ++
 .../promotion/services/PromotionService.ts    |  17 +-
 .../promotion/manager-promotion/create.tsx    |  86 +++++
 .../promotion/manager-promotion/index.tsx     |   4 +-
 backoffice/styles/globals.css                 |  38 +++
 .../product/controller/BrandController.java   |   3 +-
 .../controller/CategoryController.java        |   3 +-
 .../controller/PromotionController.java       |  16 +-
 .../repository/PromotionRepository.java       |   4 +-
 .../promotion/service/PromotionService.java   |  18 +-
 .../yas/promotion/viewmodel/PromotionDto.java |   2 +
 .../promotion/viewmodel/PromotionPostVm.java  |  12 +-
 .../promotion/viewmodel/PromotionPutVm.java   |   5 +-
 .../controller/PromotionControllerTest.java   |  25 +-
 .../service/PromotionServiceTest.java         |   9 +-
 19 files changed, 756 insertions(+), 44 deletions(-)
 create mode 100644 backoffice/modules/promotion/components/MultipleAutoComplete.tsx
 create mode 100644 backoffice/modules/promotion/components/PromotionGeneralInformation.tsx
 create mode 100644 backoffice/modules/promotion/services/ProductService.ts
 create mode 100644 backoffice/pages/promotion/manager-promotion/create.tsx

diff --git a/backoffice/common/items/Input.tsx b/backoffice/common/items/Input.tsx
index 69cf4268ca..8e15f77c04 100644
--- a/backoffice/common/items/Input.tsx
+++ b/backoffice/common/items/Input.tsx
@@ -1,5 +1,5 @@
 import { HTMLInputTypeAttribute } from 'react';
-import { Path, RegisterOptions, UseFormRegister, FieldValues } from 'react-hook-form';
+import { FieldValues, Path, RegisterOptions, UseFormRegister } from 'react-hook-form';
 
 type InputProps<T extends FieldValues> = {
   labelText: string;
@@ -10,12 +10,30 @@ type InputProps<T extends FieldValues> = {
   registerOptions?: RegisterOptions;
   defaultValue?: number | string | string[];
   disabled?: boolean;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
 type CheckProps<T extends FieldValues> = InputProps<T> & {
   defaultChecked?: any;
 };
 
+type SelectProps<T extends FieldValues> = InputProps<T> & {
+  options: any[];
+  placeholder?: string;
+  defaultValue?: number | string | string[];
+  disabled?: boolean;
+  isMultiple?: boolean;
+  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+};
+
+type DateProps<T extends FieldValues> = InputProps<T> & {
+  minDate?: Date;
+  maxDate?: Date;
+  defaultValue?: string;
+  disabled?: boolean;
+  placeholder?: string;
+};
+
 export const Input = <T extends FieldValues>({
   labelText,
   field,
@@ -111,3 +129,68 @@ export const Switch = <T extends FieldValues>({
     </div>
   </div>
 );
+
+export const Select = <T extends FieldValues>({
+  labelText,
+  field,
+  register,
+  registerOptions,
+  error,
+  options,
+  defaultValue,
+  placeholder,
+  disabled,
+  isMultiple,
+  onChange,
+}: SelectProps<T> & {
+  options: any[];
+}) => (
+  <div className="mb-3">
+    <label className="form-label" htmlFor={field}>
+      {labelText} {registerOptions?.required && <span className="text-danger">*</span>}
+    </label>
+    <select
+      id={field}
+      className={`form-select ${error ? 'border-danger' : ''}`}
+      {...register(field, registerOptions)}
+      defaultValue={defaultValue}
+      disabled={disabled}
+      multiple={isMultiple}
+      onChange={onChange}
+    >
+      <option value="" selected={!defaultValue} disabled>
+        {placeholder}
+      </option>
+      {options.map((item) => (
+        <option key={item.value} value={item.value}>
+          {item.label}
+        </option>
+      ))}
+    </select>
+    <p className="error-field mt-1">{error}</p>
+  </div>
+);
+
+export const DatePicker = <T extends FieldValues>({
+  labelText,
+  field,
+  register,
+  registerOptions = {},
+  error,
+  defaultValue,
+}: DateProps<T>) => (
+  <div className="mb-3">
+    <label className="form-label" htmlFor={field}>
+      {labelText} {registerOptions?.required && <span className="text-danger">*</span>}
+    </label>
+    <input
+      id={field}
+      className={`form-control ${error ? 'border-danger' : ''}`}
+      {...register(field, registerOptions)}
+      defaultValue={defaultValue}
+      type="date"
+      placeholder="dd/mm/yyyy"
+    />
+    <p className="error-field mt-1">{error}</p>
+  </div>
+);
diff --git a/backoffice/modules/promotion/components/MultipleAutoComplete.tsx b/backoffice/modules/promotion/components/MultipleAutoComplete.tsx
new file mode 100644
index 0000000000..a7e327e004
--- /dev/null
+++ b/backoffice/modules/promotion/components/MultipleAutoComplete.tsx
@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import { RegisterOptions, UseFormRegister } from 'react-hook-form';
+
+type props = {
+  labelText: string;
+  field: string;
+  register: UseFormRegister<any>;
+  registerOptions?: RegisterOptions;
+  // error: string,
+  defaultValue?: any;
+  options?: any[];
+  fetchOptions: (data: any) => any;
+  onSelect: (value: any) => void;
+  onRemoveElement: (value: any) => void;
+  optionSelectedIds: number[];
+  isSubmitting: boolean;
+};
+
+const MultipleAutoComplete = (props: props) => {
+  const [isFocusing, setIsFocusing] = useState(false);
+  const [optionSelecteds, setOptionSelecteds] = useState<any[]>([]);
+  const queryData = (query: string) => {
+    props.fetchOptions(query);
+  };
+
+  const handleFocus = (isFocusing: boolean) => {
+    setTimeout(() => {
+      if (!props.isSubmitting) {
+        setIsFocusing(isFocusing);
+      } else {
+        setIsFocusing(false);
+      }
+    }, 150);
+  };
+
+  const selectOption = (option: any) => {
+    setOptionSelecteds([...optionSelecteds, option]);
+    props.onSelect(option.id);
+  };
+
+  const removeOption = (option: any) => {
+    setOptionSelecteds(optionSelecteds.filter((item) => item.id !== option.id));
+    props.onRemoveElement(option.id);
+  };
+
+  return (
+    <div className="autocomplete-container">
+      <label className="form-label" htmlFor={props.field}>
+        {props.labelText}
+      </label>
+      <div>
+        <input
+          type="text"
+          id={props.field}
+          {...props.register(props.field, props.registerOptions)}
+          defaultValue={props.defaultValue}
+          onChange={(e) => queryData(e.target.value)}
+          onFocus={() => handleFocus(true)}
+          onBlur={() => handleFocus(false)}
+          className="form-control"
+        />
+        {isFocusing && props.options!.length > 0 && (
+          <div className="autocomplete-list" style={{ maxHeight: '200px', overflowY: 'scroll' }}>
+            {props.options!.map((option, index) => (
+              <div
+                key={option.id}
+                aria-hidden="true"
+                className={`dropdown-item ${
+                  props.optionSelectedIds.includes(option.id) ? 'selected-options' : ''
+                }`}
+                onClick={() => selectOption(option)}
+              >
+                {option.name}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {optionSelecteds.length > 0 && (
+        <div className="mt-3">
+          <span className="form-label">Selected {props.labelText}</span>
+          {optionSelecteds.map((option, index) => (
+            <div
+              className="d-flex align-items-center"
+              style={{
+                marginBottom: '5px',
+                borderRadius: '5px',
+                border: '1px solid #ccc',
+                padding: '5px',
+              }}
+              key={option.id}
+            >
+              <div className="mr-3" style={{ display: 'inline', marginRight: '15px' }}>
+                {option.name}
+              </div>
+              <span
+                aria-hidden="true"
+                className="fa fa-remove"
+                onClick={() => removeOption(option)}
+              ></span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MultipleAutoComplete;
diff --git a/backoffice/modules/promotion/components/PromotionGeneralInformation.tsx b/backoffice/modules/promotion/components/PromotionGeneralInformation.tsx
new file mode 100644
index 0000000000..d46807dea5
--- /dev/null
+++ b/backoffice/modules/promotion/components/PromotionGeneralInformation.tsx
@@ -0,0 +1,319 @@
+import { useEffect, useState } from 'react';
+import { FieldErrorsImpl, UseFormRegister, UseFormSetValue, UseFormTrigger } from 'react-hook-form';
+import { DatePicker, Input, Select, Switch, TextArea } from '../../../common/items/Input';
+import { PromotionDetail, PromotionDto } from '../models/Promotion';
+import { searchBrands, searchCategories, searchProducts } from '../services/ProductService';
+import MultipleAutoComplete from './MultipleAutoComplete';
+
+type Props = {
+  register: UseFormRegister<PromotionDto>;
+  errors: FieldErrorsImpl<PromotionDto>;
+  setValue: UseFormSetValue<PromotionDto>;
+  trigger: UseFormTrigger<PromotionDto>;
+  promotion?: PromotionDetail;
+  isSubmitting: boolean;
+};
+
+const PromotionGeneralInformation = ({
+  register,
+  errors,
+  setValue,
+  trigger,
+  promotion,
+  isSubmitting,
+}: Props) => {
+  const [discountType, setDiscountType] = useState(promotion?.discountType);
+  const [usageType, setUsageType] = useState(promotion?.usageType);
+  const [applyTo, setApplyTo] = useState(promotion?.applyTo);
+  const [brands, setBrands] = useState(promotion?.brands.map((brand) => brand.id) ?? []);
+  const [categories, setCategories] = useState(
+    promotion?.categories.map((category) => category.id) ?? []
+  );
+  const [products, setProducts] = useState(promotion?.products.map((product) => product.id) ?? []);
+  const [productVms, setProductVms] = useState(promotion?.products ?? []);
+  const [brandVms, setBrandVms] = useState(promotion?.brands ?? []);
+  const [categoryVms, setCategoryVms] = useState(promotion?.categories ?? []);
+
+  useEffect(() => {
+    if (applyTo === 'PRODUCT') {
+      searchProducts('').then((data) => {
+        setProductVms(data.productContent);
+      });
+    }
+  }, [applyTo]);
+
+  const convertDateToString = (date?: Date | string) => {
+    if (date) {
+      if (typeof date === 'string') {
+        return date;
+      }
+      const month = date.getMonth() + 1;
+      return `${date.getFullYear()}-${month > 9 ? month : '0' + month}-${date.getDate()}`;
+    }
+    return '';
+  };
+
+  const onSelectProducts = (id: number) => {
+    setValue('productIds', [...(products ?? []), id]);
+    setProducts([...(products ?? []), id]);
+  };
+
+  const removeProduct = (id: number) => {
+    const productFilters = products?.filter((product) => product !== id);
+    setProducts(productFilters);
+    setValue('productIds', productFilters);
+  };
+
+  const fetchProducts = (name: string) => {
+    searchProducts(name).then((data) => {
+      setProductVms(data.productContent);
+    });
+  };
+
+  const fetchCategories = (name: string) => {
+    searchCategories(name).then((data) => {
+      setCategoryVms(data);
+    });
+  };
+
+  const removeCategory = (id: number) => {
+    const categoryFilters = categories?.filter((category) => category !== id);
+    setCategories(categoryFilters);
+    setValue('categoryIds', categoryFilters);
+  };
+
+  const onSelectCategory = (id: number) => {
+    setValue('categoryIds', [...(categories ?? []), id]);
+    setCategories([...(categories ?? []), id]);
+  };
+
+  const fetchBrands = (name: string) => {
+    searchBrands(name).then((data) => {
+      setBrandVms(data);
+    });
+  };
+
+  const removeBrand = (id: number) => {
+    const brandFilters = brands?.filter((brand) => brand !== id);
+    setBrands(brandFilters);
+    setValue('brandIds', brandFilters);
+  };
+
+  const onSelectBrand = (id: number) => {
+    setValue('brandIds', [...(brands ?? []), id]);
+    setBrands([...(brands ?? []), id]);
+  };
+
+  return (
+    <>
+      <Input
+        labelText="Name"
+        field="name"
+        defaultValue={promotion?.name}
+        register={register}
+        registerOptions={{
+          required: { value: true, message: 'Name is required' },
+        }}
+        error={errors.name?.message}
+      />
+      <Input
+        labelText="Slug"
+        field="slug"
+        defaultValue={promotion?.slug}
+        register={register}
+        registerOptions={{
+          required: { value: true, message: 'Slug is required' },
+        }}
+        error={errors.slug?.message}
+      />
+      <Input
+        labelText="Coupon code"
+        field="couponCode"
+        defaultValue={promotion?.couponCode}
+        register={register}
+        registerOptions={{
+          required: { value: true, message: 'Coupon code is required' },
+        }}
+        error={errors.couponCode?.message}
+      />
+      <TextArea
+        labelText="Description"
+        field="description"
+        defaultValue={promotion?.description}
+        register={register}
+        error={errors.description?.message}
+      />
+      <Select
+        labelText="Discount type"
+        field="discountType"
+        placeholder="Select discount type"
+        defaultValue={promotion?.discountType}
+        register={register}
+        registerOptions={{
+          required: { value: true, message: 'Discount type is required' },
+        }}
+        error={errors.discountType?.message}
+        options={[
+          { value: 'PERCENTAGE', label: 'Percentage' },
+          { value: 'FIXED', label: 'Amount' },
+        ]}
+        onChange={(event) => {
+          setDiscountType(event.target.value);
+        }}
+      />
+
+      {discountType === 'PERCENTAGE' && (
+        <Input
+          labelText="Discount percentage"
+          field="discountPercentage"
+          defaultValue={promotion?.discountPercentage}
+          register={register}
+          registerOptions={{
+            required: { value: true, message: 'Discount percentage is required' },
+          }}
+          error={errors.discountPercentage?.message}
+        />
+      )}
+      {discountType === 'FIXED' && (
+        <Input
+          labelText="Discount amount"
+          field="discountAmount"
+          defaultValue={promotion?.discountAmount}
+          register={register}
+          registerOptions={{
+            required: { value: true, message: 'Discount amount is required' },
+          }}
+          error={errors.discountAmount?.message}
+        />
+      )}
+      <Select
+        labelText="Usage type"
+        field="usageType"
+        defaultValue={promotion?.usageType}
+        register={register}
+        registerOptions={{
+          required: { value: true, message: 'Usage type is required' },
+        }}
+        placeholder="Select usage type"
+        error={errors.usageType?.message}
+        options={[
+          { value: 'LIMITED', label: 'Limited' },
+          { value: 'UNLIMITED', label: 'Unlimited' },
+        ]}
+        onChange={(event) => {
+          setUsageType(event.target.value);
+        }}
+      />
+      {usageType === 'LIMITED' && (
+        <Input
+          labelText="Usage limit"
+          field="usageLimit"
+          defaultValue={promotion?.usageLimit}
+          register={register}
+          registerOptions={{
+            required: { value: true, message: 'Usage limit is required' },
+          }}
+          error={errors.usageLimit?.message}
+        />
+      )}
+      <Switch
+        labelText="Active"
+        field="isActive"
+        defaultChecked={promotion?.isActive}
+        register={register}
+      />
+      <DatePicker
+        labelText="Start date"
+        field="startDate"
+        defaultValue={convertDateToString(promotion?.startDate)}
+        register={register}
+        registerOptions={{
+          required: { value: true, message: 'Start date is required' },
+        }}
+        error={errors.startDate?.message}
+      />
+      <DatePicker
+        labelText="End date"
+        field="endDate"
+        defaultValue={convertDateToString(promotion?.endDate)}
+        register={register}
+        registerOptions={{
+          required: { value: true, message: 'End date is required' },
+        }}
+        error={errors.endDate?.message}
+      />
+      <Select
+        labelText="Apply to"
+        field="applyTo"
+        defaultValue={promotion?.applyTo}
+        register={register}
+        registerOptions={{
+          required: { value: true, message: 'Apply to is required' },
+        }}
+        placeholder="Select apply to"
+        error={errors.applyTo?.message}
+        options={[
+          { value: 'PRODUCT', label: 'Products' },
+          { value: 'CATEGORY', label: 'Categories' },
+          { value: 'BRAND', label: 'Brands' },
+        ]}
+        onChange={(event) => {
+          setApplyTo(event.target.value);
+        }}
+      />
+      {!isSubmitting && applyTo === 'PRODUCT' && (
+        <MultipleAutoComplete
+          labelText="Product"
+          field="product"
+          defaultValue={promotion?.products}
+          register={register}
+          registerOptions={{
+            required: { value: true, message: 'Product is required' },
+          }}
+          options={productVms}
+          fetchOptions={fetchProducts}
+          onSelect={(id) => onSelectProducts(id)}
+          optionSelectedIds={products}
+          isSubmitting={isSubmitting}
+          onRemoveElement={(id) => removeProduct(id)}
+        />
+      )}
+      {!isSubmitting && applyTo === 'CATEGORY' && (
+        <MultipleAutoComplete
+          labelText="Category"
+          field="category"
+          defaultValue={promotion?.categories}
+          register={register}
+          registerOptions={{
+            required: { value: true, message: 'Category is required' },
+          }}
+          options={categoryVms}
+          fetchOptions={fetchCategories}
+          onSelect={(id) => onSelectCategory(id)}
+          optionSelectedIds={categories}
+          isSubmitting={isSubmitting}
+          onRemoveElement={(id) => removeCategory(id)}
+        />
+      )}
+      {!isSubmitting && applyTo === 'BRAND' && (
+        <MultipleAutoComplete
+          labelText="Brand"
+          field="brand"
+          defaultValue={promotion?.brands}
+          register={register}
+          registerOptions={{
+            required: { value: true, message: 'Brand is required' },
+          }}
+          options={brandVms}
+          fetchOptions={fetchBrands}
+          onSelect={(id) => onSelectBrand(id)}
+          optionSelectedIds={brands}
+          isSubmitting={isSubmitting}
+          onRemoveElement={(id) => removeBrand(id)}
+        />
+      )}
+    </>
+  );
+};
+
+export default PromotionGeneralInformation;
diff --git a/backoffice/modules/promotion/models/Promotion.ts b/backoffice/modules/promotion/models/Promotion.ts
index 38b91f5305..e3d6af61d0 100644
--- a/backoffice/modules/promotion/models/Promotion.ts
+++ b/backoffice/modules/promotion/models/Promotion.ts
@@ -16,8 +16,8 @@ export type PromotionDetail = {
   discountPercentage: number;
   discountAmount: number;
   isActive: boolean;
-  startDate: Date;
-  endDate: Date;
+  startDate: Date | string;
+  endDate: Date | string;
   brands: BrandVm[];
   categories: CategoryGetVm[];
   products: ProductVm[];
@@ -37,3 +37,23 @@ export type PromotionListRequest = {
   pageNo: number;
   pageSize: number;
 };
+
+export type PromotionDto = {
+  id?: number;
+  name: string;
+  slug: string;
+  description: string;
+  couponCode: string;
+  usageLimit: number;
+  discountType: string;
+  applyTo: string;
+  usageType: string;
+  discountPercentage?: number;
+  discountAmount?: number;
+  isActive: boolean;
+  startDate: Date;
+  endDate: Date;
+  brandIds: number[];
+  categoryIds: number[];
+  productIds: number[];
+};
diff --git a/backoffice/modules/promotion/services/ProductService.ts b/backoffice/modules/promotion/services/ProductService.ts
new file mode 100644
index 0000000000..b7b9628b5c
--- /dev/null
+++ b/backoffice/modules/promotion/services/ProductService.ts
@@ -0,0 +1,20 @@
+import apiClientService from '@commonServices/ApiClientService';
+
+const searchProductUrl = '/api/product/backoffice/products';
+const searchCategoriesUrl = '/api/product/backoffice/categories';
+const searchBrandsUrl = '/api/product/backoffice/brands';
+
+export async function searchProducts(name: string) {
+  const url = `${searchProductUrl}?product-name=${name}`;
+  return (await apiClientService.get(url)).json();
+}
+
+export async function searchCategories(name: string) {
+  const url = `${searchCategoriesUrl}?categoryName=${name}`;
+  return (await apiClientService.get(url)).json();
+}
+
+export async function searchBrands(name: string) {
+  const url = `${searchBrandsUrl}?brandName=${name}`;
+  return (await apiClientService.get(url)).json();
+}
diff --git a/backoffice/modules/promotion/services/PromotionService.ts b/backoffice/modules/promotion/services/PromotionService.ts
index 0830869783..7f5585c3cc 100644
--- a/backoffice/modules/promotion/services/PromotionService.ts
+++ b/backoffice/modules/promotion/services/PromotionService.ts
@@ -1,5 +1,5 @@
 import apiClientService from '@commonServices/ApiClientService';
-import { PromotionListRequest } from '../models/Promotion';
+import { PromotionDto, PromotionListRequest } from '../models/Promotion';
 
 const baseUrl = '/api/promotion/backoffice/promotions';
 
@@ -8,6 +8,21 @@ export async function getPromotions(request: PromotionListRequest) {
   return (await apiClientService.get(url)).json();
 }
 
+export async function createPromotion(promotion: PromotionDto) {
+  const url = `${baseUrl}`;
+  return (await apiClientService.post(url, JSON.stringify(promotion))).json();
+}
+
+export async function updatePromotion(promotion: PromotionDto) {
+  const url = `${baseUrl}/${promotion.id}`;
+  return (await apiClientService.put(url, promotion)).json();
+}
+
+export async function getPromotion(id: number) {
+  const url = `${baseUrl}/${id}`;
+  return (await apiClientService.get(url)).json();
+}
+
 function createRequestFromObject(request: any): string {
   return Object.keys(request)
     .map(function (key) {
diff --git a/backoffice/pages/promotion/manager-promotion/create.tsx b/backoffice/pages/promotion/manager-promotion/create.tsx
new file mode 100644
index 0000000000..2dc344305b
--- /dev/null
+++ b/backoffice/pages/promotion/manager-promotion/create.tsx
@@ -0,0 +1,86 @@
+import PromotionGeneralInformation from 'modules/promotion/components/PromotionGeneralInformation';
+import { PromotionDto } from 'modules/promotion/models/Promotion';
+import { createPromotion } from 'modules/promotion/services/PromotionService';
+import { NextPage } from 'next';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+
+const PromotionCreate: NextPage = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    trigger,
+  } = useForm<PromotionDto>();
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmitPromotion = async (event: PromotionDto) => {
+    let promotion: PromotionDto = {
+      slug: event.slug,
+      couponCode: event.couponCode,
+      name: event.name,
+      applyTo: event.applyTo,
+      startDate: event.startDate,
+      endDate: event.endDate,
+      discountAmount: event.discountAmount ?? 0,
+      discountPercentage: event.discountPercentage ?? 0,
+      usageLimit: event.usageLimit,
+      usageType: event.usageType,
+      discountType: event.discountType,
+      description: event.description,
+      brandIds: event.brandIds,
+      categoryIds: event.categoryIds,
+      productIds: event.productIds,
+      isActive: event.isActive,
+    };
+
+    createPromotion(promotion).then((response) => {
+      if (response.status === 201) {
+        window.location.href = '/promotion/manager-promotion';
+      }
+    });
+  };
+
+  const cancel = () => {
+    window.location.href = '/promotion/manager-promotion';
+  };
+
+  const submitForm = () => {
+    setIsSubmitting(true);
+    handleSubmit(handleSubmitPromotion)();
+  };
+
+  return (
+    <div className="row mt-5">
+      <div className="col-md-8">
+        <h2>Create Promotion</h2>
+        <form>
+          <PromotionGeneralInformation
+            register={register}
+            errors={errors}
+            setValue={setValue}
+            trigger={trigger}
+            isSubmitting={isSubmitting}
+          />
+          <div className="mt-5">
+            <button
+              className="btn btn-primary"
+              style={{ marginRight: '20px' }}
+              type="button"
+              onClick={submitForm}
+            >
+              Save
+            </button>
+            <button className="btn btn-danger ml-4" type="button" onClick={cancel}>
+              Cancel
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default PromotionCreate;
diff --git a/backoffice/pages/promotion/manager-promotion/index.tsx b/backoffice/pages/promotion/manager-promotion/index.tsx
index b2510f9d92..1976a86ae6 100644
--- a/backoffice/pages/promotion/manager-promotion/index.tsx
+++ b/backoffice/pages/promotion/manager-promotion/index.tsx
@@ -42,7 +42,7 @@ const PromotionList: NextPage = () => {
     setPageNo(selected);
   };
 
-  const convertToStringDate = (date: Date) => {
+  const convertToStringDate = (date: Date | string) => {
     if (typeof date === 'string') {
       date = new Date(date);
     }
@@ -57,7 +57,7 @@ const PromotionList: NextPage = () => {
           <h2 className="text-danger font-weight-bold mb-3">Promotions</h2>
         </div>
         <div className="col-md-4 text-right">
-          <Link href="/catalog/brands/create">
+          <Link href="/promotion/manager-promotion/create">
             <Button>Add new Promotion</Button>
           </Link>
         </div>
diff --git a/backoffice/styles/globals.css b/backoffice/styles/globals.css
index 0647ec784c..dd20566a81 100644
--- a/backoffice/styles/globals.css
+++ b/backoffice/styles/globals.css
@@ -255,3 +255,41 @@ a[data-toggle='collapse'] {
   border-radius: 5px;
   color: black;
 }
+
+.autocomplete-container {
+  position: relative;
+}
+.autocomplete-list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  border: 1px solid #ccc;
+  max-height: 150px;
+  overflow-y: auto;
+  background-color: white;
+  z-index: 1000;
+}
+.autocomplete-item {
+  padding: 8px;
+  cursor: pointer;
+}
+.autocomplete-item:hover {
+  background-color: #eee;
+}
+.selected-options {
+  margin-top: 10px;
+}
+.selected-item {
+  display: inline-block;
+  margin: 5px;
+  padding: 5px 10px;
+  background-color: #e0e0e0;
+  border-radius: 20px;
+}
+.selected-item button {
+  background: none;
+  border: none;
+  margin-left: 5px;
+  cursor: pointer;
+}
diff --git a/product/src/main/java/com/yas/product/controller/BrandController.java b/product/src/main/java/com/yas/product/controller/BrandController.java
index e4f3b3ff0e..ed3d1dc59f 100644
--- a/product/src/main/java/com/yas/product/controller/BrandController.java
+++ b/product/src/main/java/com/yas/product/controller/BrandController.java
@@ -41,7 +41,8 @@ public BrandController(BrandRepository brandRepository, BrandService brandServic
     }
 
     @GetMapping({"/backoffice/brands", "/storefront/brands"})
-    public ResponseEntity<List<BrandVm>> listBrands(@RequestParam(required = false) String brandName) {
+    public ResponseEntity<List<BrandVm>> listBrands(
+        @RequestParam(required = false, defaultValue = "") String brandName) {
         log.info("[Test logging with trace] Got a request");
         List<BrandVm> brandVms = brandRepository.findByNameContainingIgnoreCase(brandName).stream()
                 .map(BrandVm::fromModel)
diff --git a/product/src/main/java/com/yas/product/controller/CategoryController.java b/product/src/main/java/com/yas/product/controller/CategoryController.java
index 52315511ae..7a2cb4ec49 100644
--- a/product/src/main/java/com/yas/product/controller/CategoryController.java
+++ b/product/src/main/java/com/yas/product/controller/CategoryController.java
@@ -38,7 +38,8 @@ public CategoryController(CategoryRepository categoryRepository, CategoryService
     }
 
     @GetMapping({"/backoffice/categories", "/storefront/categories"})
-    public ResponseEntity<List<CategoryGetVm>> listCategories(@RequestParam(required = false) String categoryName) {
+    public ResponseEntity<List<CategoryGetVm>> listCategories(
+        @RequestParam(required = false, defaultValue = "") String categoryName) {
         return ResponseEntity.ok(categoryService.getCategories(categoryName));
     }
 
diff --git a/promotion/src/main/java/com/yas/promotion/controller/PromotionController.java b/promotion/src/main/java/com/yas/promotion/controller/PromotionController.java
index 8004540364..15ef55796c 100644
--- a/promotion/src/main/java/com/yas/promotion/controller/PromotionController.java
+++ b/promotion/src/main/java/com/yas/promotion/controller/PromotionController.java
@@ -35,14 +35,8 @@ public ResponseEntity<PromotionListVm> listPromotions(
             @RequestParam(defaultValue = "5") int pageSize,
             @RequestParam(defaultValue = "") String promotionName,
             @RequestParam(defaultValue = "") String couponCode,
-            @RequestParam(
-                defaultValue =
-                    "#{T(java.time.Instant).ofEpochSecond(0)}"
-
-            )
-            Instant startDate,
-            @RequestParam(defaultValue = "#{T(java.time.Instant).now()}")
-            Instant endDate
+            @RequestParam(required = false) Instant startDate,
+            @RequestParam(required = false) Instant endDate
     ) {
         return ResponseEntity.ok(promotionService.getPromotions(
             pageNo, pageSize, promotionName, couponCode, startDate, endDate));
@@ -103,4 +97,10 @@ public ResponseEntity<Void> deletePromotion(@PathVariable("promotionId") Long pr
         promotionService.deletePromotion(promotionId);
         return ResponseEntity.ok().build();
     }
+
+    @GetMapping("/backoffice/promotions/{promotionId}")
+    public ResponseEntity<PromotionDetailVm> getPromotion(@PathVariable("promotionId") Long promotionId) {
+        PromotionDetailVm promotionDetailVm = promotionService.getPromotion(promotionId);
+        return new ResponseEntity<>(promotionDetailVm, HttpStatus.OK);
+    }
 }
diff --git a/promotion/src/main/java/com/yas/promotion/repository/PromotionRepository.java b/promotion/src/main/java/com/yas/promotion/repository/PromotionRepository.java
index 0be1b29abe..33c60a814f 100644
--- a/promotion/src/main/java/com/yas/promotion/repository/PromotionRepository.java
+++ b/promotion/src/main/java/com/yas/promotion/repository/PromotionRepository.java
@@ -17,8 +17,8 @@ public interface PromotionRepository extends JpaRepository<Promotion, Long> {
     @Query("SELECT p FROM Promotion p "
             + "WHERE LOWER(p.name) LIKE LOWER(CONCAT('%',:name,'%')) "
             + "AND LOWER(p.couponCode) LIKE LOWER(CONCAT('%',:couponCode,'%')) "
-            + "AND p.startDate BETWEEN :startDate AND :endDate "
-            + "AND p.endDate BETWEEN :startDate AND :endDate")
+            + "AND (cast(:startDate as date) is null or (p.startDate BETWEEN :startDate AND :endDate)) "
+            + "AND (cast(:startDate as date) is null or (p.endDate BETWEEN :startDate AND :endDate))")
     Page<Promotion> findPromotions(@Param("name") String name,
                                    @Param("couponCode") String couponCode,
                                    @Param("startDate") Instant startDate,
diff --git a/promotion/src/main/java/com/yas/promotion/service/PromotionService.java b/promotion/src/main/java/com/yas/promotion/service/PromotionService.java
index 63bea9efc3..8902fb2783 100644
--- a/promotion/src/main/java/com/yas/promotion/service/PromotionService.java
+++ b/promotion/src/main/java/com/yas/promotion/service/PromotionService.java
@@ -35,7 +35,7 @@ public class PromotionService {
 
     public PromotionDetailVm createPromotion(PromotionPostVm promotionPostVm) {
         validateIfPromotionExistedSlug(promotionPostVm.getSlug());
-        validateIfPromotionEndDateIsBeforeStartDate(promotionPostVm.getStartDate(), promotionPostVm.getEndDate());
+        validateIfPromotionEndDateIsBeforeStartDate(promotionPostVm.getStartDate().toInstant(), promotionPostVm.getEndDate().toInstant());
 
         Promotion promotion = Promotion.builder()
                 .name(promotionPostVm.getName())
@@ -49,8 +49,8 @@ public PromotionDetailVm createPromotion(PromotionPostVm promotionPostVm) {
                 .discountPercentage(promotionPostVm.getDiscountPercentage())
                 .discountAmount(promotionPostVm.getDiscountAmount())
                 .isActive(promotionPostVm.isActive())
-                .startDate(promotionPostVm.getStartDate())
-                .endDate(promotionPostVm.getEndDate())
+                .startDate(promotionPostVm.getStartDate().toInstant())
+                .endDate(promotionPostVm.getEndDate().toInstant())
                 .minimumOrderPurchaseAmount(promotionPostVm.getMinimumOrderPurchaseAmount())
                 .build();
 
@@ -81,8 +81,8 @@ public PromotionDetailVm updatePromotion(PromotionPutVm promotionPutVm) {
         promotion.setDiscountPercentage(promotionPutVm.getDiscountPercentage());
         promotion.setDiscountAmount(promotionPutVm.getDiscountAmount());
         promotion.setIsActive(promotionPutVm.isActive());
-        promotion.setStartDate(promotionPutVm.getStartDate());
-        promotion.setEndDate(promotionPutVm.getEndDate());
+        promotion.setStartDate(promotionPutVm.getStartDate().toInstant());
+        promotion.setEndDate(promotionPutVm.getEndDate().toInstant());
         promotion.setMinimumOrderPurchaseAmount(promotionPutVm.getMinimumOrderPurchaseAmount());
 
         promotion.setPromotionApplies(PromotionPutVm.createPromotionApplies(promotionPutVm, promotion));
@@ -166,4 +166,12 @@ public void deletePromotion(Long id) {
         }
         promotionRepository.deleteById(id);
     }
+
+    public PromotionDetailVm getPromotion(Long promotionId) {
+        Optional<Promotion> promotionOp = promotionRepository.findById(promotionId);
+        if (promotionOp.isEmpty()) {
+            throw new NotFoundException(Constants.ErrorCode.PROMOTION_NOT_FOUND_ERROR_MESSAGE, promotionId);
+        }
+        return toPromotionDetail(promotionOp.get());
+    }
 }
diff --git a/promotion/src/main/java/com/yas/promotion/viewmodel/PromotionDto.java b/promotion/src/main/java/com/yas/promotion/viewmodel/PromotionDto.java
index c966735ee6..efbd944ddd 100644
--- a/promotion/src/main/java/com/yas/promotion/viewmodel/PromotionDto.java
+++ b/promotion/src/main/java/com/yas/promotion/viewmodel/PromotionDto.java
@@ -1,5 +1,6 @@
 package com.yas.promotion.viewmodel;
 
+import com.fasterxml.jackson.databind.annotation.JsonDeserialize;
 import com.yas.promotion.model.enumeration.ApplyTo;
 import com.yas.promotion.model.enumeration.DiscountType;
 import com.yas.promotion.model.enumeration.UsageType;
@@ -15,6 +16,7 @@
 @SuperBuilder
 @NoArgsConstructor
 @AllArgsConstructor
+@JsonDeserialize
 public class PromotionDto {
     @NotNull
     private ApplyTo applyTo;
diff --git a/promotion/src/main/java/com/yas/promotion/viewmodel/PromotionPostVm.java b/promotion/src/main/java/com/yas/promotion/viewmodel/PromotionPostVm.java
index 9213f7fd37..c66df9f176 100644
--- a/promotion/src/main/java/com/yas/promotion/viewmodel/PromotionPostVm.java
+++ b/promotion/src/main/java/com/yas/promotion/viewmodel/PromotionPostVm.java
@@ -1,5 +1,7 @@
 package com.yas.promotion.viewmodel;
 
+import com.fasterxml.jackson.annotation.JsonFormat;
+import com.fasterxml.jackson.databind.annotation.JsonDeserialize;
 import com.yas.promotion.model.Promotion;
 import com.yas.promotion.model.PromotionApply;
 import com.yas.promotion.validation.PromotionConstraint;
@@ -7,7 +9,7 @@
 import jakarta.validation.constraints.NotNull;
 import jakarta.validation.constraints.Size;
 import java.time.Instant;
-import java.time.ZonedDateTime;
+import java.util.Date;
 import java.util.List;
 import lombok.AllArgsConstructor;
 import lombok.Data;
@@ -21,6 +23,7 @@
 @Data
 @NoArgsConstructor
 @AllArgsConstructor
+@JsonDeserialize
 public class PromotionPostVm extends PromotionDto {
     @Size(min = 1, max = 450)
     private String name;
@@ -32,8 +35,11 @@ public class PromotionPostVm extends PromotionDto {
     Long minimumOrderPurchaseAmount;
     boolean isActive;
     @NotNull
-    Instant startDate;
-    @NotNull Instant endDate;
+    @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd")
+    Date startDate;
+    @NotNull
+    @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd")
+    Date endDate;
 
     public static List<PromotionApply> createPromotionApplies(PromotionPostVm promotionPostVm, Promotion promotion) {
         return switch (promotion.getApplyTo()) {
diff --git a/promotion/src/main/java/com/yas/promotion/viewmodel/PromotionPutVm.java b/promotion/src/main/java/com/yas/promotion/viewmodel/PromotionPutVm.java
index 4857b364b1..6a13025efa 100644
--- a/promotion/src/main/java/com/yas/promotion/viewmodel/PromotionPutVm.java
+++ b/promotion/src/main/java/com/yas/promotion/viewmodel/PromotionPutVm.java
@@ -9,6 +9,7 @@
 import java.time.Instant;
 import java.time.ZonedDateTime;
 import java.util.ArrayList;
+import java.util.Date;
 import java.util.List;
 import lombok.AllArgsConstructor;
 import lombok.Data;
@@ -35,9 +36,9 @@ public class PromotionPutVm extends PromotionDto {
     private Long minimumOrderPurchaseAmount;
     private boolean isActive;
     @NotNull
-    private Instant startDate;
+    private Date startDate;
     @NotNull
-    private Instant endDate;
+    private Date endDate;
 
     public static List<PromotionApply> createPromotionApplies(PromotionPutVm promotionPutVm, Promotion promotion) {
         return switch (promotion.getApplyTo()) {
diff --git a/promotion/src/test/java/com/yas/promotion/controller/PromotionControllerTest.java b/promotion/src/test/java/com/yas/promotion/controller/PromotionControllerTest.java
index a5e9564596..617e97f380 100644
--- a/promotion/src/test/java/com/yas/promotion/controller/PromotionControllerTest.java
+++ b/promotion/src/test/java/com/yas/promotion/controller/PromotionControllerTest.java
@@ -13,6 +13,7 @@
 import com.yas.promotion.viewmodel.PromotionPostVm;
 import java.time.Instant;
 import java.time.temporal.ChronoUnit;
+import java.util.Date;
 import java.util.List;
 import org.junit.jupiter.api.BeforeEach;
 import org.junit.jupiter.api.Test;
@@ -60,8 +61,8 @@ void testCreatePromotion_whenRequestIsValid_thenReturnOk() throws Exception {
                 .productIds(List.of(1L,2L,3L))
                 .isActive(true)
                 .usageLimit(0)
-                .startDate(Instant.now())
-                .endDate(Instant.now().plus(30, ChronoUnit.DAYS))
+                .startDate(Date.from(Instant.now()))
+                .endDate(Date.from(Instant.now().plus(30, ChronoUnit.DAYS)))
                 .build();
 
         String request = objectWriter.writeValueAsString(promotionPostVm);
@@ -85,8 +86,8 @@ void testCreatePromotion_whenNameIsOverMaxLength_thenReturnBadRequest() throws E
                 .productIds(List.of(1L,2L,3L))
                 .isActive(true)
                 .usageLimit(0)
-                .startDate(Instant.now())
-                .endDate(Instant.now().plus(30, ChronoUnit.DAYS))
+                .startDate(Date.from(Instant.now()))
+                .endDate(Date.from(Instant.now().plus(30, ChronoUnit.DAYS)))
                 .build();
 
         String request = objectWriter.writeValueAsString(promotionPostVm);
@@ -110,8 +111,8 @@ void testCreatePromotion_whenNameIsBlank_thenReturnBadRequest() throws Exception
                 .productIds(List.of(1L,2L,3L))
                 .isActive(true)
                 .usageLimit(0)
-                .startDate(Instant.now())
-                .endDate(Instant.now().plus(30, ChronoUnit.DAYS))
+                .startDate(Date.from(Instant.now()))
+                .endDate(Date.from(Instant.now().plus(30, ChronoUnit.DAYS)))
                 .build();
 
         String request = objectWriter.writeValueAsString(promotionPostVm);
@@ -135,8 +136,8 @@ void testCreatePromotion_whenDiscountAmountIsSmallerThanZero_thenReturnBadReques
             .productIds(List.of(1L,2L,3L))
             .isActive(true)
             .usageLimit(0)
-            .startDate(Instant.now())
-            .endDate(Instant.now().plus(30, ChronoUnit.DAYS))
+            .startDate(Date.from(Instant.now()))
+            .endDate(Date.from(Instant.now().plus(30, ChronoUnit.DAYS)))
             .build();
 
         String request = objectWriter.writeValueAsString(promotionPostVm);
@@ -160,8 +161,8 @@ void testCreatePromotion_whenDiscountPercentageIsSmallerThanZero_thenReturnBadRe
             .productIds(List.of(1L,2L,3L))
             .isActive(true)
             .usageLimit(0)
-            .startDate(Instant.now())
-            .endDate(Instant.now().plus(30, ChronoUnit.DAYS))
+            .startDate(Date.from(Instant.now()))
+            .endDate(Date.from(Instant.now().plus(30, ChronoUnit.DAYS)))
             .build();
 
         String request = objectWriter.writeValueAsString(promotionPostVm);
@@ -185,8 +186,8 @@ void testCreatePromotion_whenDiscountPercentageIsGreaterThanHundred_thenReturnBa
             .productIds(List.of(1L,2L,3L))
             .isActive(true)
             .usageLimit(0)
-            .startDate(Instant.now())
-            .endDate(Instant.now().plus(30, ChronoUnit.DAYS))
+            .startDate(Date.from(Instant.now()))
+            .endDate(Date.from(Instant.now().plus(30, ChronoUnit.DAYS)))
             .build();
 
         String request = objectWriter.writeValueAsString(promotionPostVm);
diff --git a/promotion/src/test/java/com/yas/promotion/service/PromotionServiceTest.java b/promotion/src/test/java/com/yas/promotion/service/PromotionServiceTest.java
index 75578389c2..7f384f8703 100644
--- a/promotion/src/test/java/com/yas/promotion/service/PromotionServiceTest.java
+++ b/promotion/src/test/java/com/yas/promotion/service/PromotionServiceTest.java
@@ -17,6 +17,7 @@
 import com.yas.promotion.viewmodel.PromotionPostVm;
 import java.time.Instant;
 import java.time.temporal.ChronoUnit;
+import java.util.Date;
 import java.util.List;
 import org.junit.jupiter.api.AfterEach;
 import org.junit.jupiter.api.BeforeEach;
@@ -103,8 +104,8 @@ void createPromotion_ThenSuccess() {
                 .discountAmount(300L)
                 .discountPercentage(30L)
                 .isActive(true)
-                .startDate(Instant.now().plus(60, ChronoUnit.DAYS))
-                .endDate(Instant.now().plus(90, ChronoUnit.DAYS))
+                .startDate(Date.from(Instant.now().plus(60, ChronoUnit.DAYS)))
+                .endDate(Date.from(Instant.now().plus(90, ChronoUnit.DAYS)))
                 .applyTo(ApplyTo.PRODUCT)
                 .productIds(List.of(1L, 2L, 3L))
                 .build();
@@ -138,8 +139,8 @@ void createPromotion_WhenEndDateBeforeStartDate_ThenDateRangeExceptionThrown() {
             .name("12345")
             .couponCode("cp-12345")
             .productIds(List.of(1L, 2L, 3L))
-            .endDate(Instant.now().minus(2, ChronoUnit.DAYS))
-            .startDate(Instant.now())
+            .endDate(Date.from(Instant.now().minus(2, ChronoUnit.DAYS)))
+            .startDate(Date.from(Instant.now()))
             .build();
 
         BadRequestException exception = assertThrows(BadRequestException.class, () ->