Fix some issues in Alex's document issues

.env

@@ -1,7 +1,7 @@
 NEXT_PUBLIC_API_URL="https://api.wiiqare.com"
 CALLBACK_URL="https://app.wiiqare.com"
 
-NEXTAUTH_URL=https://app.wiiqare.com
+NEXTAUTH_URL=http://localhost:3000
 NEXT_PUBLIC_GOOGLE_CLIENT_ID=89089276805-85nh0ek1kac55o2t5lo0gn0jr77cppsb.apps.googleusercontent.com
 GOOGLE_CLIENT_SECRET=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
 

components/atoms/Card/Provider/index.js

@@ -16,7 +16,7 @@ const CardProvider = ({
       {/* Provider */}
       <div className="flex gap-3">
         <div className="w-32 h-24 md:w-40 md:h-32 border py-2 rounded-lg overflow-hidden">
-          <Image
+          <img
             src={logoLink}
             className="object-contain w-full h-full"
             alt={name + ' Logo'}

components/atoms/Stepper/Forms/__snapshots__/kyc.test.js.snap

@@ -5,7 +5,26 @@ exports[`KYC should render the component 1`] = `
   <div
     class="flex flex-col gap-6 justify-center items-center"
   >
-    Verification d'identité...
+    <div
+      class="flex flex-col gap-2 items-center justify-center"
+    >
+      <div
+        aria-label="loading"
+        class="animate-spin inline-block w-4 h-4 border-[2px] border-current border-t-transparent text-primary rounded-full"
+        role="status"
+      >
+        <span
+          class="sr-only"
+        >
+          Loading...
+        </span>
+      </div>
+      <span
+        class="text-sm font-light"
+      >
+        Avant de continuer, nous devons vérifier votre identité...
+      </span>
+    </div>
   </div>
 </div>
 `;

components/atoms/Stepper/Forms/kyc.js

@@ -1,20 +1,8 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { useQRCode } from 'next-qrcode';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { FormContext } from '../../../../pages/voucher/buy';
-import Image from 'next/image';
-import logoDark from '../../../../public/images/logo_dark_2.png';
-import Link from 'next/link';
-import Fetcher from '../../../../lib/Fetcher';
-import { HiExclamation, HiLockClosed, HiOutlineEye } from 'react-icons/hi';
 import { useRouter } from 'next/router';
-import LoadingButton from '../../Loader/LoadingButton';
-import { useMutation } from 'react-query';
-import { checkKyc, sendSMSHash, setKyc } from '../../../../lib/helper';
-import { useFormik } from 'formik';
+import { checkKyc, setKyc } from '../../../../lib/helper';
 import { useSession } from 'next-auth/react';
-import Toast from '../../Toast';
-import { CurrencyFlag } from 'react-currency-flags/dist/components';
 
 function KYC() {
   const [statusID, setStatusID] = useState('IN_PROGRESS');
@@ -44,11 +32,10 @@ function KYC() {
 
       jsonData
         .then((data) => {
-          console.log(data);
+
           if (data.status != 'FINISHED') {
             setTimeout(checkStatus, 8000);
           } else {
-            console.log(data);
             setStatusID("FINISHED")
             if (data.result.identity.status != "FAILED") {
               setKyc({ accessToken: session.accessToken, expire: "2023/05", cardID: "ABCD", birthday: "1990-01-01", kyc: true })
@@ -60,7 +47,6 @@ function KYC() {
         })
         .catch((e) => setTimeout(checkStatus, 8000));
     } catch (error) {
-      console.log(error);
       setTimeout(checkStatus, 8000);
     }
   };
@@ -85,25 +71,86 @@ function KYC() {
   }
 
   useEffect(() => {
-    checkKyc({ accessToken: session.accessToken }).then((data) => {
-      if (data) {
-        setKycTest(false)
-      } else {
-        conversation()
-      }
-    }).catch((error) => conversation())
 
+    if ("geolocation" in navigator) {
+      navigator.geolocation.getCurrentPosition(async (position) => {
+        const latitude = position.coords.latitude;
+        const longitude = position.coords.longitude;
+
+        try {
+          const response = await fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${latitude}&longitude=${longitude}&localityLanguage=fr`);
+          const data = await response.json();
+
+          if (data.continent != "Afrique") {
+            checkKyc({ accessToken: session.accessToken }).then((data) => {
+              if (data) {
+                setKycTest(false)
+              } else {
+                conversation()
+              }
+            }).catch((error) => conversation())
+          } else {
+            setKycTest(false)
+          }
+        } catch (error) {
+          checkKyc({ accessToken: session.accessToken }).then((data) => {
+            if (data) {
+              setKycTest(false)
+            } else {
+              conversation()
+            }
+          }).catch((error) => conversation())
+        }
+      }, (error) => {
+        checkKyc({ accessToken: session.accessToken }).then((data) => {
+          if (data) {
+            setKycTest(false)
+          } else {
+            conversation()
+          }
+        }).catch((error) => conversation())
+
+      });
+    } else {
+      checkKyc({ accessToken: session.accessToken }).then((data) => {
+        if (data) {
+          setKycTest(false)
+        } else {
+          conversation()
+        }
+      }).catch((error) => conversation())
+    }
 
   }, []);
 
   return (
     <div className="flex flex-col gap-6 justify-center items-center">
       {!router.query.conversation ? (
-        <>{"Verification d'identité..."}</>
+        <>
+          <div className="flex flex-col gap-2 items-center justify-center">
+            <div
+              className="animate-spin inline-block w-4 h-4 border-[2px] border-current border-t-transparent text-primary rounded-full"
+              role="status"
+              aria-label="loading"
+            >
+              <span className="sr-only">{"Loading..."}</span>
+            </div>
+            <span className='text-sm font-light'>{"Avant de continuer, nous devons vérifier votre identité..."}</span>
+          </div>
+        </>
       ) : (
         <>
           {statusID == 'IN_PROGRESS' ? (
-            <>{"Vérification d'identité en cours"}</>
+            <><div className="flex flex-col gap-2 items-center justify-center">
+              <div
+                className="animate-spin inline-block w-4 h-4 border-[2px] border-current border-t-transparent text-white rounded-full"
+                role="status"
+                aria-label="loading"
+              >
+                <span className="sr-only">{"Loading..."}</span>
+              </div>
+              <span className='text-sm font-light'>{"Veuillez patientez pendant que la vérification d'identité est en cours, cela peut prendre un moment..."}</span>
+            </div></>
           ) : (
             <>
               {statusID != 'FINISHED' ? (

components/molecules/Navbar/Drawer.js

@@ -142,7 +142,7 @@ function Conversation({
               height={64}
             />
             <h3 className="font-semibold text-gray-700 flex flex-col">
-              Odette de WiiQare{' '}
+              WiiQare Support{' '}
               <span className="text-xs text-gray-500 font-light flex gap-1 items-center">
                 <span className="h-2 w-2 rounded-full bg-green-400 flex">
                   &nbsp;

components/molecules/Navbar/__snapshots__/Drawer.test.js.snap

@@ -62,7 +62,7 @@ exports[`Drawer should render the component 1`] = `
               <h3
                 class="font-semibold text-gray-700 flex flex-col"
               >
-                Odette de WiiQare
+                WiiQare Support
 
                 <span
                   class="text-xs text-gray-500 font-light flex gap-1 items-center"

components/organisms/Auth/Forms/__snapshots__/otp.test.js.snap

@@ -20,9 +20,9 @@ exports[`OTP renders 1`] = `
       Expire dans
 
       <span>
-        02
+        01
         :
-        00
+        59
       </span>
     </span>
   </div>

components/organisms/Auth/RegisterForm.js

@@ -70,8 +70,8 @@ const RegisterForm = () => {
     const newActiveStep =
       isLastStep() && !allStepsCompleted()
         ? // It's the last step, but not all steps have been completed,
-          // find the first step that has been completed
-          steps.findIndex((step, i) => !(i in completed))
+        // find the first step that has been completed
+        steps.findIndex((step, i) => !(i in completed))
         : activeStep + 1;
     setActiveStep(newActiveStep);
   };
@@ -105,7 +105,6 @@ const RegisterForm = () => {
               sx={{ maxWidth: 450, width: '100%' }}
               alternativeLabel
               activeStep={activeStep}
-              connector={<ColorlibConnector />}
             >
               {steps.map((label, index) => (
                 <Step key={label} completed={completed[index]}>

package.json

@@ -37,6 +37,7 @@
     "formik-stepper": "^2.1.4",
     "i18next": "^22.4.13",
     "i18next-browser-languagedetector": "^7.0.1",
+    "ipinfo": "^1.5.1",
     "jest": "^27.4.5",
     "material-ui-phone-number": "^3.0.0",
     "moment": "^2.29.4",

tests/pages/__snapshots__/register.test.js.snap

@@ -331,7 +331,7 @@ exports[`register page should render empty page when fetch fails 1`] = `
                 class="MuiStep-root MuiStep-horizontal MuiStep-alternativeLabel css-n7tliy-MuiStep-root"
               >
                 <div
-                  class="MuiStepConnector-root MuiStepConnector-horizontal MuiStepConnector-alternativeLabel Mui-disabled css-ae2tpe-MuiStepConnector-root"
+                  class="MuiStepConnector-root MuiStepConnector-horizontal MuiStepConnector-alternativeLabel Mui-disabled css-zpcwqm-MuiStepConnector-root"
                 >
                   <span
                     class="MuiStepConnector-line MuiStepConnector-lineHorizontal css-z7uhs0-MuiStepConnector-line"
@@ -381,7 +381,7 @@ exports[`register page should render empty page when fetch fails 1`] = `
                 class="MuiStep-root MuiStep-horizontal MuiStep-alternativeLabel css-n7tliy-MuiStep-root"
               >
                 <div
-                  class="MuiStepConnector-root MuiStepConnector-horizontal MuiStepConnector-alternativeLabel Mui-disabled css-ae2tpe-MuiStepConnector-root"
+                  class="MuiStepConnector-root MuiStepConnector-horizontal MuiStepConnector-alternativeLabel Mui-disabled css-zpcwqm-MuiStepConnector-root"
                 >
                   <span
                     class="MuiStepConnector-line MuiStepConnector-lineHorizontal css-z7uhs0-MuiStepConnector-line"