Merge branch 'issue-payment-page-dsep' into develop-1.1.0

beckn · Sep 30, 2024 · eab3f5c · eab3f5c
2 parents a2ec4e5 + 500c654
commit eab3f5c
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 73 deletions.
diff --git a/apps/dsep/locales/en.ts b/apps/dsep/locales/en.ts
@@ -457,7 +457,8 @@ const en: { [key: string]: string } = {
   searchLearning: ' Search Learning',
   ScholarshipConfirmation: 'We will evaluate your application ID :',
   andRespond: 'and respond as soon as possible.',
-  unabletoTrack: 'Unable to get the track url'
+  unabletoTrack: 'Unable to get the track url',
+  cardNumber: '**** **** **** 1234'
 }
 
 export default en
diff --git a/apps/dsep/pages/orderConfirmation.tsx b/apps/dsep/pages/orderConfirmation.tsx
@@ -51,7 +51,7 @@ const OrderConfirmation = () => {
       const axiosConfig = {
         headers: {
           Authorization: `Bearer ${bearerToken}`,
-          'Content-Type': 'application/json' // You can set the content type as needed
+          'Content-Type': 'application/json'
         }
       }
       axios

diff --git a/apps/dsep/pages/paymentMode.tsx b/apps/dsep/pages/paymentMode.tsx
@@ -1,79 +1,53 @@
 import React, { useState } from 'react'
-import { Box, Flex, Text, Image, Card, CardBody } from '@chakra-ui/react'
 import { useRouter } from 'next/router'
 import { useDispatch } from 'react-redux'
-import Button from '../components/button/Button'
-import CardWithCheckBox from '../components/card/Card'
 import { useLanguage } from '../hooks/useLanguage'
-import creditCardImg from '../public/images/creditCardImg.svg'
 import { cartActions } from '../store/cart-slice'
+import { PaymentMethodSelection } from '@beckn-ui/common'
+import { testIds } from '@shared/dataTestIds'
+import Visa from '@public/images/visa.svg'
+import masterCard from '@public/images/masterCard.svg'
 
 function PaymentMode() {
-  const [checked, setChecked] = useState(false)
-
   const { t } = useLanguage()
   const router = useRouter()
   const dispatch = useDispatch()
 
   return (
     <>
-      <Box
-        height={'72vh'}
-        position={'relative'}
-      >
-        {/* <AppHeader appHeaderText={t.selectPaymentMethod} /> */}
-        <Box>
-          <Flex
-            justifyContent={'space-between'}
-            alignItems={'center'}
-            fontSize={'17px'}
-            mb={'10px'}
-          >
-            <Text className="text-ellipsis">{t.cards}</Text>
-            <Text
-              color={'rgba(var(--color-primary))'}
-              fontSize={'15px'}
-            >
-              {t.addCard}
-            </Text>
-          </Flex>
-          <Card
-            className="border_radius_all"
-            mb={'20px'}
-          >
-            <CardBody padding={'15px 20px'}>
-              {/* eslint-disable-next-line jsx-a11y/alt-text */}
-              <Image src={creditCardImg} />
-            </CardBody>
-          </Card>
-        </Box>
-        <Text
-          marginBottom={'8px'}
-          fontSize={'17px'}
-        >
-          Other
-        </Text>
-        <CardWithCheckBox
-          setChecked={setChecked}
-          paymentMethod={t.payOnline}
-        />
-      </Box>
-      <Box
-        position={'absolute'}
-        bottom={'10px'}
-        width={'90%'}
-      >
-        <Button
-          buttonText={t.confirmOrder}
-          background={'rgba(var(--color-primary))'}
-          color={'rgba(var(--text-color))'}
-          isDisabled={!checked}
-          handleOnClick={() => {
-            dispatch(cartActions.clearCart())
-            router.push('/orderConfirmation')
-          }}
-        />
-      </Box>
+      <PaymentMethodSelection
+        t={key => t[key]}
+        handleOrderConfirmation={() => {
+          dispatch(cartActions.clearCart())
+          router.push('/orderConfirmation')
+        }}
+        paymentMethods={[
+          {
+            category: 'Credit & Debit Cards',
+            img: Visa,
+            paymentMethod: t.cardNumber,
+            paymentMethodNet: t.cardNumber,
+            disabled: true,
+            dataTest: testIds.paymentpage_visa
+          },
+          {
+            category: 'Credit & Debit Cards',
+            img: masterCard,
+            paymentMethod: t.cardNumber,
+            paymentMethodNet: t.cardNumber,
+            disabled: true,
+            dataTest: testIds.paymentpage_masterCard
+          },
+
+          {
+            category: 'Other',
+            paymentMethod: t.payOnline,
+            paymentMethodNet: t.cashOnDelivery,
+            disabled: false,
+            dataTest: testIds.paymentpage_CashOnDelivery
+          }
+        ]}
+      />
     </>
   )
 }

diff --git a/apps/dsep/public/images/masterCard.svg b/apps/dsep/public/images/masterCard.svg
diff --git a/apps/dsep/public/images/visa.svg b/apps/dsep/public/images/visa.svg
diff --git a/package.json b/package.json
@@ -101,4 +101,3 @@
     "ts-jest": "^29.1.1"
   }
 }
-
diff --git a/packages/common/src/components/paymentDetailsCard/PaymentDetailsCard.tsx b/packages/common/src/components/paymentDetailsCard/PaymentDetailsCard.tsx
@@ -75,12 +75,14 @@ const PaymentDetailsCard: React.FC<PaymentDetailsCardProps> = ({ t, paymentMetho
                         alignItems={'center'}
                         cursor={'pointer'}
                       >
-                        <Image
-                          src={method.img}
-                          w={'62px'}
-                          h={'40px'}
-                          data-test={testIds.paymentpage_image}
-                        />
+                        {method.img && (
+                          <Image
+                            src={method.img}
+                            w={'62px'}
+                            h={'40px'}
+                            data-test={testIds.paymentpage_image}
+                          />
+                        )}
                         <Text
                           fontSize={'15px'}
                           fontWeight={400}

diff --git a/packages/common/src/components/paymentDetailsCard/PaymentDetailsCard.types.ts b/packages/common/src/components/paymentDetailsCard/PaymentDetailsCard.types.ts
@@ -3,7 +3,7 @@ import { TranslationProps } from '../settings/settings.types'
 export interface PaymentMethod {
   paymentMethod?: string
   paymentMethodNet?: string
-  img: string
+  img?: string
   category: 'Credit & Debit Cards' | 'UPI' | 'Other'
   disabled?: boolean
   dataTest?: string