mod: reformat many files + minor refactor - pending larger one

src/atoms/kiosk.ts

@@ -1,4 +1,4 @@
-import {atomWithReset, RESET} from "jotai/utils";
+import {atomWithReset, RESET, useResetAtom} from "jotai/utils";
 import {customAlphabet} from "nanoid";
 import {atom} from "jotai";
 import {v4} from "uuid";
@@ -263,6 +263,18 @@ const addToCartAtom = atom(undefined, (get, set, orderProducts: ContextualProduc
     return new_order_products_state
 })
 
+const resetAllAtom = atom(
+    undefined,
+    (get, set) => {
+        set(defaultKioskAtom, RESET)
+        set(currentOrderAtom, RESET)
+        set(customerAtom, RESET)
+
+        set(kioskPanelAtom, RESET)
+        set(kioskPanelHistory, RESET)
+    }
+)
+
 export { 
     currentOrderAtom,
     addToCartAtom,
@@ -275,6 +287,7 @@ export {
     kioskPanelHistory, 
     selectionAtom, 
     perfAtom,
+    resetAllAtom,
     activeDiscountAtom 
 }
 

src/components/kiosk/children/order/cartActionHeader.tsx

@@ -31,8 +31,10 @@ export function CartActionHeader() {
                     :
                     <div 
                         onClick={() => setSearchType("customers")}
-                        className="bg-gray-800 rounded-md px-2 py-[0.125rem] flex flex-row items-center gap-2 cursor-pointer">
+                        className="bg-gray-800 rounded-md px-2 py-[0.125rem] flex flex-row items-center gap-2 cursor-pointer"
+                    >
                         <p>Select Customer</p>
+
                         <Image 
                             className=""
                             height={15} width={15} src="/icons/arrow-narrow-right.svg" alt="" style={{ filter: "invert(100%) sepia(5%) saturate(7417%) hue-rotate(235deg) brightness(118%) contrast(101%)" }}></Image>

src/components/kiosk/children/order/cartMenu.tsx

@@ -5,7 +5,10 @@ import { CartProductsList } from "./cartProductsList";
 
 export default function CartMenu() {
     return (
-        <div className="bg-gray-900 p-6 flex flex-col h-full overflow-y-auto overflow-x-hidden" style={{ maxWidth: "min(550px, 100vw)", minWidth: "min(100vw, 550px)" }}>
+        <div
+            className="bg-gray-900 p-6 flex flex-col h-full overflow-y-auto overflow-x-hidden"
+            style={{ maxWidth: "min(550px, 100vw)", minWidth: "min(100vw, 550px)" }}
+        >
             <div className="flex flex-col gap-4 flex-1 max-h-full">
                 {/* Order Information */}
                 <CartActionHeader />  

src/components/kiosk/children/order/cartProductsList.tsx

@@ -3,19 +3,25 @@ import { useAtomValue } from "jotai"
 import { ordersAtom } from "@atoms/transaction"
 
 import { ChildPerOrder } from "./childPerOrder"
+import {useMemo} from "react";
 
 export function CartProductsList() {
     const orderState= useAtomValue(ordersAtom)
 
+    const productQuantity = useMemo(() => {
+        return orderState.reduce((p, c) =>
+            p + c.products.reduce((prev, curr) => prev + curr.quantity, 0),
+        0)
+    }, [orderState])
+
     return (
         <div className="flex flex-col flex-1 h-full gap-4 overflow-auto max-h-full py-2">
             {
-                (orderState.reduce((p, c) => p + c.products.reduce((prev, curr) => { return prev + curr.quantity }, 0), 0) ?? 0) <= 0 ?
+                productQuantity <= 0 ? (
                     <div className="flex flex-col items-center w-full">
                         <p className="text-sm text-gray-400 py-4 select-none">No products in cart</p>
                     </div>
-                :
-                <ChildPerOrder />
+                ) : <ChildPerOrder />
             }
         </div>
     )

src/components/kiosk/children/order/completed/completedOrderMenu.tsx

@@ -1,7 +1,6 @@
-import { useResetAtom } from "jotai/utils"
-import { useAtomValue } from "jotai"
+import {useAtomValue, useSetAtom} from "jotai"
 
-import { currentOrderAtom, defaultKioskAtom, kioskPanelAtom, kioskPanelHistory } from "@atoms/kiosk"
+import {defaultKioskAtom, resetAllAtom} from "@atoms/kiosk"
 import { aCustomerActiveAtom, customerAtom } from "@atoms/customer"
 import { ordersAtomsAtom } from "@atoms/transaction"
 
@@ -14,15 +13,13 @@ export function CompletedOrderMenu() {
     const kioskState = useAtomValue(defaultKioskAtom)
     const orderState = useAtomValue(ordersAtomsAtom)
 
-    const resetKiosk = useResetAtom(defaultKioskAtom)
-    const resetOrder = useResetAtom(currentOrderAtom)
-    const resetCustomer = useResetAtom(customerAtom)
-
-    const resetKioskPanel = useResetAtom(kioskPanelAtom)
-    const resetKioskPanelHistory = useResetAtom(kioskPanelHistory)
+    const resetKiosk = useSetAtom(resetAllAtom)
 
     return (
-        <div className="bg-gray-900 p-6 flex flex-col h-full gap-4" style={{ maxWidth: "min(550px, 100vw)", minWidth: "min(100vw, 550px)" }}>
+        <div
+            className="bg-gray-900 p-6 flex flex-col h-full gap-4"
+            style={{ maxWidth: "min(550px, 100vw)", minWidth: "min(100vw, 550px)"
+        }}>
             <div>
                 <p className="text-gray-600">{customerState?.name ?? "Guest"}</p>
                 <p className="text-white font-bold text-2xl">${kioskState.order_total}</p>
@@ -31,32 +28,39 @@ export function CompletedOrderMenu() {
             </div>
 
             <div className="flex flex-col flex-1 gap-2">
-                {
-                    orderState.map((product) => <IndividualProduct key={product.toString()} productAtom={product} customerActive={customerActive} />)
-                }
+                {orderState.map((product) =>
+                    <IndividualProduct key={product.toString()} productAtom={product} customerActive={customerActive} />
+                )}
             </div>
 
-            {
-                kioskState.transaction_type != "Quote" ?
+            {Boolean(kioskState.transaction_type != "Quote") && (
                 <>
                     <p className="text-gray-600">PAYMENT(S)</p>
                     <div className="flex flex-col gap-2 w-full">
                         {
                             kioskState.payment.map(e => {
                                 return (
-                                    <div key={`${e.amount}-${e.fulfillment_date}-${e.payment_method}`} className="flex flex-row justify-between items-center text-white gap-4 w-full flex-1">
-                                        <p className="text-gray-300 font-bold">{typeof e.payment_method !== "string" ? e.payment_method.Other : e.payment_method}</p>
+                                    <div
+                                        key={`${e.amount}-${e.fulfillment_date}-${e.payment_method}`}
+                                        className="flex flex-row justify-between items-center text-white gap-4 w-full flex-1"
+                                    >
+                                        <p className="text-gray-300 font-bold">
+                                            {
+                                                typeof e.payment_method !== "string"
+                                                    ? e.payment_method.Other
+                                                    : e.payment_method
+                                            }
+                                        </p>
+
                                         <hr className="flex-1 border-gray-500 h-[3px] border-[2px] bg-gray-500 rounded-md" />
-                                        <p>${e.amount?.quantity.toFixed(2)}</p>
+                                        <p>${e.amount.quantity.toFixed(2)}</p>
                                     </div>
                                 )
                             })
                         }
                     </div>
                 </>
-                :
-                <></>
-            }
+            )}
 
             <br />
 
@@ -83,16 +87,10 @@ export function CompletedOrderMenu() {
 
             <div className="flex flex-row items-center gap-4">
                 <div
-                    onClick={() => {
-                        resetKiosk()
-                        resetOrder()
-                        resetCustomer()
-
-                        resetKioskPanel()
-                        resetKioskPanelHistory()
-                    }} 
-                    className="bg-blue-700 cursor-pointer w-full rounded-md p-4 flex items-center justify-center">
-                    <p className={`text-white font-semibold ${""}`}>Complete</p>
+                    onClick={resetKiosk}
+                    className="bg-blue-700 cursor-pointer w-full rounded-md p-4 flex items-center justify-center"
+                >
+                    <p className="text-white font-semibold">Complete</p>
                 </div>
             </div>
         </div>

src/components/kiosk/children/order/completed/individualProduct.tsx

@@ -3,27 +3,29 @@ import { PrimitiveAtom, useAtomValue } from "jotai"
 import { applyDiscount, findMaxDiscount } from "@utils/discountHelpers"
 import { ContextualOrder } from "@utils/stockTypes"
 
-export function IndividualProduct({ productAtom, customerActive }: { productAtom: PrimitiveAtom<ContextualOrder>, customerActive: boolean }) {
+export function IndividualProduct({
+    productAtom,
+    customerActive
+}: { productAtom: PrimitiveAtom<ContextualOrder>, customerActive: boolean }) {
     const order = useAtomValue(productAtom)
 
     return (
         <div>
-            {
-                order.products?.map(e => {
-                    return (
-                        <div key={`PRD${e.product_code}-${e.id}`} className="flex flex-row items-center gap-8">
-                            <p className="text-white font-bold">{e.quantity}</p>
+            {order.products?.map(e => (
+                <div key={`PRD${e.product_code}-${e.id}`} className="flex flex-row items-center gap-8">
+                    <p className="text-white font-bold">{e.quantity}</p>
 
-                            <div className="flex flex-col gap-0 flex-1">
-                                <p className="text-white">{e.product.name}</p>
-                                <p className="text-gray-600">{e.variant_information.name}</p>
-                            </div>
+                    <div className="flex flex-col gap-0 flex-1">
+                        <p className="text-white">{e.product.name}</p>
+                        <p className="text-gray-600">{e.variant_information.name}</p>
+                    </div>
 
-                            <p className="text-white font-bold">${applyDiscount(e.variant_information.retail_price * 1.15, findMaxDiscount(e.discount, e.variant_information.retail_price, customerActive)[0].value)?.toFixed(2)}</p>
-                        </div>
-                    )
-                })
-            }
+                    <p className="text-white font-bold">
+                        ${applyDiscount(e.variant_information.retail_price * 1.15, findMaxDiscount(e.discount, e.variant_information.retail_price, customerActive)[0].value)?.toFixed(2)}
+                    </p>
+                </div>
+                )
+            )}
         </div>
     )
 }

src/components/kiosk/children/order/individual/childPerProduct.tsx

@@ -9,13 +9,9 @@ interface ChildPerProductProps {
 export function ChildPerProduct({ currentOrder }: ChildPerProductProps) {
     return (
         <>
-            {
-                currentOrder.products.map((product) => {
-                    return (
-                        <ProductElement key={product.id} product={product} currentOrder={currentOrder} />
-                    )
-                })
-            }
+            {currentOrder.products.map((product) =>
+                <ProductElement key={product.id} product={product} currentOrder={currentOrder} />
+            )}
         </>
     )
 }

src/components/kiosk/children/order/individual/productDiscount.tsx

@@ -3,36 +3,47 @@ import { findMaxDiscount, stringValueToObj } from "@/src/utils/discountHelpers";
 import { useSetAtom } from "jotai";
 import Image from "next/image";
 import {ContextualProductPurchase} from "@utils/stockTypes";
+import {useCallback} from "react";
 
 interface ProductDiscountProps {
     product: ContextualProductPurchase
 }
 
+const GRAY_FILTER = "invert(59%) sepia(9%) saturate(495%) hue-rotate(175deg) brightness(93%) contrast(95%)"
+const WHITE_FILTER = "invert(94%) sepia(0%) saturate(24%) hue-rotate(45deg) brightness(105%) contrast(105%)"
+
 export function ProductDiscount({ product }: ProductDiscountProps) {
     const setKioskPanel = useSetAtom(kioskPanelLogAtom)
     const setDiscount = useSetAtom(activeDiscountAtom)
 
+    const discountClicked = useCallback(() => {
+        setKioskPanel("discount")
+        setDiscount({
+            ...stringValueToObj(findMaxDiscount(product.discount, product.product_cost, false)[0].value),
+            product: product.variant_information,
+            for: "product",
+            exclusive: false,
+            orderId: "",
+            source: "user"
+        })
+    }, [])
+
     return (
         <div className="flex flex-row items-center gap-2">
             <Image
-                onClick={() => {
-                    setKioskPanel("discount")
-                    setDiscount({
-                        ...stringValueToObj(findMaxDiscount(product.discount, product.product_cost, false)[0].value),
-                        product: product.variant_information,
-                        for: "product",
-                        exclusive: false,
-                        orderId: "",
-                        source: "user"
-                    })
-                }}
-                style={{ filter: "invert(59%) sepia(9%) saturate(495%) hue-rotate(175deg) brightness(93%) contrast(95%)" }} height={20} width={20} alt="Discount" className="select-none rounded-sm hover:cursor-pointer" src="/icons/sale-03.svg" 
-                onMouseOver={(e) => {
-                    e.currentTarget.style.filter = "invert(94%) sepia(0%) saturate(24%) hue-rotate(45deg) brightness(105%) contrast(105%)";
-                }}
-                onMouseLeave={(e) => {
-                    e.currentTarget.style.filter = "invert(59%) sepia(9%) saturate(495%) hue-rotate(175deg) brightness(93%) contrast(95%)";
-                }}
+                className="select-none rounded-sm hover:cursor-pointer"
+                style={{ filter: GRAY_FILTER }}
+
+                onClick={discountClicked}
+
+                height={20}
+                width={20}
+
+                alt="Discount"
+                src="/icons/sale-03.svg"
+
+                onMouseOver={(e) => e.currentTarget.style.filter = WHITE_FILTER}
+                onMouseLeave={(e) => e.currentTarget.style.filter = GRAY_FILTER}
             ></Image>
         </div>
     )

src/components/kiosk/children/order/individual/promotionLabel.tsx

@@ -11,7 +11,9 @@ export function PromotionLabel({ currentOrder }: PromotionLabelProps) {
     return (
         <div className="flex flex-row items-center gap-1">
             <div className="bg-blue-600 h-5 w-5 rounded-full flex items-center justify-center text-xs text-white">$</div>
+
             <div></div>
+
             <p className="text-white font-bold">{parseDiscount(currentOrder.discount)}</p>
             <p className="text-white">off this cart</p>
         </div>

src/components/kiosk/children/order/ordersPriceSummary.tsx

@@ -1,10 +1,19 @@
 import { useAtomValue } from "jotai"
 
 import { priceAtom } from "@atoms/payment"
+import {useMemo} from "react";
 
 export function OrdersPriceSummary() {
     const orderInfo = useAtomValue(priceAtom)
 
+    const totalSummary = useMemo(() => {
+        if (orderInfo.sub_total !== orderInfo.non_discounted_sub_total) {
+            return `(-$${(orderInfo.non_discounted_sub_total - orderInfo.sub_total).toFixed(2)})`
+        }
+
+        return "-"
+    }, [orderInfo.non_discounted_sub_total, orderInfo.sub_total])
+
     return (
         <div className="flex flex-row items-center text-white justify-between px-2">
             <div>
@@ -15,18 +24,12 @@ export function OrdersPriceSummary() {
 
             <div className="flex flex-col gap-0">
                 <p className="text-gray-400 font-bold items-end self-end">
-                    ${(orderInfo?.sub_total ?? 0).toFixed(2)} 
-                    {
-                        orderInfo?.sub_total == orderInfo?.non_discounted_sub_total
-                        ?
-                        <></>
-                        :
-                        ` (-$${((orderInfo?.non_discounted_sub_total ?? 0) - (orderInfo?.sub_total ?? 0)).toFixed(2)})`
-                    }
+                    ${orderInfo?.sub_total.toFixed(2)}
+                    {totalSummary}
                 </p>
 
-                <p className="text-gray-600 font-bold items-end self-end">+15% (${(orderInfo?.tax ?? 0).toFixed(2)})</p>
-                <p className="font-bold text-lg items-end self-end">${(orderInfo?.total ?? 0).toFixed(2)}</p>
+                <p className="text-gray-600 font-bold items-end self-end">+15% (${orderInfo.tax.toFixed(2)})</p>
+                <p className="font-bold text-lg items-end self-end">${orderInfo.total.toFixed(2)}</p>
             </div>
         </div>
     )

src/components/kiosk/children/order/transactionMenu.tsx

@@ -19,7 +19,6 @@ import {ContextualOrder, ContextualProductPurchase} from "@utils/stockTypes";
 export default function TransactionMenu() {
     const transaction = useAtomValue(inspectingTransactionAtom)
 
-    const addToCart = useSetAtom(addToCartAtom)
     const setPerfState = useSetAtom(perfAtom)
     const setKioskPanel = useSetAtom(kioskPanelLogAtom)
     const setKioskState = useSetAtom(defaultKioskAtom)