Skip to content

Commit

Permalink
Merge pull request #472 from beckn/dsep-product-description
Browse files Browse the repository at this point in the history 
feat: course select changes
  • Loading branch information
@ujjwal502
ujjwal502 authored Apr 2, 2024
2 parents 518f975 + 180a589 commit 80878a3
Show file tree
Hide file tree
Showing 22 changed files with 496 additions and 417 deletions.
101 changes: 0 additions & 101 deletions apps/dsep/components/cart/CartBox.tsx
View file

This file was deleted.

24 changes: 0 additions & 24 deletions apps/dsep/components/cart/CartIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,15 @@
import React, { useRef } from 'react'
import Link from 'next/link'
import { useDispatch, useSelector } from 'react-redux'
import { Transition } from 'react-transition-group'
import { AiOutlineShoppingCart } from 'react-icons/ai'
import { cartUiActions } from '../../store/cartUI-slice'
import CartBox from './CartBox'
import { ICartUiRootState, ICartRootState } from '../../lib/types/cart'
import { useLanguage } from '../../hooks/useLanguage'

const Basket = () => {
const dispatch = useDispatch()
const { locale } = useLanguage()
const showCartBox = useSelector((state: ICartUiRootState) => state.cartUi.cartBoxIsVisible)
const cartItemQuantity = useSelector((state: ICartRootState) => state.cart.totalQuantity)

const nodeRef = useRef<HTMLDivElement>(null)

function onMouseHoverHandler(toggle: boolean) {
dispatch(cartUiActions.toggleCartBox(toggle))
}
Expand Down Expand Up @@ -46,24 +40,6 @@ const Basket = () => {
</span>
</a>
</Link>
<Transition
nodeRef={nodeRef}
in={showCartBox}
timeout={300}
mountOnEnter
unmountOnExit
>
{state => {
return (
<div
ref={nodeRef}
className="z-[100]"
>
<CartBox />
</div>
)
}}
</Transition>
</div>
)
}
Expand Down
82 changes: 18 additions & 64 deletions apps/dsep/components/cart/CartItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,45 @@
import { Box, Image, Text, Flex } from '@chakra-ui/react'
import { Image } from '@chakra-ui/react'
import { useRouter } from 'next/router'
import React, { useState } from 'react'
import { HiMinusSm, HiOutlinePlusSm, HiOutlineTrash } from 'react-icons/hi'
import { useSelector } from 'react-redux'
import { useDispatch } from 'react-redux'
import { useLanguage } from '../../hooks/useLanguage'
import useRequest from '../../hooks/useRequest'
import { CartItemForRequest, DataPerBpp, ICartRootState, TransactionIdRootState } from '../../lib/types/cart'
import { RetailItem } from '../../lib/types/products'
import { ICartRootState } from '../../lib/types/cart'
import { cartActions } from '../../store/cart-slice'
import { getCartItemsPerBpp, getPayloadForQuoteRequest } from '../../utilities/cart-utils'
import AddBillingButton from '../detailsCard/AddBillingButton'
import DetailsCard from '../detailsCard/DetailsCard'
import ScholarshipAddButton from '../scholarship/scholarshipAddButton/ScholarshipAddButton'
import ProductPrice from '../UI/ProductPrice'
import addShippingBtn from '../../public/images/offer.svg'
import { getPayloadForSelectRequest } from '../../utilities/cart-utils'

import { ParsedItemModel } from '../../types/search.types'
import { Item } from '../../lib/types/select.types'
import { ProductPrice } from '@beckn-ui/becknified-components'

interface Props {
product: RetailItem
product: Item
setIsLoadingForCartCountChange: Function
}
const CartItem: React.FC<Props> = ({ product, setIsLoadingForCartCountChange }) => {
const quoteRequest = useRequest()
const cartItems = useSelector((state: ICartRootState) => state.cart.items)
const transactionId = useSelector((state: { transactionId: TransactionIdRootState }) => state.transactionId)
const cartItemsPerBppPerProvider: DataPerBpp = getCartItemsPerBpp(cartItems as CartItemForRequest[])
const payLoadForQuoteRequest = getPayloadForQuoteRequest(cartItemsPerBppPerProvider, transactionId)
const payLoadForQuoteRequest = getPayloadForSelectRequest(cartItems)
const apiUrl = process.env.NEXT_PUBLIC_API_URL

const scholarshipId = useSelector((state: any) => state.scholarshipCart.scholarshipId)
const scholarshipTitle = useSelector((state: any) => state.scholarshipCart.scholarshipTitle)

const productQuantity = useSelector(
(state: ICartRootState) => state.cart.items.find(item => item.id === product.id)?.quantity
(state: ICartRootState) => state.cart.items.find(item => item.item.id === product.id)?.quantity
)
const [counter, setCounter] = useState(productQuantity)
const dispatch = useDispatch()
const { t } = useLanguage()
const router = useRouter()

const fetchQuotes = () => {
setIsLoadingForCartCountChange(true)
quoteRequest
.fetchData(`${apiUrl}/client/v2/get_quote`, 'POST', payLoadForQuoteRequest)
.fetchData(`${apiUrl}/select`, 'POST', payLoadForQuoteRequest)
.then(data => setIsLoadingForCartCountChange(false))
.catch(e => console.error(e))
}

function increment(product: RetailItem) {
function increment(product: ParsedItemModel) {
setCounter(prev => ++prev!)
dispatch(cartActions.addItemToCart({ product: product, quantity: 1 }))
fetchQuotes()
Expand All @@ -59,12 +51,6 @@ const CartItem: React.FC<Props> = ({ product, setIsLoadingForCartCountChange })
fetchQuotes()
}

function onInputNumberChangeHandler(e: React.ChangeEvent<HTMLInputElement>) {
if (+e.currentTarget.value >= 1 && +e.currentTarget.value <= 10) {
setCounter(+e.currentTarget.value)
}
}

return (
<>
<div className="flex items-center flex-wrap sm:my-4 sm:py-4 px-2 border-b-2 mb-4">
Expand Down Expand Up @@ -92,8 +78,10 @@ const CartItem: React.FC<Props> = ({ product, setIsLoadingForCartCountChange })
}}
>
<Image
src={product.descriptor.images[0]}
alt={product.descriptor.name}
// TODO :- To check this after we get image from select
src=""
// src={product.images[0].url}
alt={'product-name'}
className="object-contain"
/>
</div>
Expand Down Expand Up @@ -139,7 +127,7 @@ const CartItem: React.FC<Props> = ({ product, setIsLoadingForCartCountChange })
fontSize: '17px'
}}
>
{product.descriptor.name}
{product.name}
</div>
</a>
{/* </Link> */}
Expand All @@ -161,45 +149,11 @@ const CartItem: React.FC<Props> = ({ product, setIsLoadingForCartCountChange })

<ProductPrice
price={parseFloat(product.price.value) * counter!}
isLargeSize
currencyType={product.price.currency}
/>
</div>
</div>
</div>
<Box>
<Text
mb="10px"
fontSize={'17px'}
>
{t.scholarship}
</Text>
{scholarshipId ? (
<DetailsCard>
<Flex alignItems={'center'}>
<Image
alt="shippingBtnImage"
src={addShippingBtn}
/>
<Text ml={'8px'}>
<span
style={{
fontWeight: 'bold'
}}
>
‘{scholarshipId}-{scholarshipTitle}’
</span>
</Text>
</Flex>
<Text ml={'35px'}>{t.scholarshipApplied}</Text>
</DetailsCard>
) : (
<ScholarshipAddButton
image={'+'}
text={t.checkforScholarship}
handleButtonClick={() => router.push('/myScholarship')}
/>
)}
</Box>
</>
)
}
Expand Down
55 changes: 51 additions & 4 deletions apps/dsep/components/cart/CartList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,33 @@
import { Flex, Image, Box } from '@chakra-ui/react'
import React from 'react'
import { useSelector } from 'react-redux'
import { ICartRootState } from '../../lib/types/cart'
import { RetailItem } from '../../lib/types/products'
import { Item } from '../../lib/types/select.types'
import DetailsCard from '../detailsCard/DetailsCard'
import CartItem from './CartItem'
import addShippingBtn from '../../public/images/offer.svg'
import ScholarshipAddButton from '../scholarship/scholarshipAddButton/ScholarshipAddButton'
import { useRouter } from 'next/router'
import { useLanguage } from '../../hooks/useLanguage'
import { Typography } from '@beckn-ui/molecules'

interface CartListPropsModel {
setIsLoadingForCartCountChange: Function
cartItemsFromSelect: Item[]
}

const CartList: React.FC<CartListPropsModel> = ({ setIsLoadingForCartCountChange }) => {
const CartList: React.FC<CartListPropsModel> = ({ setIsLoadingForCartCountChange, cartItemsFromSelect }) => {
const router = useRouter()
const { t } = useLanguage()
const cartItems = useSelector((state: ICartRootState) => state.cart.items)
const scholarshipId = useSelector((state: any) => state.scholarshipCart.scholarshipId)
const scholarshipTitle = useSelector((state: any) => state.scholarshipCart.scholarshipTitle)

return (
<div>
<div className="w-full xl:max-w-[2100px] mx-auto">
{cartItems.length
? cartItems.map((cartItem: RetailItem) => {
{cartItemsFromSelect.length
? cartItemsFromSelect.map((cartItem: Item) => {
return (
<CartItem
setIsLoadingForCartCountChange={setIsLoadingForCartCountChange}
Expand All @@ -25,6 +37,41 @@ const CartList: React.FC<CartListPropsModel> = ({ setIsLoadingForCartCountChange
)
})
: null}
<Box>
<Box mb={'10px'}>
<Typography
text={t.scholarship}
fontSize={'17px'}
/>
</Box>
{scholarshipId ? (
<DetailsCard>
<Flex alignItems={'center'}>
<Image
alt="shippingBtnImage"
src={addShippingBtn}
/>

<Box ml={'8px'}>
<Typography
variant="subTextSemibold"
text={`${scholarshipId}-${scholarshipTitle}`}
/>
</Box>
</Flex>

<Box ml={'35px'}>
<Typography text={t.scholarshipApplied} />
</Box>
</DetailsCard>
) : (
<ScholarshipAddButton
image={'+'}
text={t.checkforScholarship}
handleButtonClick={() => router.push('/myScholarship')}
/>
)}
</Box>
</div>
</div>
)
Expand Down
Loading

0 comments on commit 80878a3

Please sign in to comment.