Merge pull request #3878 from beckn/staging-1.1.0

Staging 1.1.0

Author: aniketceminds

apps/deg-ec/pages/home.tsx

@@ -94,18 +94,18 @@ const Home = () => {
           code: 'USA'
         }
       }
-    },
-    {
-      name: 'IND',
-      fullName: 'IND',
-      flag: '/images/india.svg',
-      data: {
-        country: {
-          name: 'India',
-          code: 'IND'
-        }
-      }
     }
+    // {
+    //   name: 'IND',
+    //   fullName: 'IND',
+    //   flag: '/images/india.svg',
+    //   data: {
+    //     country: {
+    //       name: 'India',
+    //       code: 'IND'
+    //     }
+    //   }
+    // }
   ]
 
   const experiences: Array<{ title: string; icon: string }> = [

apps/deg-rental/pages/confirmRent.tsx

@@ -28,7 +28,7 @@ export default function ConfirmRent() {
   const rentalDate = selectedProduct.item.fulfillments[0].state?.name
 
   const handleConfirm = async () => {
-    const formTimestamp = Math.floor(new Date(startDate).getTime() / 1000)
+    const formTimestamp = Math.floor(new Date(startDate).getTime() / 1000 + 1)
     const toTimestamp = Math.floor(new Date(endDate).getTime() / 1000)
     localStorage.setItem('fromTimestamp', formTimestamp.toString())
     localStorage.setItem('toTimestamp', toTimestamp.toString())

apps/deg-rental/utilities/checkout-util.ts

@@ -88,9 +88,9 @@ export const generateRentalInitPayload = async (
 export function calculateDuration(from: number, to: number): number {
   if (!from || !to) return 0 // Handle invalid inputs
 
-  // Convert milliseconds to hours
+  // Convert milliseconds to hours and round up
   const diffInMs = to - from
-  const diffInHours = Math.floor(diffInMs / (1000 * 60 * 60))
+  const diffInHours = Math.ceil(diffInMs / (1000 * 60 * 60))
 
   return diffInHours
 }

apps/deg-retail/components/RentalServiceModal/RentalServiceModal.tsx

@@ -681,7 +681,7 @@ const RentalServiceModal: React.FC<RentalServiceModalProps> = ({ isOpen, onClose
               top="50%"
               transform="translateY(-50%)"
               pointerEvents="none"
-              zIndex={1}
+              zIndex={0}
             >{`${currencyMap[getCountryCode().country.code as keyof typeof currencyMap]} `}</Text>
             <Text color="gray.600">{` per hour`}</Text>
           </Flex>

apps/deg-retail/pages/index.tsx

@@ -88,6 +88,8 @@ const HomePage = () => {
         left={'0'}
         background="#fff"
         boxShadow={'0px 4px 20px 0px rgba(0, 0, 0, 0.07)'}
+        pl={'20px'}
+        pr={'20px'}
       >
         <Flex
           className="sub-header-DEG"
@@ -116,31 +118,33 @@ const HomePage = () => {
             />
           )}
         </Flex>
-        {user?.deg_wallet ? (
-          <></>
-        ) : (
-          // <Select
-          //   variant="unstyled"
-          //   placeholder={`/subj****${user?.deg_wallet.deg_wallet_id.slice(-4)}`}
-          //   value=""
-          //   style={{
-          //     pointerEvents: 'none'
-          //   }}
-          // />
-          <BecknButton
-            text="Connect Wallet"
-            handleClick={() => handleModalOpen('wallet')}
-            sx={{
-              width: '93px',
-              height: '30px',
-              fontSize: '10px',
-              fontWeight: '400',
-              padding: '10px',
-              borderRadius: '6px',
-              mb: 'unset'
-            }}
-          />
-        )}
+        <Box>
+          {user?.deg_wallet ? (
+            <></>
+          ) : (
+            // <Select
+            //   variant="unstyled"
+            //   placeholder={`/subj****${user?.deg_wallet.deg_wallet_id.slice(-4)}`}
+            //   value=""
+            //   style={{
+            //     pointerEvents: 'none'
+            //   }}
+            // />
+            <BecknButton
+              text="Connect Wallet"
+              handleClick={() => handleModalOpen('wallet')}
+              sx={{
+                width: '93px',
+                height: '30px',
+                fontSize: '10px',
+                fontWeight: '400',
+                padding: '10px',
+                borderRadius: '6px',
+                mb: 'unset'
+              }}
+            />
+          )}
+        </Box>
       </Flex>
       <Box
         background="#deeaf5"

apps/deg-retail/pages/paymentMode.tsx

@@ -118,8 +118,8 @@ const EMIApplicationModal = ({
   const toast = useToast()
   const dispatch = useDispatch()
   const { user } = useSelector((state: AuthRootState) => state.auth)
-  const [selectedEmiPlan, setSelectedEmiPlan] = useState<string | null>(null)
-  const selectedEmi = useSelector((state: any) => state.selectedEmi.apiResponse?.[0]?.message.order.items) || 0
+  const selectedEmi = useSelector((state: any) => state.selectedEmi.apiResponse?.[0]?.message.order.items) || []
+
   const monthlyInstallment = useSelector((state: any) => state.selectedEmi.emiDetails)
 
   useEffect(() => {
@@ -194,14 +194,15 @@ const EMIApplicationModal = ({
     //   value = value.toUpperCase() // Convert PAN to uppercase
     //   if (value.length > 10) return // Limit to 10 characters
     // }
+    if (field === 'ssNumber' && !/^\d*$/.test(value)) {
+      return // Only allow digits in SS number
+    }
 
     setFormData(prev => ({
       ...prev,
       [field]: value
     }))
 
-    dispatch(emiFormActions.updateForm({ [field]: value }))
-
     // Clear error when user starts typing
     if (errors[field]) {
       setErrors(prev => ({
@@ -231,6 +232,7 @@ const EMIApplicationModal = ({
   }
 
   const handleSubmit = () => {
+    dispatch(emiFormActions.updateForm(formData))
     if (validateForm()) {
       console.log('Form submitted:', formData)
       // Add your submission logic here
@@ -328,7 +330,7 @@ const EMIApplicationModal = ({
                 <Typography
                   fontWeight="400"
                   fontSize="12px"
-                  text="Verified by Vault"
+                  text="Verified by Wallet"
                   color="#53A052"
                 />
               )}
@@ -501,14 +503,22 @@ const EMIApplicationModal = ({
                 <Typography
                   fontWeight="400"
                   fontSize="12px"
-                  text="Verified by Vault"
+                  text="Verified by Wallet"
                   color="#53A052"
                 />
               )}
             </Flex>
             <Input
-              value={formData.ssNumber ? formData.ssNumber.replace(/^(.{5})/g, '*****') : ''}
+              value={
+                formData.ssNumber
+                  ? document.activeElement?.id === 'ssInput'
+                    ? formData.ssNumber
+                    : formData.ssNumber.replace(/^(.{5})/g, '*****')
+                  : ''
+              }
+              id="ssInput"
               onChange={e => handleInputChange('ssNumber', e.target.value)}
+              maxLength={9}
               paddingInlineStart="unset"
               _focusVisible={{ borderColor: errors.ssNumber ? 'red.500' : '#4398E8' }}
               border="unset"
@@ -540,7 +550,7 @@ const EMIApplicationModal = ({
                 <Typography
                   fontWeight="400"
                   fontSize="12px"
-                  text="Verified by Vault"
+                  text="Verified by Wallet"
                   color="#53A052"
                 />
               )}
@@ -963,7 +973,22 @@ const PaymentMode = (props: PaymentMethodSelectionProps) => {
   const handleChange = (id: string) => {
     setSelectedPaymentMethod(id)
     setCheckedPayment(id === checkedState ? null : id)
+    dispatch(
+      setEmiDetails({
+        emiDetails: [
+          {
+            annualInterestRate: 0,
+            interestAmount: 0,
+            monthlyInstallment: 0,
+            totalCost: 0,
+            processingFee: 0,
+            deliveryCharges: deliveryCharges
+          }
+        ]
+      })
+    )
     setSelectedPlan('')
+    setSelectedEMIPlanItemId('')
   }
 
   const handleFinanceOnConfirm = (data: FormData) => {
@@ -1556,6 +1581,7 @@ const PaymentMode = (props: PaymentMethodSelectionProps) => {
                               className="radio-for-emi"
                               isChecked={selectedPlan === plan.id}
                               onChange={() => {
+                                setCheckedPayment(null)
                                 setSelectedPlan(plan.id)
                                 setSelectedEMIPlanItemId('') // Reset child selection when parent changes
                                 handleEmiSelect(plan.id)
@@ -1716,6 +1742,7 @@ const PaymentMode = (props: PaymentMethodSelectionProps) => {
                                           top="10px"
                                           isChecked={selectedEMIPlanItemId === item.id}
                                           onChange={() => {
+                                            setCheckedPayment(null)
                                             setSelectedEMIPlanItemId(item.id)
                                             // Always select the parent plan when an item is selected
                                             setSelectedPlan(plan.id)
@@ -1924,7 +1951,8 @@ const PaymentMode = (props: PaymentMethodSelectionProps) => {
         ) : (
           openModal &&
           !showSuccess &&
-          !checkedPayment && (
+          !checkedPayment &&
+          selectedEmi.length > 0 && (
             <Box className="btm-modal-payment">
               <EMIApplicationModal
                 isOpen={openModal}

apps/deg-retail/pages/retailOrderConfirmation.tsx

@@ -32,6 +32,7 @@ import { feedbackActions } from '@beckn-ui/common'
 import { getRentalPayloadForConfirm } from '@utils/confirm-utils'
 import { getPayloadForConfirm, getPayloadForOrderHistoryPost } from '@utils/payload'
 import { calculateDuration } from '@utils/checkout-util'
+import { EmiDetail } from '@store/emiSelect-slice'
 
 const retailOrderConfirmation = () => {
   const { t } = useLanguage()
@@ -81,7 +82,7 @@ const retailOrderConfirmation = () => {
   const initResponse = useSelector((state: CheckoutRootState) => state.checkout.initResponse)
   const confirmResponse = useSelector((state: CheckoutRootState) => state.checkout.confirmResponse)
   const cartItems = useSelector((state: ICartRootState) => state.cart.items)
-  const emiDetails = useSelector((state: any) => state.selectedEmi.emiDetails[0])
+  const emiDetails: EmiDetail = useSelector((state: any) => state.selectedEmi.emiDetails[0])
   const strapiUrl = process.env.NEXT_PUBLIC_STRAPI_URL
 
   const getOrderCategoryId = (type: any) => {

apps/deg-retail/store/emiSelect-slice.ts

@@ -1,11 +1,13 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 
-interface EmiDetail {
+export interface EmiDetail {
   monthlyInstallment: number
   interestAmount: number
   annualInterestRate: number
   totalCost: number
   payableAmount?: number
+  processingFee?: number
+  deliveryCharges?: number
 }
 
 interface ApiResponse {

apps/deg-retail/styles/globals.css

@@ -517,11 +517,3 @@ input {
 .-product_summary_container .css-afhyro {
   background: #fff;
 }
-.sub-header-DEG {
-  padding: 0 10rem;
-}
-@media screen and (min-width: 280px) and (max-width: 991px) {
-  .sub-header-DEG {
-    padding: 0 20px;
-  }
-}

apps/deg-retail/utilities/payload.ts

@@ -38,8 +38,8 @@ export const getPayloadForConfirm = (initResponse: InitResponseModel[], cartAndE
                         Number(item.price.value) * cartAndEmiDetails.cartDetails[order.provider.id][item.id].quantity
                       )
                     }, 0) +
-                    Number(cartAndEmiDetails.emiDetails.deliveryCharges) +
-                    Number(cartAndEmiDetails.emiDetails.processingFee)
+                    Number(cartAndEmiDetails?.emiDetails?.deliveryCharges || 0) +
+                    Number(cartAndEmiDetails?.emiDetails?.processingFee || 0)
                   }`,
                   currency: order.quote?.price?.currency
                 },