Merge branch 'ps/pos' of https://github.com/voucherifyio/voucherify-p…

…ot-pos

composable-ui/src/components/layout/header.tsx

@@ -1,6 +1,4 @@
-import { useComposable, useCart } from 'hooks'
-import { Logo } from 'components/logo'
-import { CartIcon } from 'components/cart'
+import { useComposable } from 'hooks'
 import {
   Box,
   Button,
@@ -10,25 +8,21 @@ import {
   Grid,
   Link,
 } from '@chakra-ui/react'
-import { LoginAction } from './login-action'
-import { cmsNavLinks } from './_data'
 import { HamburgerIcon } from '@chakra-ui/icons'
 import { useRouter } from 'next/router'
 import { MenuItem } from 'components/menu/menu-item'
 import NextLink from 'next/link'
 import { Heading } from '@chakra-ui/react'
 import { Localisation } from 'components/pos/localisation'
+import { useContext } from 'react'
+import { LoyaltyProgramContext } from 'components/pos/loyalty-pogram-context'
 
 export const Header = () => {
-  const { cart } = useCart()
-  const { cartDrawer, menuDrawer } = useComposable()
-  const {
-    pathname,
-    basePath,
-    query: { slug },
-  } = useRouter()
-
-  // console.log({basePath, slug, pathname})
+  const { menuDrawer } = useComposable()
+  const { pathname } = useRouter()
+  const { isLoyaltyProgram, setIsLoyaltyProgram } = useContext(
+    LoyaltyProgramContext
+  )
 
   return (
     <Box as="header" borderBottomWidth="1px" height={'4rem'}>
@@ -60,11 +54,19 @@ export const Header = () => {
             justifyContent={{ base: 'center', md: 'left' }}
           >
             <Link as={NextLink} href="/">
-              {/* <Logo h="21px" /> */}
               <Heading as="p" size="sm">
                 Voucherify PoT
               </Heading>
             </Link>
+            <Button
+              type="button"
+              onClick={() => {
+                setIsLoyaltyProgram(false)
+              }}
+              marginLeft={'10px'}
+            >
+              Change program
+            </Button>
           </Flex>
           <Box
             as="nav"
@@ -77,16 +79,9 @@ export const Header = () => {
               state={'/' === pathname ? 'Active' : 'Default'}
               rootProps={{
                 height: 'full',
+                disabled: isLoyaltyProgram,
               }}
             />
-            {/* <MenuItem
-              label="Ev Kiosk & Pump"
-              href={`/ev-kiosk-and-pomp`}
-              state={'/ev-kiosk-and-pomp' === pathname ? 'Active' : 'Default'}
-              rootProps={{
-                height: 'full',
-              }}
-            /> */}
             <MenuItem
               label="Return Products"
               href={`/return-products`}
@@ -95,43 +90,13 @@ export const Header = () => {
                 height: 'full',
               }}
             />
-            {/* {cmsNavLinks.map((el) => {
-              return (
-                <MenuItem
-                  label={el.name}
-                  href={`/category/${el.slug}`}
-                  key={el.slug}
-                  state={el.slug === slug ? 'Active' : 'Default'}
-                  rootProps={{
-                    height: 'full',
-                  }}
-                />
-              )
-            })} */}
           </Box>
           <Box
             display="flex"
             alignItems={'center'}
             justifyContent="flex-end"
             gap={3}
-            // maxW={200}
           >
-            {/* <Box display={{ base: 'none', md: 'flex' }}>
-              <LoginAction />
-            </Box>
-            <Button
-              variant="unstyled"
-              aria-label={`${cart.quantity} items in your shopping cart`}
-              height="auto"
-              width="auto"
-              ml={5}
-              mr={2}
-              aria-expanded={cartDrawer.isOpen}
-              onClick={() => cartDrawer.onOpen()}
-            >
-              <CartIcon cartQuantity={cart.quantity} />
-            </Button> */}
-
             <Localisation />
           </Box>
         </Grid>

composable-ui/src/components/pos-page.tsx

@@ -22,12 +22,15 @@ import { CartSummary } from './cart'
 import { ProductsList } from './pos/products-list'
 import { Customer } from './pos/customer'
 import { CustomerRedeemable } from './pos/customer-redeemables'
-import { useState } from 'react'
+import { useContext, useState } from 'react'
 import { LoyaltyCardsList } from './pos/loyalty-cards-list'
 import { Order, ProductListResponse } from '@composable/types'
 import { useRouter } from 'next/router'
+import { LoyaltyProgramContext } from './pos/loyalty-pogram-context'
+import { SelectLoyaltyProgramModal } from './select-loyalty-program'
 
 export const PosPage = () => {
+  const { loyaltyProgram, isLoyaltyProgram } = useContext(LoyaltyProgramContext)
   const intl = useIntl()
   const [orderAdded, setOrderAdded] = useState<Order | undefined>()
   const toast = useToast()
@@ -52,7 +55,6 @@ export const PosPage = () => {
       if (order) {
         await deleteCart()
         await signOut({ redirect: false })
-        // setOrderAdded(undefined)
         router.push(`/order/${order.voucherifyOrderId}`)
       } else {
         setOrderAdded(order)
@@ -61,7 +63,6 @@ export const PosPage = () => {
   })
 
   const { isLoading, isEmpty, quantity } = cart
-  const title = intl.formatMessage({ id: 'cart.title' })
   const productCartSize: 'sm' | 'lg' | undefined = useBreakpointValue({
     base: 'sm',
     md: 'lg',
@@ -92,6 +93,10 @@ export const PosPage = () => {
     setOrderAdded(undefined)
   }
 
+  if (!isLoyaltyProgram) {
+    return <SelectLoyaltyProgramModal />
+  }
+
   if (orderAdded) {
     return (
       <Container maxW="container.2xl" py={{ base: '4', md: '8' }}>
@@ -235,7 +240,7 @@ export const PosPage = () => {
           >
             Scan loyalty card
           </Text>
-          <LoyaltyCardsList />
+          <LoyaltyCardsList campaignId={loyaltyProgram.id} />
           <CustomerRedeemable />
         </GridItem>
       </Grid>

composable-ui/src/components/pos/loyalty-cards-list.tsx

@@ -11,13 +11,18 @@ import {
 } from '@chakra-ui/react'
 import { useLoyaltyCardsList } from 'hooks/use-loyalty-cards-list'
 import { signIn } from 'next-auth/react'
+import { CAMPAIGNS } from 'enum/campaigns'
 
 export interface LoyaltyCardsListProps {
   onClick?: (productId: string) => unknown
+  campaignId: string
 }
 
-export const LoyaltyCardsList = ({ onClick }: LoyaltyCardsListProps) => {
-  const { status, loyaltyCardsList } = useLoyaltyCardsList()
+export const LoyaltyCardsList = ({
+  onClick,
+  campaignId,
+}: LoyaltyCardsListProps) => {
+  const { status, loyaltyCardsList } = useLoyaltyCardsList(campaignId)
   if (status !== 'success') {
     return <></>
   }

composable-ui/src/components/pos/loyalty-pogram-context.tsx

@@ -0,0 +1,64 @@
+import { CAMPAIGNS } from 'enum/campaigns'
+import {
+  createContext,
+  useState,
+  Dispatch,
+  SetStateAction,
+  useEffect,
+} from 'react'
+import { LOCAL_STORAGE_LOYALTY_PROGRAM } from 'utils/constants'
+import { useLocalStorage } from 'utils/local-storage'
+
+type LoyaltyProgramContextType = {
+  loyaltyProgram: { name: CAMPAIGNS | string; id: CAMPAIGNS | string }
+  setLoyaltyProgram: Dispatch<
+    SetStateAction<{ name: CAMPAIGNS | string; id: CAMPAIGNS | string }>
+  >
+  isLoyaltyProgram: boolean
+  setIsLoyaltyProgram: Dispatch<SetStateAction<boolean>>
+}
+
+export const LoyaltyProgramContext = createContext<LoyaltyProgramContextType>({
+  loyaltyProgram: {
+    name: CAMPAIGNS.LOYALTY_PROGRAM,
+    id: CAMPAIGNS.LOYALTY_PROGRAM_ID,
+  },
+  setLoyaltyProgram: () => {},
+  isLoyaltyProgram: false,
+  setIsLoyaltyProgram: () => false,
+})
+
+const LoyaltyProgram = ({ children }: { children: JSX.Element }) => {
+  const [activeLoyaltyProgram] = useLocalStorage(
+    LOCAL_STORAGE_LOYALTY_PROGRAM,
+    { name: '', id: '' }
+  )
+  const [loyaltyProgram, setLoyaltyProgram] = useState({
+    name: activeLoyaltyProgram.name,
+    id: activeLoyaltyProgram.id,
+  })
+  const [isLoyaltyProgram, setIsLoyaltyProgram] = useState(true)
+
+  useEffect(() => {
+    if (!loyaltyProgram.id) {
+      setIsLoyaltyProgram(false)
+    } else {
+      setIsLoyaltyProgram(true)
+    }
+  }, [loyaltyProgram, activeLoyaltyProgram.id])
+
+  return (
+    <LoyaltyProgramContext.Provider
+      value={{
+        loyaltyProgram,
+        setLoyaltyProgram,
+        isLoyaltyProgram,
+        setIsLoyaltyProgram,
+      }}
+    >
+      {children}
+    </LoyaltyProgramContext.Provider>
+  )
+}
+
+export default LoyaltyProgram

composable-ui/src/components/pos/order-item-list.tsx

@@ -22,18 +22,24 @@ import {
 
 import { VoucherifyOrder } from '@composable/types'
 import { Price } from 'components/price'
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
+import { LoyaltyProgramContext } from './loyalty-pogram-context'
 
 export interface LoyaltyCardsListProps {
   order: VoucherifyOrder | null | undefined
-  onReturnProducts?: (voucherifyOrderId: string, productsIds: string[]) => any
+  onReturnProducts?: (
+    voucherifyOrderId: string,
+    productsIds: string[],
+    campaignName: string
+  ) => any
 }
 
 export const OrderItemList = ({
   order,
   onReturnProducts,
 }: LoyaltyCardsListProps) => {
   const [selectedItems, setSelectedItems] = useState<string[]>([])
+  const { loyaltyProgram } = useContext(LoyaltyProgramContext)
 
   useEffect(() => {
     setSelectedItems([])
@@ -43,7 +49,7 @@ export const OrderItemList = ({
     if (!order?.id) {
       return
     }
-    onReturnProducts?.(order.id, selectedItems)
+    onReturnProducts?.(order.id, selectedItems, loyaltyProgram.name)
   }
   if (!order) {
     return null

composable-ui/src/components/pos/orders-list.tsx

@@ -37,6 +37,7 @@ export const OrdersList = ({ onClick }: LoyaltyCardsListProps) => {
   if (status !== 'success') {
     return <></>
   }
+
   return (
     <SimpleGrid mt={8} minChildWidth="120px" spacing={2}>
       {ordersList?.length ? (

composable-ui/src/components/return-products-page.tsx

@@ -26,11 +26,15 @@ import {
 import { Customer } from './pos/customer'
 import { OrdersList } from './pos/orders-list'
 import { useOrder } from 'hooks/use-order'
-import { useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { OrderItemList } from './pos/order-item-list'
 import dayjs from 'dayjs'
+import { LoyaltyProgramContext } from './pos/loyalty-pogram-context'
+import { useRouter } from 'next/router'
+import { SelectLoyaltyProgramModal } from './select-loyalty-program'
 
 export const ReturnProductsPage = () => {
+  const { loyaltyProgram, isLoyaltyProgram } = useContext(LoyaltyProgramContext)
   const [orderId, setOrderId] = useState<string | null>()
   const {
     order,
@@ -41,10 +45,20 @@ export const ReturnProductsPage = () => {
   })
   const onReturnProducts = (
     voucherifyOrderId: string,
-    productsIds: string[]
+    productsIds: string[],
+    campaignName: string
   ) => {
-    returnProductsFromOrderMutation({ voucherifyOrderId, productsIds })
+    returnProductsFromOrderMutation({
+      voucherifyOrderId,
+      productsIds,
+      campaignName,
+    })
   }
+
+  if (!isLoyaltyProgram) {
+    return <SelectLoyaltyProgramModal />
+  }
+
   return (
     <Container maxW="container.2xl" py={{ base: '4', md: '8' }}>
       <Grid templateColumns="repeat(2, 1fr)" gap={'md'}>