Merge pull request #477 from beckn/rtk-query-integration

Select and order flow

apps/retail/components/header/index.tsx

@@ -4,28 +4,18 @@ import { BottomModal } from '@beckn-ui/molecules'
 import { useTheme, Box, Divider, Flex, HStack, Image, Text } from '@chakra-ui/react'
 import { Router, useRouter } from 'next/router'
 import styles from './header.module.css'
+import { useSelector } from 'react-redux'
 
 import { useLanguage } from '../../hooks/useLanguage'
 import Qrcode from '@components/qrCode/Qrcode'
 import BottomModalScan from '@components/BottomModal/BottomModalScan'
 import BecknButton from '@beckn-ui/molecules/src/components/button/Button'
 import CartIconWithCount from './CartIcon'
 import TopSheet from '@components/topSheet/TopSheet'
-import { getLocalStorage } from '@utils/localstorage'
-import { LocalStorage, LocalStorageCart } from '@lib/types'
+import { ICartRootState } from '@lib/types'
 
 type PathnameObjectType = { [key: string]: string }
 
-// const calculateCartCount = (cartItems:LocalStorageCart)=>{
-//   const uniqueIds = new Set(); // Create a Set to store unique ids
-
-//   cartItems.forEach(item => {
-//     uniqueIds.add(item.product.id); // Add each id to the Set
-//   });
-
-//   return uniqueIds.size;
-// }
-
 const cartIconBlackList: string[] = [
   '/orderConfirmation',
   '/orderDetails',
@@ -199,6 +189,7 @@ const BottomHeader = () => {
   const { t, locale } = useLanguage()
   const [isOrderModalOpen, setOrderModalOpen] = useState(false)
   const [isInvoiceModalOpen, setInvoiceModalOpen] = useState(false)
+  const cartItems = useSelector((state: ICartRootState) => state.cart.items)
   const theme = useTheme()
 
   const [currentAddress, setCurrentAddress] = useState('')
@@ -304,7 +295,7 @@ const BottomHeader = () => {
           <div className="flex gap-4">
             {!cartIconBlackList.includes(router.pathname) && (
               <CartIconWithCount
-                itemCount={3}
+                itemCount={cartItems.length}
                 handleClick={() => router.push('/cart')}
               />
             )}

apps/retail/lib/types/beckn/index.ts

@@ -0,0 +1 @@
+export * from './search'

apps/retail/lib/types/beckn/search.ts

@@ -0,0 +1,112 @@
+import { Coordinate } from '@utils/homePage.utils'
+
+interface Location {
+  id: string
+  city: {
+    code: string
+    name: string
+  }
+  gps: string
+}
+
+interface Price {
+  value: string
+  currency: string
+}
+
+interface Tag {
+  code: string
+  name: string
+  display: boolean
+  list?: Array<{
+    name: string
+    value: string
+  }>
+}
+
+interface Fulfillment {
+  id: string
+  type: string
+  tracking: boolean
+  tags: Tag[]
+}
+
+interface Image {
+  url: string
+  size_type: string
+}
+
+export interface Item {
+  long_desc: string
+  short_desc: string
+  id: string
+  name: string
+  price: Price
+  locations: Location[]
+  fulfillments: Fulfillment[]
+  images: Image[]
+  tags: Tag[]
+}
+
+interface LocationProvider {
+  id: string
+  name: string
+  rating: string
+  locations: Location[]
+  items: Item[]
+  images: Image[]
+}
+
+interface Message {
+  name: string
+  providers: LocationProvider[]
+}
+
+interface Context {
+  domain: string
+  action: string
+  version: string
+  bpp_id: string
+  bpp_uri: string
+  country: string
+  city: string
+  location: {
+    country: {
+      code: string
+    }
+  }
+  bap_id: string
+  bap_uri: string
+  transaction_id: string
+  message_id: string
+  ttl: string
+  timestamp: string
+}
+
+export interface SearchResponseModel {
+  context: Context
+  message: Message
+}
+
+export interface ParsedItemModel {
+  id: string
+  bppId: string
+  bppUri: string
+  domain: string
+  transactionId: string
+  providerId: string
+  providerName: string
+  item: Item
+  rating?: string
+  providerCoordinates: Coordinate
+}
+
+export interface AssemblyData {
+  type: string
+  colour: string
+  shape: string
+  length: string
+  width: string
+  quantity?: number
+  weight: string
+}

apps/retail/lib/types/cart.ts

@@ -1,4 +1,5 @@
 import { IProductDetails, RetailItem, TSlug } from './products'
+import { Item } from '@lib/types'
 
 export interface ICartProduct {
   image: any
@@ -17,7 +18,7 @@ export interface ICartProduct {
   totalPrice: number
 }
 
-export interface CartRetailItem extends RetailItem {
+export interface CartRetailItem extends Item {
   quantity: number
   totalPrice: number
 }
@@ -36,7 +37,7 @@ export interface ICartUI {
 }
 
 export interface ICart {
-  items: CartRetailItem[]
+  items: CartItemForRequest[]
   totalQuantity: number
   totalAmount: number
 }

apps/retail/lib/types/discovery.ts

@@ -0,0 +1,3 @@
+export interface DiscoveryRootState {
+  transactionId: string
+}

apps/retail/lib/types/index.ts

@@ -1,4 +1,6 @@
 import { LocalStorage } from './localstorage'
 export * from './cart'
+export * from './discovery'
+export * from './beckn'
 
 export { LocalStorage }

apps/retail/package.json

@@ -79,5 +79,5 @@
   },
   "resolutions": {
     "@types/react": "^17.0.39"
-}
+  }
 }

apps/retail/pages/cart/cart.tsx

@@ -0,0 +1,75 @@
+import { useRouter } from 'next/router'
+
+import React from 'react'
+import { useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useLanguage } from '../../hooks/useLanguage'
+import { Cart as BecknCart } from '@beckn-ui/becknified-components'
+import { useSelectMutation } from '@services/select'
+import { getSelectPayload } from './cart.utils'
+import { cartActions } from '@store/cart-slice'
+
+import { ICartRootState } from '@lib/types'
+import { DiscoveryRootState } from '@store/discovery-slice'
+
+const Cart = () => {
+  const [fetchQuotes, { isLoading }] = useSelectMutation()
+  const dispatch = useDispatch()
+
+  const router = useRouter()
+  const { t } = useLanguage()
+
+  const { items, totalQuantity } = useSelector((state: ICartRootState) => state.cart)
+  const { transactionId, productList } = useSelector((state: DiscoveryRootState) => state.discovery)
+
+  useEffect(() => {
+    fetchQuotes(getSelectPayload(items, transactionId))
+  }, [totalQuantity])
+
+  const onOrderClick = () => {
+    router.push('/checkoutPage')
+  }
+
+  return (
+    <div>
+      <BecknCart
+        isLoading={isLoading}
+        schema={{
+          cartItems: items.map(singleItem => ({
+            id: singleItem.id,
+            quantity: singleItem.quantity,
+            name: singleItem.name,
+            image: singleItem.images[0].url,
+            price: Number(singleItem.price.value),
+            symbol: '€',
+            handleIncrement: id => {
+              const selectedItem = productList.find(singleItem => singleItem.id === id)
+              if (selectedItem) {
+                dispatch(cartActions.addItemToCart({ product: selectedItem, quantity: 1 }))
+              }
+            },
+            handleDecrement: id => {
+              dispatch(cartActions.removeItemFromCart(id))
+            }
+          })),
+          loader: { text: 'Loading....' },
+          orderSummary: {
+            totalAmount: {
+              price: 25
+            },
+            totalQuantity: {
+              text: '3',
+              variant: 'subTitleSemibold'
+            },
+            pageCTA: {
+              text: 'Proceed to checkout',
+              handleClick: onOrderClick
+            }
+          }
+        }}
+      />
+    </div>
+  )
+}
+
+export default Cart