From 0a50f8a55b6031193b2842037d3c08fdc5ca2ffd Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Tue, 7 May 2024 12:47:01 +0530
Subject: [PATCH 1/2] fix: compressed layout dynamic fields card

---
 src/Components/DynamicFields.res | 119 ++++++++++++++++++++-----------
 1 file changed, 79 insertions(+), 40 deletions(-)

diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
index 52135e3ab..76732014c 100644
--- a/src/Components/DynamicFields.res
+++ b/src/Components/DynamicFields.res
@@ -343,16 +343,38 @@ let make = (
 
   let spacedStylesForBiilingDetails = isSpacedInnerLayout ? "p-2" : "my-2"
   let spacedStylesForCity = isSpacedInnerLayout ? "p-2" : ""
+  let errorMsgInCompressedLayout = if cardError->String.length > 0 {
+    cardError
+  } else if expiryError->String.length > 0 {
+    expiryError
+  } else if cvcError->String.length > 0 {
+    cvcError
+  } else {
+    ""
+  }
 
   <RenderIf condition={fieldsArr->Array.length > 0}>
     {<>
+      <RenderIf
+        condition={dynamicFieldsToRenderOutsideBilling->Array.length > 0 && !isSpacedInnerLayout}>
+        <div
+          style={ReactDOMStyle.make(
+            ~marginBottom="5px",
+            ~marginTop="5px",
+            ~fontSize=themeObj.fontSizeLg,
+            ~opacity="0.6",
+            (),
+          )}>
+          {localeString.cardHeader->React.string}
+        </div>
+      </RenderIf>
       {dynamicFieldsToRenderOutsideBilling
       ->Array.mapWithIndex((item, index) => {
         <div
           key={`outside-billing-${index->Int.toString}`}
           className="flex flex-col w-full place-content-between"
           style={ReactDOMStyle.make(
-            ~marginTop=index !== 0 ? themeObj.spacingGridColumn : "",
+            ~marginTop=index !== 0 && isSpacedInnerLayout ? themeObj.spacingGridColumn : "",
             ~gridColumnGap=themeObj.spacingGridRow,
             (),
           )}>
@@ -416,45 +438,61 @@ let make = (
               placeholder="123"
             />
           | CardExpiryAndCvc =>
-            <div className="flex gap-10">
-              <PaymentInputField
-                fieldName=localeString.validThruText
-                isValid=isExpiryValid
-                setIsValid=setIsExpiryValid
-                value=cardExpiry
-                onChange=changeCardExpiry
-                onBlur=handleExpiryBlur
-                errorString=expiryError
-                paymentType
-                type_="tel"
-                appearance=config.appearance
-                maxLength=7
-                inputRef=expiryRef
-                placeholder="MM / YY"
-              />
-              <PaymentInputField
-                fieldName=localeString.cvcTextLabel
-                isValid=isCVCValid
-                setIsValid=setIsCVCValid
-                value=cvcNumber
-                onChange=changeCVCNumber
-                onBlur=handleCVCBlur
-                errorString=cvcError
-                paymentType
-                rightIcon={CardUtils.setRightIconForCvc(
-                  ~cardEmpty,
-                  ~cardInvalid,
-                  ~color=themeObj.colorIconCardCvcError,
-                  ~cardComplete,
-                )}
-                appearance=config.appearance
-                type_="tel"
-                className="tracking-widest w-full"
-                maxLength=4
-                inputRef=cvcRef
-                placeholder="123"
-              />
-            </div>
+            <>
+              <div className={`flex ${isSpacedInnerLayout ? "gap-10" : ""}`}>
+                <PaymentInputField
+                  fieldName=localeString.validThruText
+                  isValid=isExpiryValid
+                  setIsValid=setIsExpiryValid
+                  value=cardExpiry
+                  onChange=changeCardExpiry
+                  onBlur=handleExpiryBlur
+                  errorString=expiryError
+                  paymentType
+                  type_="tel"
+                  appearance=config.appearance
+                  maxLength=7
+                  inputRef=expiryRef
+                  placeholder="MM / YY"
+                />
+                <PaymentInputField
+                  fieldName=localeString.cvcTextLabel
+                  isValid=isCVCValid
+                  setIsValid=setIsCVCValid
+                  value=cvcNumber
+                  onChange=changeCVCNumber
+                  onBlur=handleCVCBlur
+                  errorString=cvcError
+                  paymentType
+                  rightIcon={CardUtils.setRightIconForCvc(
+                    ~cardEmpty,
+                    ~cardInvalid,
+                    ~color=themeObj.colorIconCardCvcError,
+                    ~cardComplete,
+                  )}
+                  appearance=config.appearance
+                  type_="tel"
+                  className="tracking-widest w-full"
+                  maxLength=4
+                  inputRef=cvcRef
+                  placeholder="123"
+                />
+              </div>
+              <RenderIf
+                condition={!isSpacedInnerLayout && errorMsgInCompressedLayout->String.length > 0}>
+                <div
+                  className="Error pt-1"
+                  style={ReactDOMStyle.make(
+                    ~color=themeObj.colorDangerText,
+                    ~fontSize=themeObj.fontSizeSm,
+                    ~alignSelf="start",
+                    ~textAlign="left",
+                    (),
+                  )}>
+                  {React.string(errorMsgInCompressedLayout)}
+                </div>
+              </RenderIf>
+            </>
           | Currency(currencyArr) =>
             <DropdownField
               appearance=config.appearance
@@ -470,6 +508,7 @@ let make = (
                 <div
                   style={ReactDOMStyle.make(
                     ~marginBottom="5px",
+                    ~marginTop="5px",
                     ~fontSize=themeObj.fontSizeLg,
                     ~opacity="0.6",
                     (),

From 074d0bfdaafcba6edd7cbec980a15e967e6bb108 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Tue, 7 May 2024 14:10:01 +0530
Subject: [PATCH 2/2] fix: card comment addressed

---
 src/Components/DynamicFields.res | 61 +++++++++++++++++---------------
 1 file changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
index 76732014c..78f1515ee 100644
--- a/src/Components/DynamicFields.res
+++ b/src/Components/DynamicFields.res
@@ -355,19 +355,6 @@ let make = (
 
   <RenderIf condition={fieldsArr->Array.length > 0}>
     {<>
-      <RenderIf
-        condition={dynamicFieldsToRenderOutsideBilling->Array.length > 0 && !isSpacedInnerLayout}>
-        <div
-          style={ReactDOMStyle.make(
-            ~marginBottom="5px",
-            ~marginTop="5px",
-            ~fontSize=themeObj.fontSizeLg,
-            ~opacity="0.6",
-            (),
-          )}>
-          {localeString.cardHeader->React.string}
-        </div>
-      </RenderIf>
       {dynamicFieldsToRenderOutsideBilling
       ->Array.mapWithIndex((item, index) => {
         <div
@@ -380,22 +367,38 @@ let make = (
           )}>
           {switch item {
           | CardNumber =>
-            <PaymentInputField
-              fieldName=localeString.cardNumberLabel
-              isValid=isCardValid
-              setIsValid=setIsCardValid
-              value=cardNumber
-              onChange=changeCardNumber
-              onBlur=handleCardBlur
-              rightIcon={icon}
-              errorString=cardError
-              paymentType
-              type_="tel"
-              appearance=config.appearance
-              maxLength=maxCardLength
-              inputRef=cardRef
-              placeholder="1234 1234 1234 1234"
-            />
+            <>
+              <RenderIf
+                condition={dynamicFieldsToRenderOutsideBilling->Array.length > 0 &&
+                  !isSpacedInnerLayout}>
+                <div
+                  style={ReactDOMStyle.make(
+                    ~marginBottom="5px",
+                    ~marginTop="5px",
+                    ~fontSize=themeObj.fontSizeLg,
+                    ~opacity="0.6",
+                    (),
+                  )}>
+                  {localeString.cardHeader->React.string}
+                </div>
+              </RenderIf>
+              <PaymentInputField
+                fieldName=localeString.cardNumberLabel
+                isValid=isCardValid
+                setIsValid=setIsCardValid
+                value=cardNumber
+                onChange=changeCardNumber
+                onBlur=handleCardBlur
+                rightIcon={icon}
+                errorString=cardError
+                paymentType
+                type_="tel"
+                appearance=config.appearance
+                maxLength=maxCardLength
+                inputRef=cardRef
+                placeholder="1234 1234 1234 1234"
+              />
+            </>
           | CardExpiryMonth
           | CardExpiryYear
           | CardExpiryMonthAndYear =>