feat: add extended display on pos ui (#4783)

packages/plugin-pos-ui/src/pos/components/productGroup/posSlotDetail.tsx

@@ -133,7 +133,7 @@ const SlotDetail = ({ handleChange, _id, name, code, handleBack, option }) => {
         <input
           id="isShape"
           type="checkbox"
-          value={isShape || 0}
+          checked={isShape}
           onChange={e => handleChange({ isShape: e.target.checked }, _id)}
         />
         <label htmlFor="isShape">Disabled</label>

packages/plugin-pos-ui/src/pos/components/productGroup/posSlotPlan.tsx

@@ -24,7 +24,8 @@ const PosSlotPlan = ({ slots: savedSlots, onSave, posId }) => {
       rotateAngle,
       borderRadius,
       color,
-      zIndex
+      zIndex,
+      isShape
     } = option || {};
 
     return {
@@ -40,7 +41,8 @@ const PosSlotPlan = ({ slots: savedSlots, onSave, posId }) => {
         rotateAngle: rotateAngle || 0,
         borderRadius: borderRadius || 0,
         color: color || '#6569DF',
-        zIndex: zIndex || 0
+        zIndex: zIndex || 0,
+        isShape
       }
     };
   });

pos/app/(main)/(orders)/components/history/orderDetail.tsx

@@ -19,6 +19,7 @@ import {
   StopCircle,
   StoreIcon,
   TruckIcon,
+  User,
   UserCog,
 } from "lucide-react"
 
@@ -44,9 +45,6 @@ const TypeIcons = {
   take: Luggage,
   delivery: TruckIcon,
 }
-const typeLabel = {
-  eat: "",
-}
 
 const OrderDetail = () => {
   const [detailId, setDetailId] = useAtom(detailIdAtom)
@@ -73,6 +71,7 @@ const OrderDetail = () => {
     paidDate,
     items,
     description,
+    customer,
   } = data?.orderDetail || {}
   const { primaryPhone, primaryEmail, email } = user || {}
 
@@ -144,6 +143,19 @@ const OrderDetail = () => {
               value={`${primaryEmail || email || ""} ${primaryPhone || ""}`}
               Icon={UserCog}
             />
+            {!!customer && (
+              <DescriptionCard
+                title="Харилцагч"
+                value={
+                  customer?.firstName || customer?.lastName
+                    ? `${customer.firstName || ""} ${customer.lastName || ""}`
+                    : `${customer.primaryEmail || customer.email || ""} ${
+                        customer.primaryPhone || ""
+                      }`
+                }
+                Icon={User}
+              />
+            )}
             {!!description && (
               <Card className="col-span-3">
                 <CardHeader className="p-2 pb-1">

pos/app/(main)/extended/components/cart.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import { cartAtom } from "@/store/cart.store"
+import { useAtomValue } from "jotai"
+
+import { formatNum } from "@/lib/utils"
+
+const Components = () => {
+  const cart = useAtomValue(cartAtom)
+  const formatIndex = (index: number) => (index + 1).toString().padStart(2, "0")
+  return (
+    <>
+      <div className="mb-1 flex rounded border-transparent bg-primary p-3 leading-4 text-white font-semibold text-xs text-center">
+        <div className="flex w-6/12 text-left">
+          <span className="w-1/6 pl-2">#</span>
+          <span className="w-5/6 ">Барааны нэр</span>
+        </div>
+        <span className="w-2/12">Тоо ширхэг</span>
+
+        <span className="w-2/12">Үнэ</span>
+        <span className="w-2/12">Нийт үнэ</span>
+      </div>
+      {cart.map((item, index) => (
+        <div
+          key={index}
+          className="mb-1 flex items-center rounded bg-gray-100 px-3 text-xs font-semibold h-8 text-center"
+        >
+          <div className="flex w-6/12 text-left">
+            <span className="w-1/6">{formatIndex(index + 1)}</span>
+            <span className="w-5/6 ">{item.productName}</span>
+          </div>
+          <span className="w-2/12">{item.count}</span>
+          <span className="w-2/12">{formatNum(item.unitPrice)}₮</span>
+          <span className="w-2/12">
+            {formatNum(item.unitPrice * item.count)}₮
+          </span>
+
+        </div>
+      ))}
+    </>
+  )
+}
+
+export default Components

pos/app/(main)/extended/layout.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from "react"
+
+import HeaderLayout from "@/components/header/headerLayout"
+
+const Layout = ({ children }: { children: ReactNode }) => {
+  return (
+    <>
+      <HeaderLayout hideUser>
+        <span className='w-2/3'/>
+      </HeaderLayout>
+      {children}
+    </>
+  )
+}
+
+export default Layout

pos/app/(main)/extended/page.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import { useEffect } from "react"
+import CustomerType from "@/modules/customer/CustomerType"
+import { queries } from "@/modules/orders/graphql"
+import { refetchOrderAtom } from "@/store"
+import { activeOrderIdAtom } from "@/store/order.store"
+import { useQuery } from "@apollo/client"
+import { useAtom, useAtomValue } from "jotai"
+import { CheckCircle2Icon } from "lucide-react"
+
+import { IPaidAmount } from "@/types/order.types"
+import { getCustomerLabel } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+
+import Cart from "./components/cart"
+
+const Extended = () => {
+  const _id = useAtomValue(activeOrderIdAtom)
+  const [refetchOrder, setRefetchOrder] = useAtom(refetchOrderAtom)
+  const { data, loading, refetch } = useQuery(queries.orderDetail, {
+    variables: {
+      _id,
+    },
+  })
+
+  useEffect(() => {
+    if (refetchOrder) {
+      refetch()
+      setRefetchOrder(false)
+    }
+  }, [refetch, refetchOrder, setRefetchOrder])
+
+  if (loading) return null
+
+  const { paidAmounts, mobileAmount, cashAmount, customer } = data?.orderDetail
+
+  return (
+    <div className="flex flex-auto items-stretch overflow-hidden px-5">
+      <div
+        className="relative flex h-full w-2/3 flex-col overflow-hidden py-4 pr-4
+      "
+      >
+        <Cart />
+      </div>
+      <div className="flex w-1/3 flex-col border-l p-4 pr-0 relative">
+        <div className="flex items-center gap-1 relative">
+          <CustomerType className="h-5 w-5" />
+          <Input
+            value={getCustomerLabel(customer || {})}
+            placeholder="Хэрэглэгч сонгох"
+          />
+        </div>
+        <div className="mt-2 flex flex-auto flex-col pt-2">
+          <div className="flex-auto">
+            <Label className="block pb-2">Төлбөрийн төрөл:</Label>
+            {cashAmount > 0 && (
+              <div className="flex flex-auto gap-2 pb-2">
+                <div className="w-1/2">
+                  <Input value="Бэлнээр" />
+                </div>
+                <div className="w-1/2">
+                  <Input value={cashAmount.toLocaleString()} />
+                </div>
+              </div>
+            )}
+            {mobileAmount > 0 && (
+              <div className="flex flex-auto gap-2 pb-2">
+                <div className="w-1/2">
+                  <Input value="Бэлнээр" />
+                </div>
+                <div className="w-1/2">
+                  <Input value={mobileAmount.toLocaleString()} />
+                </div>
+              </div>
+            )}
+            {paidAmounts.map((el: IPaidAmount) => (
+              <div className="flex flex-auto gap-2 pb-2" key={el._id}>
+                <div className="w-1/2">
+                  <Input value={el.type} />
+                </div>
+                <div className="w-1/2">
+                  <Input value={(el.amount || "").toLocaleString()} />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      <Dialog open={false}>
+        <DialogContent>
+          <div className="flex flex-col items-center py-14 gap-5">
+            <CheckCircle2Icon
+              className="h-20 w-20 text-green-500 animate-bounce "
+              strokeWidth={1.5}
+            />
+            <p className="text-center text-base font-medium">
+              Төлбөр амжилттай төлөгдлөө
+            </p>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
+export default Extended

pos/app/reciept/components/Amount.tsx

@@ -7,17 +7,17 @@ import {
   orderTotalAmountAtom,
   paidAmountsAtom,
 } from "@/store/order.store"
-import { useAtom } from "jotai"
+import { useAtomValue } from "jotai"
 
 import { cn, formatNum, getSumsOfAmount } from "@/lib/utils"
 
 const Amount = () => {
-  const [cash] = useAtom(cashAmountAtom)
-  const [mobile] = useAtom(mobileAmountAtom)
-  const [total] = useAtom(orderTotalAmountAtom)
-  const [items] = useAtom(cartAtom)
-  const [config] = useAtom(ebarimtConfigAtom)
-  const [paidAmounts] = useAtom(paidAmountsAtom)
+  const cash = useAtomValue(cashAmountAtom)
+  const mobile = useAtomValue(mobileAmountAtom)
+  const total = useAtomValue(orderTotalAmountAtom)
+  const items = useAtomValue(cartAtom)
+  const config = useAtomValue(ebarimtConfigAtom)
+  const paidAmounts = useAtomValue(paidAmountsAtom)
   const { paymentTypes } = config || {}
 
   const discountAmounts = useCallback(() => {

pos/app/reciept/components/Ebarimt.tsx

@@ -37,9 +37,9 @@ const Ebarimt = ({
         {Number(cityTax) > 0 && <p>НXАТ: {formatNum(Number(cityTax))}</p>}
         <p>Дүн: {formatNum(amount || 0)}</p>
         {!type && (
-          <p>
-            Сугалаа: <p className="font-semibold">{lottery}</p>
-          </p>
+          <div>
+            Сугалаа: <div className="font-semibold">{lottery}</div>
+          </div>
         )}
       </>
     )

pos/app/reciept/ebarimt/page.tsx

@@ -44,7 +44,7 @@ const Reciept = () => {
   useEffect(() => {
     if (data) {
       const { orderDetail } = data
-      if (orderDetail._id === _id) {
+      if (orderDetail?._id === _id) {
         setOrderStates(orderDetail)
         data.billType === BILL_TYPES.INNER && setType("inner")
         setTimeout(() => window.print(), 50)

pos/components/header/headerLayout.market.tsx

@@ -6,18 +6,28 @@ import HeaderMenu from "@/components/headerMenu"
 
 import Logo from "./logo"
 
-const HeaderLayout = ({ children }: { children?: React.ReactNode }) => {
+const HeaderLayout = ({
+  children,
+  hideUser,
+}: {
+  children?: React.ReactNode
+  hideUser?: boolean
+}) => {
   const [currentUser] = useAtom(currentUserAtom)
   const { details, email } = currentUser || {}
   const { fullName, position } = details || {}
 
   return (
     <header className="flex flex-none items-center border-b px-5 py-1.5 print:hidden">
-      <div className="w-full pr-2 sm:w-2/3 sm:pr-4">{children}</div>
-      <div className="flex w-auto items-center  sm:w-1/3">
-        <p className="hidden flex-auto text-center text-black/60 sm:block">
-          {fullName ? `${fullName} ${position ? `(${position})` : ""}` : email}
-        </p>
+      <div className="pr-2 w-2/3 sm:pr-4">{children}</div>
+      <div className="flex w-auto items-center justify-end  sm:w-1/3">
+        {!hideUser && (
+          <p className="hidden flex-auto text-center text-black/60 sm:block">
+            {fullName
+              ? `${fullName} ${position ? `(${position})` : ""}`
+              : email}
+          </p>
+        )}
         <ActiveOrders />
         <Logo />
         <HeaderMenu />

pos/components/ui/image.tsx

@@ -74,6 +74,4 @@ export function cloudflareLoader({ src, width, quality }: ImageLoaderProps) {
   return `https://erxes.io/cdn-cgi/image/${params.join(",")}/${src}`
 }
 
-//xos.techstore.mn/gateway/read-file?key=0.021508049013006180.51531201349981501.png
-
 export default Image

pos/lib/utils.ts

@@ -2,6 +2,7 @@ import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
 
 import { IEbarimtConfig, IPaymentType } from "@/types/config.types"
+import { Customer } from "@/types/customer.types"
 import { ALL_BANK_CARD_TYPES } from "@/lib/constants"
 
 import { IPaidAmount } from "../types/order.types"
@@ -207,3 +208,9 @@ export const parseBase64 = (str: string) => {
   const json = Buffer.from(str, "base64").toString()
   return JSON.parse(json)
 }
+
+export const getCustomerLabel = ({
+  firstName,
+  lastName,
+  primaryPhone,
+}: Customer) => `${firstName || ""} ${lastName || ""} ${primaryPhone || ""}`

pos/modules/checkout/components/cart/cart-header.market.tsx

@@ -0,0 +1,17 @@
+const CartHeader = () => {
+  return (
+    <div className="mb-1 flex rounded border-transparent bg-primary px-3.5 py-3 text-sm leading-4 text-white">
+      <div className="flex w-5/12">
+        <small className="w-1/12">#</small>
+        <small className="w-11/12">Барааны нэр</small>
+      </div>
+      <small className="w-3/12">Тоо ширхэг</small>
+      <small className="flex w-4/12">
+        <span className="w-6/12">Бар код</span>
+        <span className="w-5/12">Үнэ</span>
+      </small>
+    </div>
+  )
+}
+
+export default CartHeader

pos/modules/checkout/components/cart/cart.market.tsx

@@ -1,12 +1,12 @@
 import { cartAtom } from "@/store/cart.store"
-import { useAtom } from "jotai"
+import { useAtomValue } from "jotai"
 
 import { ScrollArea } from "@/components/ui/scroll-area"
 
 import CartItem from "../cartItem/cartItem.market"
 
 const Cart = () => {
-  const [cart] = useAtom(cartAtom)
+  const cart = useAtomValue(cartAtom)
   return (
     <>
       <div className="mb-1 flex rounded border-transparent bg-primary px-3.5 py-3 text-sm leading-4 text-white">