From 9dc0d3e1b88687d0f6302bc4708e77e25c7db7b3 Mon Sep 17 00:00:00 2001 From: Ankit Brahmbhatt Date: Thu, 4 Apr 2024 14:20:41 +0530 Subject: [PATCH] fix: ui fix 2 --- apps/retail/components/header/index.tsx | 9 +- apps/retail/lib/config.ts | 1 + apps/retail/pages/cart/cart.tsx | 5 +- apps/retail/pages/cart/cart.utils.tsx | 12 +- apps/retail/pages/checkout/checkout.tsx | 22 ++- apps/retail/pages/checkout/checkout.utils.tsx | 9 +- apps/retail/pages/product.tsx | 71 ++++++++- apps/retail/pages/search.tsx | 137 +++++++++++------- apps/retail/public/images/headerLogo.svg | 3 + apps/retail/store/checkout-slice.ts | 8 +- .../src/components/cart/cart.tsx | 11 +- .../src/components/checkout/checkout.types.ts | 2 + .../components/checkout/shipping-section.tsx | 12 +- .../src/hooks/useResponsive.tsx | 2 +- 14 files changed, 216 insertions(+), 88 deletions(-) create mode 100644 apps/retail/lib/config.ts create mode 100644 apps/retail/public/images/headerLogo.svg diff --git a/apps/retail/components/header/index.tsx b/apps/retail/components/header/index.tsx index c3bd851ca..e1c63ee1b 100644 --- a/apps/retail/components/header/index.tsx +++ b/apps/retail/components/header/index.tsx @@ -29,7 +29,8 @@ const cartIconBlackList: string[] = [ '/paymentMode', '/signUp', '/invoiceDetails', - '/' + '/', + '/cart' ] const backIconList = ['/', '/signin'] @@ -128,10 +129,10 @@ const TopHeader: React.FC = ({ handleMenuClick }) => { > - {/* App logo */} + /> {!homeIconBlackList.includes(router.pathname) && ( diff --git a/apps/retail/lib/config.ts b/apps/retail/lib/config.ts new file mode 100644 index 000000000..564796d91 --- /dev/null +++ b/apps/retail/lib/config.ts @@ -0,0 +1 @@ +export const DOMAIN = 'retail:1.1.0' diff --git a/apps/retail/pages/cart/cart.tsx b/apps/retail/pages/cart/cart.tsx index 2d04230a3..0aae2f7d7 100644 --- a/apps/retail/pages/cart/cart.tsx +++ b/apps/retail/pages/cart/cart.tsx @@ -8,6 +8,7 @@ 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 { DOMAIN } from '@lib/config' import { ICartRootState } from '@lib/types' import { DiscoveryRootState } from '@store/discovery-slice' @@ -24,7 +25,7 @@ const Cart = () => { const { transactionId, productList } = useSelector((state: DiscoveryRootState) => state.discovery) useEffect(() => { - fetchQuotes(getSelectPayload(items, transactionId)) + fetchQuotes(getSelectPayload(items, transactionId, DOMAIN)) }, [totalQuantity]) const onOrderClick = () => { @@ -53,7 +54,7 @@ const Cart = () => { dispatch(cartActions.removeItemFromCart(id)) } })), - loader: { text: 'Loading....' }, + loader: { text: 'Loading cart' }, orderSummary: { totalAmount: { price: totalAmount diff --git a/apps/retail/pages/cart/cart.utils.tsx b/apps/retail/pages/cart/cart.utils.tsx index 197a08e7d..ac2ae9382 100644 --- a/apps/retail/pages/cart/cart.utils.tsx +++ b/apps/retail/pages/cart/cart.utils.tsx @@ -37,8 +37,8 @@ export const getSelectPayload = (inputData: any, transactionId: string, domain = const orderIndex = orders.findIndex(order => order.provider.id === item.providerId) const newItem = { id: item.id, - selected: { - quantity: { + quantity: { + selected: { count: item.quantity } } @@ -52,9 +52,11 @@ export const getSelectPayload = (inputData: any, transactionId: string, domain = provider: { id: item.providerId }, - fulfillments: item.fulfillments.map(fulfillment => ({ - id: fulfillment.id - })) + fulfillments: + item.fulfillments && + item.fulfillments.map(fulfillment => ({ + id: fulfillment.id + })) }) } }) diff --git a/apps/retail/pages/checkout/checkout.tsx b/apps/retail/pages/checkout/checkout.tsx index ba528ffb0..0f1f4d9b2 100644 --- a/apps/retail/pages/checkout/checkout.tsx +++ b/apps/retail/pages/checkout/checkout.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { Box, Flex, Text, Stack, Checkbox } from '@chakra-ui/react' - +import { DOMAIN } from '@lib/config' import { useLanguage } from '../../hooks/useLanguage' import { CartItemForRequest, DataPerBpp, ICartRootState, TransactionIdRootState } from '@lib/types/cart' @@ -18,7 +18,7 @@ import { Checkout } from '@beckn-ui/becknified-components' import { Router, useRouter } from 'next/router' import { ShippingFormInitialValuesType } from '@beckn-ui/becknified-components' -import { CheckoutRootState } from '@store/checkout-slice' +import { CheckoutRootState, checkoutActions } from '@store/checkout-slice' import { cartActions } from '@store/cart-slice' import cart from '@beckn-ui/becknified-components/src/components/cart' @@ -62,15 +62,16 @@ const CheckoutPage = () => { pinCode: '75001' }) + const [isBillingSame, setIsBillingSame] = useState(true) + const router = useRouter() const initRequest = useRequest() const dispatch = useDispatch() const [initialize, { isLoading }] = useInitMutation() const { t, locale } = useLanguage() const cartItems = useSelector((state: ICartRootState) => state.cart.items) - const totalAmount = useSelector((state: ICartRootState) => state.cart.totalAmount) const initResponse = useSelector((state: CheckoutRootState) => state.checkout.initResponse) - console.log('Dank init', initResponse) + const isBillingSameRedux = useSelector((state: CheckoutRootState) => state.checkout.isBillingSame) const { transactionId, productList } = useSelector((state: DiscoveryRootState) => state.discovery) useEffect(() => { @@ -119,9 +120,13 @@ const CheckoutPage = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [billingFormData]) + // useEffect(()=>{ + // setIsBillingSame(isBillingSameRedux) + // },[]) + const formSubmitHandler = (data: any) => { if (data) { - getInitPayload(data, billingFormData, cartItems, transactionId) + getInitPayload(data, billingFormData, cartItems, transactionId, DOMAIN) .then(res => { console.log('Dank checkout', res) return initialize(res) @@ -163,7 +168,7 @@ const CheckoutPage = () => { title: singleItem.name, description: singleItem.short_desc, quantity: singleItem.quantity, - priceWithSymbol: `${t.currencySymbol}${totalAmount}`, + priceWithSymbol: `${t.currencySymbol}${singleItem.totalPrice}`, image: singleItem.images[0].url })) }, @@ -187,6 +192,11 @@ const CheckoutPage = () => { sectionTitle: 'Billing', formTitle: 'Add Billing Details', isBilling: true, + isChecked: isBillingSameRedux, + onCheckChange: () => { + // setIsBillingSame(!isBillingSame) + dispatch(checkoutActions.setIsBillingSame({ isBillingSame: !isBillingSameRedux })) + }, showDetails: isInitResultPresent(), shippingDetails: { name: submittedDetails.name, diff --git a/apps/retail/pages/checkout/checkout.utils.tsx b/apps/retail/pages/checkout/checkout.utils.tsx index 7b40576f2..ed1e7ada6 100644 --- a/apps/retail/pages/checkout/checkout.utils.tsx +++ b/apps/retail/pages/checkout/checkout.utils.tsx @@ -174,7 +174,8 @@ export const getInitPayload = async ( deliveryAddress: any, billingAddress: any, cartItems: any, - transaction_id: string + transaction_id: string, + domain: string = 'retail:1.1.0' ) => { const cityData = await geocodeFromPincode(deliveryAddress.pinCode) @@ -192,7 +193,7 @@ export const getInitPayload = async ( transaction_id: transaction_id, bpp_id: bpp_id, bpp_uri: items[0].bpp_uri, - domain: 'retail' + domain: domain }, message: { orders: transformOrdersByProvider(items) @@ -214,8 +215,8 @@ export const getInitPayload = async ( const providerId = group[0].providerId const items = group.map(item => ({ id: item.id, - selected: { - quantity: { + quantity: { + selected: { count: item.quantity } } diff --git a/apps/retail/pages/product.tsx b/apps/retail/pages/product.tsx index b74313bb0..1ef0ef845 100644 --- a/apps/retail/pages/product.tsx +++ b/apps/retail/pages/product.tsx @@ -2,12 +2,15 @@ import Router from 'next/router' import React, { useEffect, useState } from 'react' import { ProductDetailPage } from '@beckn-ui/becknified-components' import { RetailItem } from '@lib/products' +import { ProductCard } from '@beckn-ui/becknified-components' import { LocalStorage, ICartProduct, ICart, LocalStorageCart, LocalStorageCartItem } from '@lib/types' import { cartActions } from '@store/cart-slice' import { useDispatch, useSelector } from 'react-redux' +import useResponsive from '@beckn-ui/becknified-components/src/hooks/useResponsive' import { toast } from 'react-toastify' import { setLocalStorage, getLocalStorage, addLocalStorage } from '@utils/localstorage' import { fromBinary } from '@utils/common-utils' +import { useRouter } from 'next/router' import { DiscoveryRootState } from '@store/discovery-slice' import { Box, Flex, useTheme } from '@chakra-ui/react' import { Button, CustomThemeType, Input, Typography } from '@beckn-ui/molecules' @@ -15,6 +18,9 @@ import { Button, CustomThemeType, Input, Typography } from '@beckn-ui/molecules' const Product = () => { const theme = useTheme() const selectedProduct = useSelector((state: DiscoveryRootState) => state.discovery.selectedProduct) + const productList = useSelector((state: DiscoveryRootState) => state.discovery.productList) + const { isMobile, isTablet, isDesktop } = useResponsive() + console.log('Dank list', productList, isMobile, isTablet, isDesktop) const dispatch = useDispatch() const [counter, setCounter] = useState(1) const [totalPrice, setTotalPrice] = useState(selectedProduct.item.price.value) @@ -34,22 +40,33 @@ const Product = () => { setTotalPrice(newTotalPrice) } } + const router = useRouter() if (!selectedProduct) { return <> } return ( - + <> { + // dispatch( + // cartActions.addItemToCart({ + // product: selectedProduct, + // quantity: 1 + // }) + // ) + // toast.success('Product added to cart') + // } + // } + // ], starRating: { rating: 4.5, size: 20, @@ -128,8 +145,50 @@ const Product = () => { }} /> - + ) } export default Product + +{ + /* { + !(isMobile || isTablet) && + { + Array(5).fill([...productList]).flat().map((singleItem,idx)=>{ + const { item } = singleItem + const product = { + id: item.id, + images: item.images.map(singleImage => singleImage.url), + name: item.name, + price: item.price.value, + rating: '4', + shortDesc: item.short_desc + } + return ( + { + e.preventDefault() + dispatch(discoveryActions.addSingleProduct({ product: singleItem })) + router.push({ + pathname: '/product', + query: { + id: item.id, + search: searchKeyword + } + }) + }} + product={product} + currency={item.price.currency} + /> + ) + + }) + } + + + + + } */ +} diff --git a/apps/retail/pages/search.tsx b/apps/retail/pages/search.tsx index a521be08e..7f6fdb0e7 100644 --- a/apps/retail/pages/search.tsx +++ b/apps/retail/pages/search.tsx @@ -12,6 +12,7 @@ import { useBreakpoint } from '@chakra-ui/react' import SearchBar from '../components/header/SearchBar' import { useLanguage } from '../hooks/useLanguage' import { ParsedItemModel } from '../types/search.types' +import { DOMAIN } from '@lib/config' import LoaderWithMessage from '@components/loader/LoaderWithMessage' import Filter from '../components/filter/Filter' import { LocalStorage } from '@lib/types' @@ -36,32 +37,32 @@ const Search = () => { const apiUrl = process.env.NEXT_PUBLIC_API_URL - // const searchPayload = { - // context: { - // domain: 'retail:1.1.0' - // }, - // searchString: searchKeyword, - // category: { - // categoryCode: 'farming' - // }, - // fulfillment: { - // type: 'Delivery', - // stops: [ - // { - // location: '28.4594965,77.0266383' - // } - // ] - // } - // } - const searchPayload = { context: { - domain: 'retail' + domain: DOMAIN }, - searchString: 'T Shirt', - location: '12.423423,77.325647' + searchString: searchKeyword, + // category: { + // categoryCode: 'farming' + // }, + fulfillment: { + type: 'Delivery', + stops: [ + { + location: '28.4594965,77.0266383' + } + ] + } } + // const searchPayload = { + // context: { + // domain: 'retail' + // }, + // searchString: 'Coffee', + // location: '12.423423,77.325647' + // } + const fetchDataForSearch = () => { if (!searchKeyword) return setIsLoading(true) @@ -176,38 +177,35 @@ const Search = () => { w={['100%', '100%', '51%', '100%']} margin="0 auto" > - {Array(5) - .fill([...items]) - .flat() - .map((singleItem, idx) => { - const { item } = singleItem - const product = { - id: item.id, - images: item.images.map(singleImage => singleImage.url), - name: item.name, - price: item.price.value, - rating: '4', - shortDesc: item.short_desc - } - return ( - { - e.preventDefault() - dispatch(discoveryActions.addSingleProduct({ product: singleItem })) - router.push({ - pathname: '/product', - query: { - id: item.id, - search: searchKeyword - } - }) - }} - product={product} - currency={item.price.currency} - /> - ) - })} + {items.map((singleItem, idx) => { + const { item } = singleItem + const product = { + id: item.id, + images: item.images.map(singleImage => singleImage.url), + name: item.name, + price: item.price.value, + rating: '4', + shortDesc: item.short_desc + } + return ( + { + e.preventDefault() + dispatch(discoveryActions.addSingleProduct({ product: singleItem })) + router.push({ + pathname: '/product', + query: { + id: item.id, + search: searchKeyword + } + }) + }} + product={product} + currency={item.price.currency} + /> + ) + })} )} @@ -218,3 +216,36 @@ const Search = () => { } export default Search + +// {Array(5) +// .fill([...items]) +// .flat() +// .map((singleItem, idx) => { +// const { item } = singleItem +// const product = { +// id: item.id, +// images: item.images.map(singleImage => singleImage.url), +// name: item.name, +// price: item.price.value, +// rating: '4', +// shortDesc: item.short_desc +// } +// return ( +// { +// e.preventDefault() +// dispatch(discoveryActions.addSingleProduct({ product: singleItem })) +// router.push({ +// pathname: '/product', +// query: { +// id: item.id, +// search: searchKeyword +// } +// }) +// }} +// product={product} +// currency={item.price.currency} +// /> +// ) +// })} diff --git a/apps/retail/public/images/headerLogo.svg b/apps/retail/public/images/headerLogo.svg new file mode 100644 index 000000000..93173c344 --- /dev/null +++ b/apps/retail/public/images/headerLogo.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/retail/store/checkout-slice.ts b/apps/retail/store/checkout-slice.ts index 320dc9351..e4841a3c7 100644 --- a/apps/retail/store/checkout-slice.ts +++ b/apps/retail/store/checkout-slice.ts @@ -9,11 +9,13 @@ export interface CheckoutRootState { export interface Checkout { initResponse: any confirmResponse: any + isBillingSame: boolean } const initialState: Checkout = { initResponse: {}, - confirmResponse: {} + confirmResponse: {}, + isBillingSame: true } const checkoutSlice = createSlice({ @@ -22,6 +24,10 @@ const checkoutSlice = createSlice({ reducers: { addInitResponse(state, action: PayloadAction<{ initResponse: any }>) { state.initResponse = action.payload.initResponse + }, + setIsBillingSame(state, action: PayloadAction<{ isBillingSame: boolean }>) { + console.log('Dank inside redux', action.payload.isBillingSame) + state.isBillingSame = action.payload.isBillingSame } }, extraReducers: builder => { diff --git a/packages/becknified-components/src/components/cart/cart.tsx b/packages/becknified-components/src/components/cart/cart.tsx index ccddc4e49..d0c267674 100644 --- a/packages/becknified-components/src/components/cart/cart.tsx +++ b/packages/becknified-components/src/components/cart/cart.tsx @@ -16,7 +16,16 @@ const Cart: React.FC = ({ className }) => { if (isLoading) { - return + return ( + + + + ) } console.log('Dank inside', cartItems) diff --git a/packages/becknified-components/src/components/checkout/checkout.types.ts b/packages/becknified-components/src/components/checkout/checkout.types.ts index 681f7a0d0..4bed0ca3e 100644 --- a/packages/becknified-components/src/components/checkout/checkout.types.ts +++ b/packages/becknified-components/src/components/checkout/checkout.types.ts @@ -25,6 +25,8 @@ export interface ShippingSectionProps { showDetails?: boolean isBilling?: boolean addButtonImage?: string + isChecked?: boolean + onCheckChange?: () => void } export interface ItemDetailProps { diff --git a/packages/becknified-components/src/components/checkout/shipping-section.tsx b/packages/becknified-components/src/components/checkout/shipping-section.tsx index 20e18c69f..6e24df220 100644 --- a/packages/becknified-components/src/components/checkout/shipping-section.tsx +++ b/packages/becknified-components/src/components/checkout/shipping-section.tsx @@ -20,12 +20,15 @@ const ShippingSection: React.FC> = ({ showDetails = false, isBilling = false, shippingDetails, - addButtonImage = AddShippingButtonImage + addButtonImage = AddShippingButtonImage, + isChecked = true, + onCheckChange }) => { const { isOpen, onClose, onOpen } = useDisclosure() - const [isChecked, setIsChecked] = useState(true) + // const [isChecked, setIsChecked] = useState(true) const { isDesktop, isTablet } = useResponsive() - console.log('Dank', isDesktop, isTablet) + + console.log('Dank', isChecked) return ( @@ -54,8 +57,7 @@ const ShippingSection: React.FC> = ({ pr={'12px'} fontSize={'17px'} checked={isChecked} - defaultChecked - onChange={() => setIsChecked(!isChecked)} + onChange={() => onCheckChange && onCheckChange()} > Same as shipping address diff --git a/packages/becknified-components/src/hooks/useResponsive.tsx b/packages/becknified-components/src/hooks/useResponsive.tsx index 88c5992a6..426a64160 100644 --- a/packages/becknified-components/src/hooks/useResponsive.tsx +++ b/packages/becknified-components/src/hooks/useResponsive.tsx @@ -6,7 +6,7 @@ export default function useResponsive() { console.log('Dank breakpoint', breakpoint) const isDesktop = breakpoint === 'xl' || breakpoint === 'lg' || breakpoint === '2xl' const isTablet = breakpoint === 'md' - const isMobile = breakpoint === 'sm' || breakpoint === 'xs' + const isMobile = breakpoint === 'sm' || breakpoint === 'xs' || breakpoint === 'base' return { isDesktop,