From e988fd645d7cd2ce40dc87393498e9e9b2708bce Mon Sep 17 00:00:00 2001 From: Ben White Date: Mon, 25 Dec 2023 22:58:29 +1300 Subject: [PATCH] mod: reformat many files + minor refactor - pending larger one --- src/atoms/kiosk.ts | 15 +++- .../kiosk/children/order/cartActionHeader.tsx | 4 +- .../kiosk/children/order/cartMenu.tsx | 5 +- .../kiosk/children/order/cartProductsList.tsx | 12 ++- .../order/completed/completedOrderMenu.tsx | 60 +++++++------- .../order/completed/individualProduct.tsx | 32 +++---- .../order/individual/childPerProduct.tsx | 10 +-- .../order/individual/productDiscount.tsx | 47 +++++++---- .../order/individual/promotionLabel.tsx | 2 + .../children/order/ordersPriceSummary.tsx | 23 ++--- .../kiosk/children/order/transactionMenu.tsx | 1 - .../kiosk/children/promotion/promotion.ts | 33 ++++++++ .../children/promotion/promotionList.tsx | 32 +------ .../groupers/searchResultsCustomers.tsx | 38 --------- .../search/groupers/searchResultsProducts.tsx | 31 ------- .../groupers/searchResultsTransaction.tsx | 30 ------- .../kiosk/children/search/grouping/search.ts | 25 ++++++ .../search/grouping/searchResultCategory.tsx | 36 ++++++++ .../children/search/results/itemCustomer.tsx | 20 ++--- .../children/search/results/itemProduct.tsx | 7 +- .../search/results/itemTransaction.tsx | 60 ++++++++------ .../kiosk/children/search/searchGroup.tsx | 83 ++++++++++++++----- 22 files changed, 325 insertions(+), 281 deletions(-) create mode 100644 src/components/kiosk/children/promotion/promotion.ts delete mode 100644 src/components/kiosk/children/search/groupers/searchResultsCustomers.tsx delete mode 100644 src/components/kiosk/children/search/groupers/searchResultsProducts.tsx delete mode 100644 src/components/kiosk/children/search/groupers/searchResultsTransaction.tsx create mode 100644 src/components/kiosk/children/search/grouping/search.ts create mode 100644 src/components/kiosk/children/search/grouping/searchResultCategory.tsx diff --git a/src/atoms/kiosk.ts b/src/atoms/kiosk.ts index 9922f73..3734984 100644 --- a/src/atoms/kiosk.ts +++ b/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 } diff --git a/src/components/kiosk/children/order/cartActionHeader.tsx b/src/components/kiosk/children/order/cartActionHeader.tsx index 9c7ff07..0807882 100644 --- a/src/components/kiosk/children/order/cartActionHeader.tsx +++ b/src/components/kiosk/children/order/cartActionHeader.tsx @@ -31,8 +31,10 @@ export function CartActionHeader() { :
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" + >

Select Customer

+ diff --git a/src/components/kiosk/children/order/cartMenu.tsx b/src/components/kiosk/children/order/cartMenu.tsx index 1f526ff..bc69371 100644 --- a/src/components/kiosk/children/order/cartMenu.tsx +++ b/src/components/kiosk/children/order/cartMenu.tsx @@ -5,7 +5,10 @@ import { CartProductsList } from "./cartProductsList"; export default function CartMenu() { return ( -
+
{/* Order Information */} diff --git a/src/components/kiosk/children/order/cartProductsList.tsx b/src/components/kiosk/children/order/cartProductsList.tsx index c5e8575..3172823 100644 --- a/src/components/kiosk/children/order/cartProductsList.tsx +++ b/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 (
{ - (orderState.reduce((p, c) => p + c.products.reduce((prev, curr) => { return prev + curr.quantity }, 0), 0) ?? 0) <= 0 ? + productQuantity <= 0 ? (

No products in cart

- : - + ) : }
) diff --git a/src/components/kiosk/children/order/completed/completedOrderMenu.tsx b/src/components/kiosk/children/order/completed/completedOrderMenu.tsx index 83774e4..3c632f4 100644 --- a/src/components/kiosk/children/order/completed/completedOrderMenu.tsx +++ b/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 ( -
+

{customerState?.name ?? "Guest"}

${kioskState.order_total}

@@ -31,32 +28,39 @@ export function CompletedOrderMenu() {
- { - orderState.map((product) => ) - } + {orderState.map((product) => + + )}
- { - kioskState.transaction_type != "Quote" ? + {Boolean(kioskState.transaction_type != "Quote") && ( <>

PAYMENT(S)

{ kioskState.payment.map(e => { return ( -
-

{typeof e.payment_method !== "string" ? e.payment_method.Other : e.payment_method}

+
+

+ { + typeof e.payment_method !== "string" + ? e.payment_method.Other + : e.payment_method + } +

+
-

${e.amount?.quantity.toFixed(2)}

+

${e.amount.quantity.toFixed(2)}

) }) }
- : - <> - } + )}
@@ -83,16 +87,10 @@ export function CompletedOrderMenu() {
{ - resetKiosk() - resetOrder() - resetCustomer() - - resetKioskPanel() - resetKioskPanelHistory() - }} - className="bg-blue-700 cursor-pointer w-full rounded-md p-4 flex items-center justify-center"> -

Complete

+ onClick={resetKiosk} + className="bg-blue-700 cursor-pointer w-full rounded-md p-4 flex items-center justify-center" + > +

Complete

diff --git a/src/components/kiosk/children/order/completed/individualProduct.tsx b/src/components/kiosk/children/order/completed/individualProduct.tsx index 6c49233..41c6928 100644 --- a/src/components/kiosk/children/order/completed/individualProduct.tsx +++ b/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, customerActive: boolean }) { +export function IndividualProduct({ + productAtom, + customerActive +}: { productAtom: PrimitiveAtom, customerActive: boolean }) { const order = useAtomValue(productAtom) return (
- { - order.products?.map(e => { - return ( -
-

{e.quantity}

+ {order.products?.map(e => ( +
+

{e.quantity}

-
-

{e.product.name}

-

{e.variant_information.name}

-
+
+

{e.product.name}

+

{e.variant_information.name}

+
-

${applyDiscount(e.variant_information.retail_price * 1.15, findMaxDiscount(e.discount, e.variant_information.retail_price, customerActive)[0].value)?.toFixed(2)}

-
- ) - }) - } +

+ ${applyDiscount(e.variant_information.retail_price * 1.15, findMaxDiscount(e.discount, e.variant_information.retail_price, customerActive)[0].value)?.toFixed(2)} +

+
+ ) + )}
) } \ No newline at end of file diff --git a/src/components/kiosk/children/order/individual/childPerProduct.tsx b/src/components/kiosk/children/order/individual/childPerProduct.tsx index f29e22b..2668d2b 100644 --- a/src/components/kiosk/children/order/individual/childPerProduct.tsx +++ b/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 ( - - ) - }) - } + {currentOrder.products.map((product) => + + )} ) } diff --git a/src/components/kiosk/children/order/individual/productDiscount.tsx b/src/components/kiosk/children/order/individual/productDiscount.tsx index f802f49..cb67787 100644 --- a/src/components/kiosk/children/order/individual/productDiscount.tsx +++ b/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 (
{ - 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} >
) diff --git a/src/components/kiosk/children/order/individual/promotionLabel.tsx b/src/components/kiosk/children/order/individual/promotionLabel.tsx index 4e04037..df42a3b 100644 --- a/src/components/kiosk/children/order/individual/promotionLabel.tsx +++ b/src/components/kiosk/children/order/individual/promotionLabel.tsx @@ -11,7 +11,9 @@ export function PromotionLabel({ currentOrder }: PromotionLabelProps) { return (
$
+
+

{parseDiscount(currentOrder.discount)}

off this cart

diff --git a/src/components/kiosk/children/order/ordersPriceSummary.tsx b/src/components/kiosk/children/order/ordersPriceSummary.tsx index f394517..6e8b021 100644 --- a/src/components/kiosk/children/order/ordersPriceSummary.tsx +++ b/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 (
@@ -15,18 +24,12 @@ export function OrdersPriceSummary() {

- ${(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}

-

+15% (${(orderInfo?.tax ?? 0).toFixed(2)})

-

${(orderInfo?.total ?? 0).toFixed(2)}

+

+15% (${orderInfo.tax.toFixed(2)})

+

${orderInfo.total.toFixed(2)}

) diff --git a/src/components/kiosk/children/order/transactionMenu.tsx b/src/components/kiosk/children/order/transactionMenu.tsx index 7ce43fe..7baf0a6 100644 --- a/src/components/kiosk/children/order/transactionMenu.tsx +++ b/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) diff --git a/src/components/kiosk/children/promotion/promotion.ts b/src/components/kiosk/children/promotion/promotion.ts new file mode 100644 index 0000000..82df2dc --- /dev/null +++ b/src/components/kiosk/children/promotion/promotion.ts @@ -0,0 +1,33 @@ +import {Promotion} from "@/generated/stock/Api"; +import {fromDbDiscount, parseDiscount} from "@utils/discountHelpers"; + +function formatPromotion(promo: Promotion) { + if(promo.get.type === "solothis") { + return `${promo.name} - Get ${parseDiscount(fromDbDiscount(promo.get.value)) + " off."}` + } + + let val = "Buy "; + + if(promo.buy.type === "any") { + val += promo.buy.value + }else { + val += ((promo.buy.value?.[1] ?? "") + (promo.buy.value?.[0] ?? "")) + } + + val += " get " + + if(promo.get.type === "this") { + val += "another " + promo.get.value[0] + ", " + parseDiscount(fromDbDiscount(promo.get.value[1])) + }else if(promo.get.type === "specific") { + val = promo.name; + // val += ((promo.get.Specific?.[1] ?? "") + (promo.get.Specific?.[0] ?? "")) + }else if(promo.get.type === "any") { + val += " any " + promo.get.value[0] + ", " + parseDiscount(fromDbDiscount(promo.get.value[1])) + " off." + }else if(promo.get.type === "category") { + val += " any " + + promo.get.value[1][0] +" other " + promo.get.value[0] + ", " + parseDiscount(fromDbDiscount(promo.get.value[1][1])) + " off." + } + + return val +} + +export { formatPromotion } \ No newline at end of file diff --git a/src/components/kiosk/children/promotion/promotionList.tsx b/src/components/kiosk/children/promotion/promotionList.tsx index 3136826..6ce6f11 100644 --- a/src/components/kiosk/children/promotion/promotionList.tsx +++ b/src/components/kiosk/children/promotion/promotionList.tsx @@ -1,6 +1,7 @@ -import { fromDbDiscount, parseDiscount } from "@utils/discountHelpers"; import moment from "moment"; + import {Promotion} from "@/generated/stock/Api"; +import {formatPromotion} from "@components/kiosk/children/promotion/promotion"; interface PromotionListProps { promotions: Promotion[] | undefined @@ -28,32 +29,3 @@ export default function PromotionList({ promotions }: PromotionListProps) {
) } - -function formatPromotion(promo: Promotion) { - if(promo.get.type === "solothis") { - return `${promo.name} - Get ${parseDiscount(fromDbDiscount(promo.get.value)) + " off."}` - } - - let val = "Buy "; - - if(promo.buy.type === "any") { - val += promo.buy.value - }else { - val += ((promo.buy.value?.[1] ?? "") + (promo.buy.value?.[0] ?? "")) - } - - val += " get " - - if(promo.get.type === "this") { - val += "another " + promo.get.value[0] + ", " + parseDiscount(fromDbDiscount(promo.get.value[1])) - }else if(promo.get.type === "specific") { - val = promo.name; - // val += ((promo.get.Specific?.[1] ?? "") + (promo.get.Specific?.[0] ?? "")) - }else if(promo.get.type === "any") { - val += " any " + promo.get.value[0] + ", " + parseDiscount(fromDbDiscount(promo.get.value[1])) + " off." - }else if(promo.get.type === "category") { - val += " any " + + promo.get.value[1][0] +" other " + promo.get.value[0] + ", " + parseDiscount(fromDbDiscount(promo.get.value[1][1])) + " off." - } - - return val -} \ No newline at end of file diff --git a/src/components/kiosk/children/search/groupers/searchResultsCustomers.tsx b/src/components/kiosk/children/search/groupers/searchResultsCustomers.tsx deleted file mode 100644 index 017b3be..0000000 --- a/src/components/kiosk/children/search/groupers/searchResultsCustomers.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { useAtomValue, useSetAtom } from "jotai"; - -import { searchResultsAtomic } from "@atoms/search"; -import { kioskPanelLogAtom } from "@atoms/kiosk"; -import { ItemCustomer } from "../results/itemCustomer"; -import {Customer} from "@/generated/stock/Api"; - -export function SearchResultsCustomers() { - const searchResults = useAtomValue(searchResultsAtomic) - - const setKioskPanel = useSetAtom(kioskPanelLogAtom) - - if (!searchResults || searchResults.length == 0) { - return ( - <> -

No customers with this name

-

{ - setKioskPanel("customer-create") - }} - className="self-center text-white pb-6 cursor-pointer">Create customer

- - ) - } - - return ( - <> - { - (searchResults as Customer[]) - .map((result, index) => { - return result.id ? ( - - ) : (<>) - }) - } - - ) -} \ No newline at end of file diff --git a/src/components/kiosk/children/search/groupers/searchResultsProducts.tsx b/src/components/kiosk/children/search/groupers/searchResultsProducts.tsx deleted file mode 100644 index cccacbf..0000000 --- a/src/components/kiosk/children/search/groupers/searchResultsProducts.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { useAtomValue } from "jotai"; - -import { searchResultsAtomic } from "@atoms/search"; -import { ItemProduct } from "../results/itemProduct"; -import {Product, Promotion} from "@/generated/stock/Api"; - -export function SearchResultsProducts() { - const searchResults = useAtomValue(searchResultsAtomic) - - if (searchResults.length == 0) { - return

No products with this name

- } - - return ( - <> - { - (searchResults as { product: Product, promotions: Promotion[]}[]) - .map((result, index) => { - return result.product ? ( - - ) : (<>) - }) - } - - ) -} \ No newline at end of file diff --git a/src/components/kiosk/children/search/groupers/searchResultsTransaction.tsx b/src/components/kiosk/children/search/groupers/searchResultsTransaction.tsx deleted file mode 100644 index de06822..0000000 --- a/src/components/kiosk/children/search/groupers/searchResultsTransaction.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { useAtomValue } from "jotai"; - -import { searchResultsAtomic } from "@atoms/search"; -import { ItemTransaction } from "../results/itemTransaction"; -import {Transaction} from "@/generated/stock/Api"; - -export function SearchResultsTransaction() { - const searchResults = useAtomValue(searchResultsAtomic) - - if (searchResults.length == 0) { - return

No transactions with this reference

- } - - return ( - <> - { - (searchResults as Transaction[]) - .map((result, index) => { - return result.id ? ( - - ) : (<>) - }) - } - - ) -} \ No newline at end of file diff --git a/src/components/kiosk/children/search/grouping/search.ts b/src/components/kiosk/children/search/grouping/search.ts new file mode 100644 index 0000000..23da272 --- /dev/null +++ b/src/components/kiosk/children/search/grouping/search.ts @@ -0,0 +1,25 @@ +import {CustomerWithTransactionsOut, ProductWPromotion, Transaction} from "@/generated/stock/Api"; + +export type CustomerSearch = { + type: "customers", + results: CustomerWithTransactionsOut[] +} + +export type ProductSearch = { + type: "products", + results: ProductWPromotion[] +} + +export type TransactionSearch = { + type: "transactions", + results: Transaction[] +} + +export type ItemUnion = CustomerWithTransactionsOut | ProductWPromotion | Transaction +export type SearchUnion = CustomerSearch | ProductSearch | TransactionSearch + +export function hashSearch(value: SearchUnion) { + if (value.type === "products") return value.results.map(value => value.product.sku) + return value.results.map(value => value.id) +} + diff --git a/src/components/kiosk/children/search/grouping/searchResultCategory.tsx b/src/components/kiosk/children/search/grouping/searchResultCategory.tsx new file mode 100644 index 0000000..3850aa4 --- /dev/null +++ b/src/components/kiosk/children/search/grouping/searchResultCategory.tsx @@ -0,0 +1,36 @@ +import {useMemo} from "react"; +import {hashSearch, ItemUnion, SearchUnion} from "@components/kiosk/children/search/grouping/search"; + +type SearchResultCategoryProps = { + value: SearchUnion, + nullComponent: JSX.Element, + itemComponent: ({ value, index, searchLength }: { value: ItemUnion, index: number, searchLength: number }) => JSX.Element, +} + +export function SearchResultCategory({ + value, + nullComponent, + itemComponent: ItemComponent +}: SearchResultCategoryProps) { + const hashedSearch = useMemo(() => { + return hashSearch(value) + }, [value]) + + console.log(value) + + if (value.results.length === 0) return nullComponent + else return ( + <> + { + value.results.map((item: ItemUnion, index) => + + ) + } + + ) +} diff --git a/src/components/kiosk/children/search/results/itemCustomer.tsx b/src/components/kiosk/children/search/results/itemCustomer.tsx index 79ac0c4..a6d272a 100644 --- a/src/components/kiosk/children/search/results/itemCustomer.tsx +++ b/src/components/kiosk/children/search/results/itemCustomer.tsx @@ -7,11 +7,11 @@ import { useResetAtom } from "jotai/utils" import {CustomerWithTransactionsOut} from "@/generated/stock/Api"; interface ItemCustomerProps { - customer: CustomerWithTransactionsOut + value: CustomerWithTransactionsOut index: number } -export function ItemCustomer({ customer, index }: ItemCustomerProps) { +export function ItemCustomer({ value, index }: ItemCustomerProps) { const clearSearchResults = useResetAtom(searchResultsAtom) const searchResults = useAtomValue(searchResultsAtomic) @@ -27,12 +27,12 @@ export function ItemCustomer({ customer, index }: ItemCustomerProps) { return (
{ if((v.target as any).id !== "assign-to-cart") { setSearchFocused(false); - setInspectingCustomer(customer); + setInspectingCustomer(value); setInspectingProduct((previousProduct) => ({ ...previousProduct, activeProduct: null @@ -42,8 +42,8 @@ export function ItemCustomer({ customer, index }: ItemCustomerProps) { >
= 640 ? "150px 1fr 250px" : `1fr 100px` }}>
-

{customer.name}

-

{(customer?.transactions?.split(",")?.length ?? 0) > 0 ? customer?.transactions?.split(",")?.length : "No"} Past Order{customer?.transactions?.split(",")?.length != 1 ? "s" : ""}

+

{value.name}

+

{(value?.transactions?.split(",")?.length ?? 0) > 0 ? value?.transactions?.split(",")?.length : "No"} Past Order{value?.transactions?.split(",")?.length != 1 ? "s" : ""}

{ @@ -53,17 +53,17 @@ export function ItemCustomer({ customer, index }: ItemCustomerProps) {

{ (() => { - const k = customer.contact.mobile.number.match(/^(\d{3})(\d{3})(\d{4})$/); + const k = value.contact.mobile.number.match(/^(\d{3})(\d{3})(\d{4})$/); if(!k) return "" return `${k[1]} ${k[2]} ${k[3]}` })() }

-

{customer.contact.email.full}

+

{value.contact.email.full}

}
-

${customer.balance} Credit

+

${value.balance} Credit

{ @@ -73,7 +73,7 @@ export function ItemCustomer({ customer, index }: ItemCustomerProps) { setSearchFocused(false); setSearchType("products"); - setCustomerState(customer) + setCustomerState(value) }} id="assign-to-cart" className="whitespace-nowrap justify-self-end pr-4 py-3" diff --git a/src/components/kiosk/children/search/results/itemProduct.tsx b/src/components/kiosk/children/search/results/itemProduct.tsx index db92d40..fd40e4c 100644 --- a/src/components/kiosk/children/search/results/itemProduct.tsx +++ b/src/components/kiosk/children/search/results/itemProduct.tsx @@ -5,16 +5,15 @@ import { searchFocusedAtom, searchResultsAtomic } from "@/src/atoms/search"; import { useWindowSize } from "@/src/hooks/useWindowSize"; import { useAtomValue, useSetAtom } from "jotai"; import Image from "next/image"; -import {Product, Promotion} from "@/generated/stock/Api"; +import {Product, ProductWPromotion, Promotion} from "@/generated/stock/Api"; import {StrictVariantCategory} from "@utils/stockTypes"; interface ItemProductProps { - product: Product, - promotions: Promotion[] + value: ProductWPromotion index: number } -export function ItemProduct({ product, promotions, index }: ItemProductProps) { +export function ItemProduct({ value: { product, promotions }, index }: ItemProductProps) { const searchResults = useAtomValue(searchResultsAtomic) const currentStore = useAtomValue(masterStateAtom) diff --git a/src/components/kiosk/children/search/results/itemTransaction.tsx b/src/components/kiosk/children/search/results/itemTransaction.tsx index d8c0233..7595c28 100644 --- a/src/components/kiosk/children/search/results/itemTransaction.tsx +++ b/src/components/kiosk/children/search/results/itemTransaction.tsx @@ -11,37 +11,45 @@ import {Customer, Store, Transaction} from "@/generated/stock/Api"; import {openStockClient} from "~/query/client"; interface ItemTransactionProps { - transaction: Transaction, - notEnd: boolean + value: Transaction, + index: number, + searchLength: number, } -export function ItemTransaction({ transaction, notEnd }: ItemTransactionProps) { +const WHITE_FILTER = "invert(100%) sepia(100%) saturate(0%) hue-rotate(299deg) brightness(102%) contrast(102%)" + +export function ItemTransaction({ value, index, searchLength }: ItemTransactionProps) { const searchTermState = useAtomValue(searchTermAtom) const setKioskPanel = useSetAtom(kioskPanelLogAtom) const setInspectingTransaction = useSetAtom(inspectingTransactionAtom) + const reachedEnd = useMemo(() => + !(index == searchLength-1 || searchLength == 1), + [searchLength, index] + ) + const filteredOrders = useMemo(() => - transaction.products.filter( + value.products.filter( k => k.reference .toLowerCase() .includes(searchTermState.toLowerCase()) ), - [searchTermState, transaction.products] + [searchTermState, value.products] ); const [ customer, setCustomer ] = useState(); const windowSize = useWindowSize(); useEffect(() => { - if(transaction.customer.customer_type != "Store") { - openStockClient.customer.get(transaction.customer.customer_id) + if(value.customer.customer_type != "Store") { + openStockClient.customer.get(value.customer.customer_id) .then(data => data.ok && setCustomer(data.data)) }else { - openStockClient.store.getByCode(transaction.customer.customer_id) + openStockClient.store.getByCode(value.customer.customer_id) .then(data => data.ok && setCustomer(data.data)) } - }, [transaction]); + }, [value]); if(!filteredOrders) return (<>); @@ -53,7 +61,7 @@ export function ItemTransaction({ transaction, notEnd }: ItemTransactionProps) { key={b.id} onClick={() => { setKioskPanel("inv-transaction") - setInspectingTransaction({ item: transaction, identifier: b.id }); + setInspectingTransaction({ item: value, identifier: b.id }); }} className="flex flex-col overflow-hidden h-fit" > @@ -61,43 +69,41 @@ export function ItemTransaction({ transaction, notEnd }: ItemTransactionProps) {

{ b.order_type == "pickup" ? - + : b.order_type == "quote" ? - + : b.order_type == "shipment" ? - + : - + } - - {/*

{b.order_type}

*/}

{b.reference}

{moment(b.creation_date).format("DD/MM/YY hh:ss")}

- {/*

{e.order_history.length} Past Orders

*/}
-
- {/* {JSON.stringify(customer)} */} - {customer?.name} -
+
{customer?.name}
{b.products.map(k => k.product_name).join(", ")}
-
- ${transaction.order_total.toFixed(2)} -
+
${value.order_total.toFixed(2)}
- { - notEnd ? <> :
- } + {Boolean(reachedEnd) &&
}
) } diff --git a/src/components/kiosk/children/search/searchGroup.tsx b/src/components/kiosk/children/search/searchGroup.tsx index befa7de..7980516 100644 --- a/src/components/kiosk/children/search/searchGroup.tsx +++ b/src/components/kiosk/children/search/searchGroup.tsx @@ -1,34 +1,71 @@ -import { useAtomValue } from "jotai" +import { useAtomValue, useSetAtom } from "jotai" +import {useMemo} from "react"; -import { searchTypeHandlerAtom } from "@/src/atoms/search" +import {searchResultsAtomic, searchTypeHandlerAtom} from "@/src/atoms/search" +import {kioskPanelLogAtom} from "@atoms/kiosk"; -import { SearchResultsCustomers } from "./groupers/searchResultsCustomers" -import { SearchResultsProducts } from "./groupers/searchResultsProducts" -import { SearchResultsTransaction } from "./groupers/searchResultsTransaction" +import {SearchResultCategory} from "@components/kiosk/children/search/grouping/searchResultCategory"; +import {SearchUnion} from "@components/kiosk/children/search/grouping/search"; + +import {ItemCustomer} from "@components/kiosk/children/search/results/itemCustomer"; +import {ItemProduct} from "@components/kiosk/children/search/results/itemProduct"; +import {ItemTransaction} from "@components/kiosk/children/search/results/itemTransaction"; export function SearchGroup() { const searchType = useAtomValue(searchTypeHandlerAtom) + const searchResult = useAtomValue(searchResultsAtomic) + + const setKioskPanel = useSetAtom(kioskPanelLogAtom) + + // @ts-expect-error Typescript Generic Operands Suck + const searchValues: SearchUnion = useMemo(() => ({ + type: searchType, + results: searchResult + }), [searchResult, searchType]) + + const nullComponent = useMemo(() => { + switch(searchType) { + case "customers": + return ( +
+

No customers with this name

+

{ + setKioskPanel("customer-create") + }} + className="self-center text-white pb-6 cursor-pointer">Create customer

+
+ ) + case "products": + return ( +

No products with this name

+ ) + case "transactions": + return ( +

No transactions with this reference

+ ) + } + }, [searchType, setKioskPanel]) + + const itemComponent = useMemo(() => { + switch (searchType) { + case "customers": + return ItemCustomer + case "products": + return ItemProduct + case "transactions": + return ItemTransaction + } + }, [searchType]) return (
- { - (() => { - switch(searchType) { - case "products": - return - case "customers": - return - case "transactions": - return - default: - return ( -
- A problem has occurred. -
- ) - } - })() - } +
) } \ No newline at end of file