product categories/localisations

voucherifyio · Apr 12, 2024 · 1879a96 · 1879a96
1 parent 99ecbd9
commit 1879a96
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 49 deletions.
diff --git a/composable-ui/src/components/pos/products-list.tsx b/composable-ui/src/components/pos/products-list.tsx
@@ -1,4 +1,4 @@
-import { Box, Heading, SimpleGrid, Stack } from '@chakra-ui/react'
+import { Box, Flex, Heading, SimpleGrid, Stack } from '@chakra-ui/react'
 import Image from 'next/image'
 import products from '@composable/commerce-generic/src/data/products.json'
 import {
@@ -8,47 +8,90 @@ import {
   CardFooter,
   Text,
   Divider,
+  Select,
 } from '@chakra-ui/react'
 import { useGetProductList } from 'hooks/use-get-products'
 import { ProductListResponse } from '@composable/types'
+import { ChangeEvent, ChangeEventHandler, useEffect, useState } from 'react'
 
 export interface ProductsProps {
   onClick?: (product: ProductListResponse) => unknown
 }
 
 export const ProductsList = ({ onClick }: ProductsProps) => {
   const { productsList, status } = useGetProductList()
+  const [productsCategory, setProductsCategory] = useState('All')
+
+  const productCategories = [
+    ...new Set(productsList?.map((product) => product.metadata?.category)),
+  ]
+
+  const handleOnChange = (e: ChangeEvent<HTMLSelectElement>) =>
+    setProductsCategory(e.target.value)
+
+  const productsByCategory = (productCategory: string) => {
+    if (productCategory === 'All') {
+      return productsList
+    }
+    return productsList?.filter(
+      (product) => product.metadata?.category === productCategory
+    )
+  }
 
   return (
-    <SimpleGrid minChildWidth="120px" spacing={2}>
-      {productsList?.length === 0 ? (
-        <p>no products</p>
-      ) : (
-        productsList?.map((product) => (
-          <Card
-            _hover={{ bg: 'lightgray' }}
-            size={'sm'}
-            cursor={'pointer'}
-            maxW={120}
-            onClick={() => onClick?.(product)}
-            key={product.name}
-          >
-            <CardBody alignContent={'center'}>
-              {product.image_url && (
-                <Image
-                  src={product.image_url || ''}
-                  alt={product.name || ''}
-                  height={Number(180 / 3)}
-                  width={Number(145 / 3)}
-                  quality={90}
-                  style={{ objectFit: 'cover' }}
-                />
-              )}
-              <Text fontSize="xs">{product.name}</Text>
-            </CardBody>
-          </Card>
-        ))
-      )}
-    </SimpleGrid>
+    <>
+      <Flex
+        justifyContent="flex-start"
+        alignItems="center"
+        gap="10px"
+        marginBottom="10px"
+        marginTop="10px"
+      >
+        <Text fontWeight={600}>Choose category</Text>
+        <Select
+          size={'sm'}
+          maxW={'200px'}
+          onChange={(e) => handleOnChange(e)}
+          value={productsCategory}
+        >
+          <option value="All">All</option>
+          {productCategories.map((product, i) => (
+            <option key={i} value={product}>
+              {product}
+            </option>
+          ))}
+        </Select>
+      </Flex>
+      <SimpleGrid minChildWidth="120px" spacing={2}>
+        {products?.length === 0 ? (
+          <p>No products</p>
+        ) : (
+          productsByCategory(productsCategory)?.map((product) => (
+            <Card
+              _hover={{ bg: 'lightgray' }}
+              size={'sm'}
+              cursor={'pointer'}
+              maxW={120}
+              onClick={() => onClick?.(product)}
+              key={product.name}
+            >
+              <CardBody alignContent={'center'}>
+                {product.image_url && (
+                  <Image
+                    src={product.image_url || ''}
+                    alt={product.name || ''}
+                    height={Number(180 / 3)}
+                    width={Number(145 / 3)}
+                    quality={90}
+                    style={{ objectFit: 'cover' }}
+                  />
+                )}
+                <Text fontSize="xs">{product.name}</Text>
+              </CardBody>
+            </Card>
+          ))
+        )}
+      </SimpleGrid>
+    </>
   )
 }
diff --git a/composable-ui/src/components/pos/receipt.tsx b/composable-ui/src/components/pos/receipt.tsx
@@ -50,13 +50,9 @@ export const Receipt = ({ order }: ReceiptProps) => {
     })
   }
 
-  const locationId =
-    order.metadata &&
-    order.metadata.location_id &&
-    Array.isArray(order.metadata.location_id) &&
-    order.metadata.location_id.length === 1
-      ? order.metadata.location_id[0]
-      : 'Lorem ipsum'
+  const locationId = order?.metadata?.location_id
+    ? order.metadata?.location_id
+    : 'Lorem ipsum'
 
   return (
     <Card maxW={500} p={4} variant="elevated" colorScheme="gray">
@@ -71,7 +67,7 @@ export const Receipt = ({ order }: ReceiptProps) => {
         </Center>
 
         <Text align="center" fontSize="sm" mt={3}>
-          Address: {locationId} , 1234-5{' '}
+          Address: {<>{locationId}</>}, 1234-5
         </Text>
         <Text align="center" fontSize="sm">
           Tel: +1 012 345 67 89{' '}

diff --git a/packages/commerce-generic/src/services/cart/get-products-list.ts b/packages/commerce-generic/src/services/cart/get-products-list.ts
@@ -4,5 +4,5 @@ import { getProducts } from '@composable/voucherify'
 export const getProductsList: CommerceService['getProductsList'] = async () => {
   const productsList = await getProducts()
 
-  return productsList
+  return productsList?.filter((product) => product.metadata?.category)
 }
diff --git a/packages/voucherify/src/discount.ts b/packages/voucherify/src/discount.ts
@@ -263,7 +263,7 @@ export const getOrdersList = async (
       id: order.id,
       created_at: order.created_at,
       status: order.status,
-      location: order?.metadata?.location_id?.[0] || '',
+      location: order?.metadata?.location_id || '',
       amount: order.amount,
     }))
   } catch (e) {
@@ -484,6 +484,7 @@ export const getCustomerRedeemables = async (props: {
     cartToVoucherifyOrder(cart),
     localisation
   )
+  console.log(order, 'ORDER???')
   try {
     const voucherify = getVoucherify()
     const qualificationResponse =

diff --git a/packages/voucherify/src/order-to-voucherify-order.ts b/packages/voucherify/src/order-to-voucherify-order.ts
@@ -19,13 +19,12 @@ export const orderToVoucherifyOrder = (order: Order): OrdersCreate => {
   }
 }
 const LOCALISATIONS = [
-  'West Parkland',
-  'Fas Gas',
-  'Parkland Calgary',
-  'Husky Market',
-  'Petro Canada Toronto',
-  'Esso Vancouver',
-  'Ultramar Montreal',
+  'New York',
+  'London',
+  'Paris',
+  'Warsaw',
+  'Vancouver',
+  'Lima',
 ]
 
 export const addLocalisationToOrder = (
@@ -37,6 +36,6 @@ export const addLocalisationToOrder = (
   }
   return {
     ...order,
-    metadata: { ...(order.metadata || {}), location_id: [localisation] },
+    metadata: { ...(order?.metadata || {}), location_id: localisation },
   }
 }