sme-pos-package 1.0.13 → 1.0.15

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

@@ -1,98 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,286 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,177 +0,0 @@
-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>
-  );
-};