Juan/myb 000 fix bugs 1 (Blazity#47)

* MYB-2095 initiate 2nd time flow * chore: Update AccountDetails component to dynamically display account details * chore: Update AccountDetails component to dynamically display account details * Feature Fee Comparison (Blazity#35) * 🔧 (.trunk/plugins/trunk): Update plugin version to v1.6.2 in the trunk directory 🔧 (.vscode/settings.json): Add cSpell.words configuration for "Convertion" ♻️ (CurrencyConverter.tsx): Refactor ConvertionDetails component to include exchangeRateAmount, recipientGets, and totalAmountToConvert ♻️ (ConvertionDetails.tsx): Refactor comparePriceAmount to exchangeRateAmount for consistency ♻️ (FeeComparisonBottomSheet.tsx): Refactor handleAmountDetail function to include digits parameter for formatting consistency ♻️ (FeeComparisonBottomSheet.tsx): Refactor FeeComparisonBottomSheet component to include additional props and calculations for fee comparison table and savings calculation 📝 (page.tsx): Clean up code formatting and comments in ConfirmDetails component 📝 (RemitterInfoCard.tsx): Comment out bank account details section in RemitterInfoCard component 📝 (RemitterInfoContent.tsx): Comment out bank account details section in RemitterInfoContent component * ✨ (ConvertionDetails.tsx): add recipientGets and totalAmountToConvert props to improve conversion details display in CurrencyConverter component * ✨ (FeeComparisonBottomSheet.tsx): Add new props to FeeComparisonBottomSheet component for bank charges, beacon charges, total amount to convert, taxes, recipient gets, and exchange rate amount. * ♻️ (FeeComparisonBottomSheet.tsx): Change props to be optional for better flexibility and compatibility with other components * fix(typings): fixed errors with typings * Hotfix: deployment typings. (Blazity#36) * fix(typings): fixed errors with typings * fix(typings): fixed errors with typings * fix(typings): fixed errors with typings * fix(typings): fixed errors with typings * fix(typings): fixed errors with typings * fixed(error): fixing typing errors * 📝 (Header.tsx): Comment out unused SettingsButton image to improve code readability 🐛 (OtpInput.tsx): Fix issue where pasting OTP was not working correctly by adding handlePaste function to handle pasted data and update OTP input field * 📝 (Header.tsx): Comment out unused SettingsButton image to improve code readability (Blazity#38) 🐛 (OtpInput.tsx): Fix issue where pasting OTP was not working correctly by adding handlePaste function to handle pasted data and update OTP input field * Update BeneficiarySelectBottomSheet component to handle both 'kyc' and 'beni' types (Blazity#35) * Fix: first time user flow (Blazity#39) * 📝 (Header.tsx): Comment out unused SettingsButton image to improve code readability 🐛 (OtpInput.tsx): Fix issue where pasting OTP was not working correctly by adding handlePaste function to handle pasted data and update OTP input field * 🐛 (CurrencyConverter.tsx): fix logic to correctly check if user is first-time user based on API response 💡 (CurrencyConverter.tsx): refactor logic to use async/await for better readability and error handling * 📝 (CurrencyConverter.tsx): remove unnecessary console.log statement to clean up code and improve readability * Juan/myb 2095 beneficiary second flow (Blazity#41) * 📝 (Header.tsx): Comment out unused SettingsButton image to improve code readability 🐛 (OtpInput.tsx): Fix issue where pasting OTP was not working correctly by adding handlePaste function to handle pasted data and update OTP input field * 🐛 (CurrencyConverter.tsx): fix logic to correctly check if user is first-time user based on API response 💡 (CurrencyConverter.tsx): refactor logic to use async/await for better readability and error handling * 📝 (CurrencyConverter.tsx): remove unnecessary console.log statement to clean up code and improve readability * Update BeneficiarySelectBottomSheet component to handle both 'kyc' and 'beni' types (Blazity#35) * ✨ (UserInfoSelect.tsx): Add beniName and beniCode fields to the option interface for UserInfoSelect component (Blazity#43) ♻️ (page.tsx): Refactor variable assignments and type casting for dataKyc and selectedKyc to improve code readability ♻️ (page.tsx): Refactor variable assignments and type casting for dataBeni and selectedBeni to improve code readability ♻️ (page.tsx): Refactor variable assignments and type casting for amountSummary to improve code readability ♻️ (page.tsx): Refactor variable assignments and type casting for remitterInfo to improve code readability ♻️ (page.tsx): Refactor variable assignments and type casting for beneficiaryInfo to improve code readability ♻️ (page.tsx): Refactor handleContinueButton function to improve code readability ♻️ (page.tsx): Refactor JSX formatting for RemitterInfoCard and BeneficiaryInfoCard components for better readability ♻️ (page.tsx): Refactor JSX formatting for Button component for better readability ♻️ (page.tsx): Refactor JSX formatting for BottomSheet component for better readability --------- Signed-off-by: Gio M <[email protected]> Co-authored-by: Gio M <[email protected]> Co-authored-by: Gio M <[email protected]> * update selected value * update value selectedOption * update valueid in beneficiary * Refactor PayerBank page to handle quoteId and isFirstTime flow * Refactor BeneficiaryDetails component to handle isFirstTime flow and redirect to transaction details page based on API response * ✨ (layout.tsx): Add metadata object for SEO purposes and define site information and icons 🔧 (layout.tsx): Add favicon and various icon files for different platforms 🔧 (layout.tsx): Add browserconfig.xml and site.webmanifest files for better web app support * fix(deploy): typings * fix remitter second flow * fix beneficiari second flow * fix 2: Add analytocs (Blazity#40) * 🐛 (CurrencyConverter.tsx): fix logic to correctly check if user is first-time user based on API response 💡 (CurrencyConverter.tsx): refactor logic to use async/await for better readability and error handling * 📝 (CurrencyConverter.tsx): remove unnecessary console.log statement to clean up code and improve readability * 🔧 (.vscode/settings.json): add "splitio" to cSpell.words for spell check ✨ (app/layout.tsx): add Analytics component to track page views using Google Analytics and other providers ✨ (components/Analytics/Analytics.ts): implement Analytics component to initialize and track page views using different analytics providers ✨ (lib/analytics.ts): add support for Google Analytics, Datadog, and Split.io analytics providers ⬆️ (package.json): upgrade dependencies for "@datadog/browser-logs", "@datadog/browser-rum", and "@splitsoftware/splitio" * 🐛 (analytics.ts): fix trackInteractions property to trackUserInteractions for better clarity and consistency in code. Add default empty string values for environment variables to prevent potential undefined errors. * Delete .vscode/settings.json Signed-off-by: Gio M <[email protected]> * ✨ (env.sample): add environment variables for Next.js public API URL, version, agent, Auth0 secret, base URL, issuer base URL, client ID, client secret, Google Analytics ID, Datadog application ID, client token, site, app version, Split SDK key * fix(datadog): deployment --------- Signed-off-by: Gio M <[email protected]> * update title in beneficiary select bottom * Add TCS to the transaction details (Blazity#45) * ✨ (ConvertionDetails.tsx): Update handleAmountDetail function to accept currency as optional parameter 🐛 (page.tsx): Add tcs property to transaction details object 📝 (AmountSummaryContent.tsx): Add TCS amount detail item to amount summary content 📝 (amountSummary.ts): Add tcs property to AmountSummary type * fix(removelogs): removed logs * ♻️ (ConvertionDetails.tsx): refactor handleAmountDetail function parameters to improve code readability and consistency * ✨ (analytics.ts): refactor pageView method to dynamically import datadogRum library before calling startView method to improve performance and reduce bundle size * fix(deploy): added experiments * first time user update * remove clg * feat: Add TCS to the transaction details --------- Signed-off-by: Gio M <[email protected]> Co-authored-by: Andres Felipe Nunez B <[email protected]> Co-authored-by: Gio M <[email protected]> Co-authored-by: Gio M <[email protected]>
MyBeaconLabs · Sep 4, 2024 · 7e602a9 · 7e602a9
1 parent dd8d82f
commit 7e602a9
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 55 deletions.
diff --git a/app/payment-details/[idTransaction]/components/DetailsSwitch.tsx b/app/payment-details/[idTransaction]/components/DetailsSwitch.tsx
@@ -11,7 +11,7 @@ export const DetailsSwitch: React.FC<DetailsSwitchProps> = ({ activeTab, onChang
   const isDetailsActive = activeTab === 'paymentDetails';
   return (
     <div className="w-full h-full p-1 bg-[#EDEEED] rounded-lg gap-1 flex">
-      <div
+      {/* <div
         className={twMerge(
           'p-2 rounded-lg justify-center items-center flex flex-1',
           'transition-all duration-500 ease-out',
@@ -27,7 +27,7 @@ export const DetailsSwitch: React.FC<DetailsSwitchProps> = ({ activeTab, onChang
         >
           Payment Status
         </p>
-      </div>
+      </div> */}
 
       <div
         className={twMerge(

diff --git a/app/payment-details/[idTransaction]/components/Footer/Footer.tsx b/app/payment-details/[idTransaction]/components/Footer/Footer.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import { useRouter } from "next/navigation";
+
+
+export const Footer = () => {
+
+    const router = useRouter();
+
+    const handleOnclick = () => {
+        router.push('/');
+    }
+
+  return (
+    <footer className="w-full pt-4 pb-8 px-4 bg-[#FBF9F5] border-t border-[#E0E2DF] flex flex-col gap-4 fixed bottom-0">
+            <button className="self-stretch h-12 px-6 py-3 bg-[#1C4951] rounded-lg text-white text-base font-semibold leading-6">
+            Repeat this payment
+            </button>
+
+            <button onClick={handleOnclick} className="self-stretch px-4 py-3 rounded-lg text-[#1C4951] text-base font-semibold underline leading-6">
+            Go back to Home Page
+            </button>
+    </footer>
+  )
+}
diff --git a/app/payment-details/[idTransaction]/page.tsx b/app/payment-details/[idTransaction]/page.tsx
@@ -3,6 +3,8 @@ import { StatusCard } from './components/StatusCard';
 import { PageContent } from './components/PageContent';
 import { PaymentDetailsHeader } from './components/PaymentDetailsHeader';
 import { MasterService } from 'lib/masterService';
+import { redirect } from 'next/navigation';
+import { Footer } from './components/Footer/Footer';
 
 export const metadata: Metadata = {
   title: 'Payment details',
@@ -32,15 +34,7 @@ export default async function PaymentDetails({ params }: { params: any }) {
         <PageContent quote={quote} payment={payment} />
       </section>
 
-      <footer className="w-full pt-4 pb-8 px-4 bg-[#FBF9F5] border-t border-[#E0E2DF] flex flex-col gap-4 fixed bottom-0">
-        <button className="self-stretch h-12 px-6 py-3 bg-[#1C4951] rounded-lg text-white text-base font-semibold leading-6">
-          Repeat this payment
-        </button>
-
-        <button className="self-stretch px-4 py-3 rounded-lg text-[#1C4951] text-base font-semibold underline leading-6">
-          Go back to Home Page
-        </button>
-      </footer>
+      <Footer/>
     </div>
   );
 }
diff --git a/app/transaction-details/[quoteId]/components/UserInfoSelect/UserInfoSelect.tsx b/app/transaction-details/[quoteId]/components/UserInfoSelect/UserInfoSelect.tsx
@@ -34,10 +34,10 @@ export const UserInfoSelect: React.FC<UserInfoSelectProps> = ({
             <div className="flex justify-between">
                 <div className="flex gap-3">
                     <div className="h-10 w-10 rounded-full justify-center items-center flex" style={{ backgroundColor: getRandomColor() }}>
-                        <p className="text-base text-white">{getInitials(option.name || option.beniName)}</p>
+                        <p className="text-base text-white">{getInitials(option.name || option.beniName)}</p>                        
                     </div>
                     <div>
-                        <p className="text-sm font-semibold">{option.name}</p>
+                        <p className="text-sm font-semibold">{option.name || option.beniName}</p>
                         <p className="text-xs">A/c no. - {option.panKycId || option.proBeniId}</p>
                     </div>
                 </div>

diff --git a/app/transaction-details/upload-documents/components/DocumentsUpload/DocumentsUpload.tsx b/app/transaction-details/upload-documents/components/DocumentsUpload/DocumentsUpload.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 import Image from 'next/image';
-import InfoIcon from '../../../../../public/images/infoIcon.svg';
+// import InfoIcon from '../../../../../public/images/infoIcon.svg';
 import { UploadFile } from 'components/UploadFile/UploadFile';
 import { Button } from 'components/Button/Button';
 import Link from 'next/link';
@@ -39,12 +39,17 @@ const DocumentsUpload = ({ requiredDocs }: IRequiredDocs) => {
     } catch (error) {}
   };
 
+  const validateContinueButton = () => {
+    return Object.keys(uploadedDocs).length === 4 ;
+  }
+
+
   return (
     <section className="flex flex-col items-between">
       <div className="border mt-6 border-gray-300 rounded-lg p-4 bg-white">
         <div className="flex justify-between">
           <h3 className="font-bold">Document required for {requiredDocs?.[0]?.useCase}</h3>
-          <Image src={InfoIcon} alt="Info Icon" />
+          {/* <Image src={InfoIcon} alt="Info Icon" /> */}
         </div>
         <p className="text-xs text-secondary mt-2 mb-6">
           All documents must be in PDF, JPEG, JPG, or PNG format with a maximum size of 5MB.{' '}
@@ -78,6 +83,7 @@ const DocumentsUpload = ({ requiredDocs }: IRequiredDocs) => {
 
       <div className="pb-8">
         <Button
+        disabled={!validateContinueButton()}
           style="mt-10"
           onClick={() => {
             fetchDocUpdate();

diff --git a/components/UploadFile/UploadFile.tsx b/components/UploadFile/UploadFile.tsx
@@ -3,7 +3,7 @@
 import { Button } from 'components/Button/Button';
 import { getCookie } from 'cookies-next';
 import { MasterService } from 'lib/masterService';
-import React, { useRef, useState } from 'react';
+import React, { useRef } from 'react';
 import DeleteIcon from '../../public/images/delete.svg';
 import Image from 'next/image';
 
@@ -66,49 +66,51 @@ export const UploadFile: React.FC<UploadFileProps> = ({
 
   return (
     <>
-      <div className="flex justify-between">
+      <div className="flex justify-between items-center">
         <div>
           <h3 className="font-semibold text-sm">{title}</h3>
           <p className="text-xs text-secondary">{subtitle}</p>
         </div>
-        {docTypeId1 && !isUploaded?.[docTypeId1] && (
-          <Button intent={'secondary'} size={'sm'} onClick={() => handleButtonClick(1)}>
-            Upload
-          </Button>
-        )}
-        <input
-          type="file"
-          ref={fileInputRef1}
-          style={{ display: 'none' }}
-          accept="image/*,.pdf"
-          onChange={(e) => handleFileChange(e, docType1!, docTypeId1!)}
-          className="border border-gray-300 rounded-lg p-2 w-full"
-        />
-        {docTypeId1 && isUploaded?.[docTypeId1] && (
-          <figure
-            onClick={() => handleRemove(docTypeId1!)}
-            className="p-2 bg-neutral rounded-full w-9 flex justify-center items-center"
-          >
-            <Image src={DeleteIcon} alt="delete icon" />
-          </figure>
-        )}
-        {docTypeId2 && !isUploaded?.[docTypeId2] ? (
-          <Button intent={'secondary'} size={'sm'} onClick={() => handleButtonClick(2)}>
-            Upload
-          </Button>
-        ) : (
-          ''
-        )}
-        {docTypeId2 && isUploaded?.[docTypeId2] ? (
-          <figure
-            onClick={() => handleRemove(docTypeId2!)}
-            className="p-2 bg-neutral rounded-full w-9 flex justify-center items-center"
-          >
-            <Image src={DeleteIcon} alt="delete icon" />
-          </figure>
-        ) : (
-          ''
-        )}
+        <section className='flex flex-col gap-3 items-end'>
+            {docTypeId1 && !isUploaded?.[docTypeId1] && (
+              <Button intent={'secondary'} size={'sm'} onClick={() => handleButtonClick(1)}>
+                Upload {docName1}
+              </Button>
+            )}
+            <input
+              type="file"
+              ref={fileInputRef1}
+              style={{ display: 'none' }}
+              accept="image/*,.pdf"
+              onChange={(e) => handleFileChange(e, docType1!, docTypeId1!)}
+              className="border border-gray-300 rounded-lg p-2 w-full"
+            />
+            {docTypeId1 && isUploaded?.[docTypeId1] && (
+              <figure
+                onClick={() => handleRemove(docTypeId1!)}
+                className="p-2 bg-neutral rounded-full w-9 flex justify-center items-center"
+              >
+                <Image src={DeleteIcon} alt="delete icon" />
+              </figure>
+            )}
+            {docTypeId2 && !isUploaded?.[docTypeId2] ? (
+              <Button intent={'secondary'} size={'sm'} onClick={() => handleButtonClick(2)}>
+                Upload {docName2}
+              </Button>
+            ) : (
+              ''
+            )}
+            {docTypeId2 && isUploaded?.[docTypeId2] ? (
+              <figure
+                onClick={() => handleRemove(docTypeId2!)}
+                className="p-2 bg-neutral rounded-full w-9 flex justify-center items-center"
+              >
+                <Image src={DeleteIcon} alt="delete icon" />
+              </figure>
+            ) : (
+              ''
+            )}
+        </section>
       </div>
       <input
         style={{ display: 'none' }}