sme-pos-package 1.0.7 → 1.0.9

package/src/components/common/tabs-layout.tsx

@@ -0,0 +1,98 @@
+import { IcRefresh } from "@assets/icons/breadcrumbs-icon";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { cn } from "@utils/functions";
+import { useEffect, useState } from "react";
+import { ButtonIcon } from "./button-icon";
+
+export type TTab = {
+  id: number | string;
+  name: string;
+};
+
+export const TabsLayout = ({
+  tabs,
+  onClick,
+  queryKey,
+  className,
+  activeValue,
+  rightButton,
+  alwaysShowButton,
+}: {
+  tabs: TTab[];
+  queryKey: string;
+  activeValue?: number | string;
+  onClick?: (e: any) => void;
+  className?: string;
+  rightButton?: React.ReactNode;
+  alwaysShowButton?: React.ReactNode;
+}) => {
+  const { getQuery, updateQuery } = useQueryParams();
+  const activeId = activeValue ?? getQuery(queryKey);
+
+  useEffect(() => {
+    const activeEl = document.getElementById(`${queryKey}${activeId}`);
+    if (activeEl) {
+      activeEl.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      });
+    }
+  }, [tabs]);
+
+  return (
+    <div
+      className={cn(
+        "flex justify-between items-center bg-white h-[60px] px-3 gap-2 w-full",
+        className
+      )}
+    >
+      <div className="flex overflow-x-auto flex-1 relative hide-scrollbar">
+        {tabs?.map((tab) => (
+          <div
+            key={tab.id}
+            onClick={() => {
+              !activeValue && updateQuery(queryKey, tab.id.toString());
+              onClick && onClick(tab);
+            }}
+            className={`cursor-pointer px-4 h-12 max-h-12 flex items-center transition-colors min-w-fit rounded-lg  ${
+              activeId === tab.id.toString()
+                ? "bg-surface-primary text-text-active font-semibold"
+                : "font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
+            }`}
+            id={`${queryKey}${tab.id}`}
+          >
+            {tab.name}
+          </div>
+        ))}
+      </div>
+      <div className="flex gap-2 items-center">
+        {tabs?.length > 0 && rightButton} {alwaysShowButton}
+      </div>
+    </div>
+  );
+};
+
+export const RefreshButton = ({ onRefresh }: { onRefresh: () => void }) => {
+  const [isRefresh, setIsRefresh] = useState(false);
+
+  setTimeout(() => {
+    if (isRefresh) {
+      setIsRefresh(false);
+    }
+  }, 3000);
+
+  return (
+    <ButtonIcon
+      onClick={() => {
+        setIsRefresh(true);
+        onRefresh();
+      }}
+      iconSrc={
+        <div className={`${isRefresh ? "spin" : ""}`}>
+          <IcRefresh />
+        </div>
+      }
+    />
+  );
+};

package/src/components/common/use-check-session.tsx

@@ -0,0 +1,19 @@
+import { LoadDataModel, useSale } from "@provider/pos-provider/sale-provider";
+
+const useCheckSession = () => {
+  const { getData } = useSale();
+
+  const onCheckSession = async () => {
+    const currentPos = getData(LoadDataModel.POS_CONFIG)?.[0];
+
+    const isSessionOpened = currentPos.pos_session_state === "opened";
+
+    return isSessionOpened;
+  };
+
+  return {
+    onCheckSession,
+  };
+};
+
+export default useCheckSession;

package/src/components/customer-management/add-customer/add-customer-drawer.tsx

@@ -0,0 +1,286 @@
+import ButtonAction from "@components/common/button-action";
+import Input from "@components/common/input";
+import RadioGroup from "@components/common/input/radio-group";
+import ModalDirection from "@components/common/modal/modal-direction";
+import { zodResolver } from "@hookform/resolvers/zod";
+import useGetQuery from "@hooks/common/use-get-query";
+import { useCustomer } from "@provider/pos-provider/customer-provider";
+import { useOrder } from "@provider/pos-provider/order-provider";
+import { useSale } from "@provider/pos-provider/sale-provider";
+import { useCustomerStore } from "@store/states/customer.state";
+import { TCustomerPayload, TUpdateCustomerPayload } from "@type/customer";
+import { filterObject, normalizeObject } from "@utils/functions";
+import { useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { toast } from "react-toastify";
+import z from "zod";
+import AddressSelect, { TOption } from "./address-select";
+
+type TProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+const schema = z.object({
+  phone: z.string().min(1, "Số điện thoại là bắt buộc"),
+  name: z.string().min(1, "Tên khách hàng là bắt buộc"),
+  email: z.string(),
+  title: z.string().optional(),
+  street2: z.string().optional(),
+  birth_date: z.string().optional(),
+});
+
+export const AddCustomerDrawer = (props: TProps) => {
+  const { isOpen, onClose } = props;
+  const [isCreating, setIsCreating] = useState(false);
+  const [citySelected, setCitySelected] = useState<TOption>();
+  const [wardSelected, setWardSelected] = useState<TOption>();
+
+  const { t } = useTranslation();
+  const { createCustomer, updateCustomer } = useCustomer();
+  const { updateOrder } = useOrder();
+  const { queryResult } = useSale();
+  const { orderId } = useGetQuery();
+  const {
+    isEditMode,
+    customer: customerData,
+    setCustomer,
+    setIsEditMode,
+  } = useCustomerStore();
+  const { cities, setStateId, stateId, wards, partnerTitles } = useCustomer();
+  const customer = normalizeObject(customerData);
+
+  const cityMatched = useMemo(() => {
+    if (!customer?.state_id) return undefined;
+
+    return cities.find((city: any) => city.id === Number(customer?.state_id));
+  }, [cities, customer]);
+
+  const wardMatched = useMemo(() => {
+    if (!customer?.ward_id) return undefined;
+
+    return wards.find((ward: any) => ward.id === Number(customer?.ward_id));
+  }, [wards, customer]);
+
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+    setError,
+    reset,
+  } = useForm({
+    mode: "onChange",
+    resolver: zodResolver(schema),
+  });
+
+  const clearData = () => {
+    setCitySelected(undefined);
+    setWardSelected(undefined);
+    setError("name", { message: "" });
+    setError("phone", { message: "" });
+    reset({
+      name: "",
+      email: "",
+      phone: "",
+      title: "",
+      street2: "",
+      birth_date: "",
+    });
+    setIsEditMode(false);
+    setCustomer(null);
+    setStateId("");
+  };
+
+  const onSubmit = handleSubmit(async (data) => {
+    try {
+      setIsCreating(true);
+
+      const payload = filterObject({
+        name: data.name,
+        phone: data.phone,
+        email: data.email,
+        country_id: 241,
+        birth_date: data.birth_date,
+        state_id: Number(stateId),
+        ward_id: Number(wardSelected?.id),
+        street2: data.street2,
+        title: Number(data.title),
+      });
+
+      if (isEditMode) {
+        await updateCustomer.mutateAsync({
+          ...payload,
+          id: Number(customer?.id),
+        } as TUpdateCustomerPayload);
+      } else {
+        const customerId = await createCustomer({
+          payload: payload as TCustomerPayload,
+        });
+
+        await updateOrder.mutateAsync({
+          orderId: Number(orderId),
+          partnerId: customerId,
+        });
+      }
+
+      await Promise.all([queryResult.refetch()]);
+
+      clearData();
+      onClose();
+
+      if (isEditMode) {
+        toast.success(t("updateCustomerSuccess"));
+      } else {
+        toast.success(t("addCustomerSuccess"));
+      }
+    } catch (error: any) {
+      toast.error(error?.message);
+    } finally {
+      setIsCreating(false);
+    }
+  });
+
+  useEffect(() => {
+    if (!isOpen) {
+      clearData();
+      return;
+    }
+
+    if (isEditMode && customer) {
+      reset({
+        name: customer.name,
+        phone: customer.phone,
+        email: typeof customer.email === "string" ? customer.email : "",
+        title: String(customer.title),
+        birth_date: customer.birth_date,
+        street2: customer.street2,
+      });
+      setStateId(String(customer.state_id));
+      setCitySelected({
+        id: Number(customer.state_id),
+        name: cityMatched?.name,
+      });
+      setWardSelected({
+        id: Number(customer.ward_id),
+        name: wardMatched?.name,
+      });
+    } else {
+      clearData();
+    }
+  }, [isOpen, wardMatched]);
+
+  return (
+    <ModalDirection
+      isOpen={isOpen}
+      onClose={onClose}
+      direction="right"
+      className="max-w-md bg-white font-medium"
+      title="Thông tin khách hàng"
+    >
+      <form onSubmit={onSubmit} className="flex flex-col h-full">
+        <div className="flex-1 overflow-y-auto pr-2 flex flex-col gap-4">
+          <Input
+            title="Họ và tên"
+            register={register("name")}
+            placeholder="Nhập họ và tên"
+            isRequired
+            name="name"
+            errorMessage={errors.name?.message}
+            inputClassName="p-3"
+          />
+
+          <Input
+            title="Số điện thoại"
+            register={register("phone")}
+            name="phone"
+            isRequired
+            placeholder="Nhập số điện thoại"
+            errorMessage={errors.phone?.message}
+            inputClassName="p-3"
+          />
+
+          <Input
+            title="Email"
+            register={register("email")}
+            placeholder="Nhập email"
+            name="email"
+            errorMessage={errors.email?.message}
+            inputClassName="p-3"
+          />
+
+          <Input
+            title="Ngày sinh"
+            register={register("birth_date")}
+            placeholder="ngày/tháng/năm"
+            name="birth_date"
+            errorMessage={errors.birth_date?.message}
+            inputClassName="p-3"
+            type="date"
+          />
+
+          <RadioGroup
+            title="Giới tính"
+            name="title"
+            register={register("title")}
+            options={partnerTitles}
+            errorMessage={errors.title?.message as string}
+            direction="row"
+          />
+
+          <p className="font-semibold text-text-primary leading-6 tracking-[-0.24px]">
+            Địa chỉ
+          </p>
+
+          <AddressSelect
+            label="Tỉnh/Thành phố"
+            options={cities}
+            onSelect={(opt) => {
+              setCitySelected(opt);
+              setStateId(opt.id.toString());
+            }}
+            selectedValue={citySelected}
+            placeholder="Nhập tình/thành phố"
+          />
+
+          {stateId && (
+            <AddressSelect
+              label="Phường/xã"
+              options={wards}
+              onSelect={(opt) => setWardSelected(opt)}
+              selectedValue={wardSelected}
+              placeholder="Nhập phường/xã"
+            />
+          )}
+
+          <Input
+            title="Địa chỉ cụ thể"
+            register={register("street2")}
+            placeholder="Nhập địa chỉ cụ thể"
+            name="address"
+            errorMessage={errors.street2?.message}
+            inputClassName="p-3"
+          />
+        </div>
+
+        <div className="flex items-center gap-2 pt-3">
+          <ButtonAction
+            onClick={onClose}
+            text={t("cancel")}
+            className="border border-stroke-disabled flex-1"
+          />
+
+          <ButtonAction
+            type="submit"
+            disabled={isCreating}
+            className="flex-1 min-w-fit button-primary button disabled:bg-primary/50"
+          >
+            <p className="text-sm font-medium leading-5 tracking-[-0.12px] text-text-btn">
+              {isEditMode ? "Cập nhật" : "Lưu"}
+            </p>
+          </ButtonAction>
+        </div>
+      </form>
+    </ModalDirection>
+  );
+};

package/src/components/customer-management/add-customer/address-select.tsx

@@ -0,0 +1,51 @@
+import DropdownSelector from "@components/common/dropdown";
+
+export type TOption = {
+  id: number;
+  name: string;
+};
+
+type TProps = {
+  label: string;
+  options: TOption[];
+  onSelect: (value: TOption) => void;
+  selectedValue: TOption | undefined;
+  placeholder?: string;
+};
+
+const AddressSelect = ({
+  label,
+  options,
+  onSelect,
+  selectedValue,
+  placeholder,
+}: TProps) => {
+  return (
+    <div className="flex flex-col gap-[6px]">
+      <p className="text-sm font-medium text-text-primary leading-5 tracking-[-0.12px]">
+        {label}
+      </p>
+
+      <DropdownSelector<TOption>
+        options={options}
+        selectedValue={{
+          label: selectedValue?.name,
+        }}
+        onSelect={onSelect}
+        renderItem={(item) => {
+          return (
+            <div className="px-3 py-2 text-sm hover:bg-gray-50">
+              {item?.name}
+            </div>
+          );
+        }}
+        className="w-full"
+        buttonClassName="text-sm font-medium text-text-primary leading-5 tracking-[-0.12px] p-3"
+        dropdownClassName="w-full top-[calc(100%_+_4px)] flex flex-col gap-1 !max-h-[200px] overflow-y-auto !min-h-[200px]"
+        placeholder={placeholder}
+      />
+    </div>
+  );
+};
+
+export default AddressSelect;

package/src/components/customer-management/choose-customer-drawer.tsx

@@ -0,0 +1,177 @@
+import { IcSearch } from "@assets/icons/breadcrumbs-icon";
+import { IcMore } from "@assets/icons/common";
+import { IcCustomer, IcUserPlus } from "@assets/icons/user-icon";
+import ModalDirection from "@components/common/modal/modal-direction";
+import { useOrder } from "@provider/pos-provider/order-provider";
+import { LoadDataModel, useSale } from "@provider/pos-provider/sale-provider";
+import { useCustomerStore } from "@store/states/customer.state";
+import { TCustomer } from "@type/customer";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useDebounce } from "use-debounce";
+import CustomerNoData from "./customer-no-data";
+
+type TProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onOpenAddCustomerModal: () => void;
+};
+
+export const ChooseCustomerDrawer = (props: TProps) => {
+  const { isOpen, onClose, onOpenAddCustomerModal } = props;
+  const { t } = useTranslation();
+  const { getData } = useSale();
+  const { onUpdateCustomer } = useOrder();
+  const [customerPhoneNumber, setCustomerPhoneNumber] = useState<string>("");
+  const [customerSearchValue] = useDebounce(customerPhoneNumber, 700);
+
+  const customers = getData(LoadDataModel.RES_PARTNER) as TCustomer[];
+  const [filteredCustomers, setFilteredCustomers] = useState<TCustomer[]>(
+    customers || []
+  );
+
+  const handleCustomerSelect = (customer: TCustomer) => {
+    onUpdateCustomer({
+      customer,
+      onSuccess: () => {
+        setCustomerPhoneNumber("");
+        onClose();
+      },
+    });
+  };
+
+  const onSearch = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCustomerPhoneNumber(e.target.value);
+  };
+
+  const handleClose = () => {
+    setCustomerPhoneNumber("");
+    onClose();
+  };
+
+  useEffect(() => {
+    if (!customers || !customers.length) return;
+
+    const lower = customerSearchValue.toLowerCase();
+
+    const filteredCustomers = customers?.filter((customer) => {
+      return (
+        customer.phone?.toString()?.includes(lower) ||
+        customer.name?.toString()?.toLowerCase()?.includes(lower)
+      );
+    });
+
+    setFilteredCustomers(filteredCustomers || []);
+  }, [customerSearchValue, customers]);
+
+  return (
+    <>
+      <ModalDirection
+        isOpen={isOpen}
+        onClose={handleClose}
+        direction="right"
+        title={t("choose_customer")}
+      >
+        <div className="flex flex-col h-full gap-6">
+          <div className="flex items-center justify-center gap-3">
+            <div
+              style={{
+                boxShadow: "0 16px 32px -12px rgba(88, 92, 95, 0.10);",
+              }}
+              className="flex w-full border h-11 border-stroke-default rounded-lg items-center gap-2 p-2"
+            >
+              <IcSearch />
+
+              <input
+                value={customerPhoneNumber}
+                onChange={(e) => onSearch(e)}
+                placeholder={t("search...")}
+                className="outline-none flex-1 text-sm leading-5 tracking-[-0.12px] text-text-primary placeholder:text-tertiary"
+              />
+            </div>
+
+            <button
+              onClick={onOpenAddCustomerModal}
+              className="h-11 px-3 py-2 bg-primary text-text-btn rounded-lg flex items-center justify-center gap-2"
+            >
+              <IcUserPlus />
+              <span className="text-sm font-medium leading-5 tracking-[-0.12px]">
+                {t("add")}
+              </span>
+            </button>
+          </div>
+
+          <div className="flex-1 overflow-y-auto space-y-3 pr-2">
+            {filteredCustomers && filteredCustomers.length > 0 ? (
+              filteredCustomers.map((customer: TCustomer) => (
+                <CustomerItem
+                  key={customer.id}
+                  customer={customer}
+                  onCustomerSelect={handleCustomerSelect}
+                  onOpenAddCustomerModal={onOpenAddCustomerModal}
+                />
+              ))
+            ) : customerPhoneNumber !== "" ? (
+              <CustomerNoData />
+            ) : (
+              <></>
+            )}
+          </div>
+        </div>
+      </ModalDirection>
+    </>
+  );
+};
+
+const CustomerItem = ({
+  customer,
+  onCustomerSelect,
+  onOpenAddCustomerModal,
+}: {
+  customer: TCustomer;
+  onCustomerSelect: (customer: TCustomer) => void;
+  onOpenAddCustomerModal: () => void;
+}) => {
+  const { setCustomer, setIsEditMode } = useCustomerStore();
+
+  const onEditCustomer = () => {
+    onOpenAddCustomerModal();
+    setCustomer(customer);
+    setIsEditMode(true);
+  };
+
+  return (
+    <div
+      key={customer.id}
+      onClick={() => onCustomerSelect(customer)}
+      className="flex items-center justify-between gap-3 py-4 px-3 hover:bg-gray-50 border-stroke-default rounded-lg cursor-pointer border"
+    >
+      <div className="flex items-center space-x-3">
+        <div className="p-[10px] bg-brand-50 rounded-full flex items-center justify-center">
+          <IcCustomer />
+        </div>
+        <div className="flex flex-col gap-[2px]">
+          <p className="text-sm font-semibold leading-5 text-text-primary tracking-[-0.12px]">
+            {customer.name}
+          </p>
+          <p className="text-xs leading-4 text-text-secondary">
+            {customer.phone}
+          </p>
+          <p className="text-xs leading-4 text-text-secondary">
+            {customer.email}
+          </p>
+        </div>
+      </div>
+
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          onEditCustomer();
+        }}
+        className="p-2 px-4 hover:bg-gray-200 rounded"
+      >
+        <IcMore />
+      </button>
+    </div>
+  );
+};