Add fullname for beneficiary and payer

.vscode/settings.json

@@ -7,5 +7,5 @@
   "[javascript]": {
     "editor.defaultFormatter": "vscode.typescript-language-features"
   },
-  "editor.tabSize": 2
+  "editor.tabSize": 4,
 }

components/atoms/Card/Provider/index.js

@@ -16,10 +16,11 @@ 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'}
+            loading='lazy'
           />
         </div>
 

components/atoms/Stepper/Forms/identity2.js

@@ -166,6 +166,20 @@ function Identity2() {
         homeAddress: item.homeAddress,
       }),
     );
+
+    localStorage.setItem('dispatchBuyVoucher', JSON.stringify(
+      {
+        ...client.patient,
+        id: item.id,
+        country: item.country,
+        firstName: item.firstName,
+        lastName: item.lastName,
+        email: item.email,
+        phoneNumber: item.phoneNumber,
+        city: item.city,
+        homeAddress: item.homeAddress,
+      }
+    ))
     setActiveStepIndex(activeStepIndex + 1);
   };
 
@@ -284,7 +298,7 @@ function Identity2() {
                                   <div className="w-20 h-2O relative">
                                     <img
                                       src={
-                                        index % 2 ? avatar : '/images/homme.png'
+                                        index % 2 ? '/images/femme.png' : '/images/homme.png'
                                       }
                                       className="object-cover rounded-xl"
                                       width={80}
@@ -293,8 +307,8 @@ function Identity2() {
                                     />
                                     <span
                                       className={`${activeIndexSlide === index
-                                          ? ''
-                                          : 'hidden'
+                                        ? ''
+                                        : 'hidden'
                                         } p-1.5 rounded-lg bg-blue-600 text-white absolute right-0 bottom-0`}
                                     >
                                       <CiCircleCheck size={18} />
@@ -412,8 +426,8 @@ function Identity2() {
                       <span
                         className="tooltip tooltip-bottom text-xs"
                         data-tip={`${formik.values.phoneNumber.trim(' ') != ''
-                            ? formik.values.phoneNumber
-                            : 'Ce numéro de téléphone'
+                          ? formik.values.phoneNumber
+                          : 'Ce numéro de téléphone'
                           } devra être le numéro disponible, pour être utilisé à l'hôpital `}
                       >
                         <CiCircleInfo size={23} className="text-red-400" />

components/atoms/Stepper/Forms/kyc.js

@@ -81,16 +81,19 @@ function KYC() {
           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") {
+          console.log(data.continent);
+
+          if (/Afrique/i.test(data.continent)) {
+            setKycTest(false)
+
+          } else {
             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) => {
@@ -123,6 +126,21 @@ function KYC() {
 
   }, []);
 
+  const rerunCheck = () => {
+    fetch('/api/authologic', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        path: router.asPath + '?step=1',
+      }),
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        router.push(data.url);
+      })
+      .catch((e) => console.log(e));
+  }
+
   return (
     <div className="flex flex-col gap-6 justify-center items-center">
       {!router.query.conversation ? (
@@ -142,6 +160,12 @@ function KYC() {
                       <div className='flex flex-col items-center justify-center gap-6 text-center'>
                         <img src='https://i.goopics.net/2askzc.png' alt='Mismatch' className='w-48 opacity-90' />
                         <span className='text-gray-400 text-sm'>{resultKYC?.identity?.errors.toString()}</span>
+                        <button
+                          className="border text-orange border-orange text-sm py-2 px-4 rounded-lg"
+                          onClick={() => rerunCheck()}
+                        >
+                          Rélancer la vérification
+                        </button>
                       </div>
                     ) : ''
                   }

components/atoms/Stepper/Forms/payment2.js

@@ -269,9 +269,9 @@ function Amount({
   );
   const [currencyPatientName, setCurrencyPatientName] = useState(
     patient.countryLabel ??
-      new Intl.DisplayNames(['en'], { type: 'region' }).of(
-        patient?.country?.toUpperCase(),
-      ),
+    new Intl.DisplayNames(['en'], { type: 'region' }).of(
+      patient?.country?.toUpperCase(),
+    ),
   );
 
   const [currencySender, setCurrencySender] = useState('EUR');
@@ -380,9 +380,8 @@ function Amount({
                       Pays:{' '}
                       <b className="text-gray-700 flex gap-1 items-center">
                         <Image
-                          src={`https://flagcdn.com/w20/${
-                            patient.country ?? 'cd'
-                          }.png`}
+                          src={`https://flagcdn.com/w20/${patient.country ?? 'cd'
+                            }.png`}
                           alt="cd"
                           width={20}
                           height={20}
@@ -593,7 +592,8 @@ function Amount({
             </div>
             <button
               type="submit"
-              className="mt-4 mb-8 w-full rounded-md bg-orange effect-up px-6 py-3 font-medium text-white"
+              disabled={convertRequest}
+              className="mt-4 mb-8 w-full rounded-md bg-orange disabled:bg-gray-300 effect-up px-6 py-3 font-medium text-white"
             >
               Passer au paiement
             </button>

components/atoms/Stepper/Forms/send.js

@@ -227,13 +227,13 @@ function Send() {
                     currency: data.currency,
                   }).format(data.amount)}
                 </span>{' '}
-                Health Pass WiiQare <br /> From{' '}
+                Pass santé WiiQare <br /> de{' '}
                 <span className="text-orange font-semibold">
-                  {data.sender.firstName}
+                  {data?.sender?.firstName ?? '' + ' ' + data?.sender?.lastName ?? ''}
                 </span>{' '}
-                To{' '}
+                à{' '}
                 <span className="text-orange font-semibold">
-                  {data.patient.firstName}
+                  {data?.patient?.firstName ?? '' + ' ' + data?.patient?.lastName ?? ''}
                 </span>
               </h4>
             </div>

components/atoms/Tab/ItemHistory.js

@@ -313,11 +313,11 @@ const ItemHistory = ({
                             </span>
                             de{' '}
                             <span className="text-orange font-semibold">
-                              {sender.firstName}
+                              {sender?.firstName ?? '' + ' ' + sender?.lastName ?? ''}
                             </span>{' '}
                             à{' '}
-                            <span className="text-orange font-semibold">
-                              {patient?.firstName ?? ''}
+                            <span className="text-orange font-semibold ">
+                              {patient?.firstName ?? '' + ' ' + patient?.lastName ?? ''}
                             </span>
                           </h4>
                         </div>

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

@@ -242,6 +242,25 @@ exports[`Information renders 1`] = `
             </fieldset>
           </div>
         </div>
+        <div
+          class="hidden h-[4px] w-full gap-10 justify-between items-center mt-2"
+        >
+          <div
+            class="h-full w-3/6 bg-gray-200 rounded-full"
+          >
+            <div
+              class="h-full rounded-full"
+              style="width: 0%; background: red;"
+            />
+          </div>
+          <span
+            class="text-xs"
+            style="color: red;"
+          >
+            Mot de passe 
+            faible
+          </span>
+        </div>
       </div>
       <div
         class="flex flex-col gap-1"

components/organisms/Auth/Forms/informations.js

@@ -23,6 +23,7 @@ import { useRouter } from 'next/router';
 import { setRegister } from '../../../../redux/reducer';
 import LoadingButton from '../../../atoms/Loader/LoadingButton';
 import * as yup from 'yup';
+import zxcvbn from 'zxcvbn';
 
 function Information() {
   const { activeStep, setActiveStep, formData, setFormData, handleComplete } =
@@ -31,6 +32,8 @@ function Information() {
   const [showcPassword, setShowcPassword] = useState(false);
   const [term, setTerm] = useState(false);
   const [state, setState] = useState({ type: 0, message: '' });
+  const [strength, setStrength] = useState(0);
+  const [password, setPassword] = useState('');
   const client = useSelector((state) => state.app.client);
   const router = useRouter();
   const dispatch = useDispatch();
@@ -59,9 +62,19 @@ function Information() {
   const onSubmit = async (values) => {
     if (Object.keys(values).length == 0) return console.log('Pas de données');
     //dispatch(setRegsiter({...values}))
+    // const passwordStrength = zxcvbn(values.password);
 
-    let { confirm_password, ...info } = values;
-    newAccountMutation.mutate({ ...info, ...client.register });
+    // Utilisez les résultats pour fournir des retours à l'utilisateur
+    // console.log('Score de robustesse du mot de passe :', passwordStrength.score);
+    // console.log('Suggestions :', passwordStrength.feedback.suggestions);
+
+    if (strength > 50) {
+
+      let { confirm_password, ...info } = values;
+      newAccountMutation.mutate({ ...info, ...client.register });
+    } else {
+      formik.setErrors({ password: 'Renforcez votre mot de passe' })
+    }
   };
 
   const closeToast = () => {
@@ -95,12 +108,36 @@ function Information() {
     onSubmit,
   });
 
+  const handlePasswordChange = (event) => {
+    const newPassword = event.target.value;
+    setPassword(newPassword);
+    formik.handleChange(event);
+
+    const passwordStrength = zxcvbn(newPassword);
+    // Le score va de 0 (faible) à 4 (fort)
+    const strengthPercentage = (passwordStrength.score + 1) * 25;
+    console.log(strengthPercentage);
+    setStrength(strengthPercentage);
+  };
+
   const renderError = (message) => (
     <p className="text-xs text-red-600 font-light flex items-center gap-1 px-1">
       {message}
     </p>
   );
 
+  const getStrengthColor = (strength) => {
+    if (strength <= 25) {
+      return 'red';
+    } else if (strength <= 50) {
+      return 'orange';
+    } else if (strength <= 75) {
+      return 'green';
+    } else {
+      return 'green';
+    }
+  };
+
   return (
     <>
       {state.type > 0 ? (
@@ -185,6 +222,7 @@ function Information() {
                 type={showPassword ? 'text' : 'password'}
                 name="password"
                 {...formik.getFieldProps('password')}
+                onChange={handlePasswordChange}
                 endAdornment={
                   <InputAdornment position="end">
                     <IconButton
@@ -203,6 +241,15 @@ function Information() {
             ) : (
               <></>
             )}
+            <div className={`${strength == 0 || password.length == 0 ? 'hidden' : 'flex'} h-[4px] w-full gap-10 justify-between items-center mt-2`}>
+              <div className='h-full w-3/6 bg-gray-200 rounded-full'>
+                <div
+                  className="h-full rounded-full"
+                  style={{ width: `${strength}%`, background: getStrengthColor(strength) }}
+                />
+              </div>
+              <span style={{ color: getStrengthColor(strength) }} className='text-xs'>Mot de passe {strength <= 25 ? 'faible' : strength <= 50 ? 'moyen' : 'fort'}</span>
+            </div>
           </div>
 
           <div className="flex flex-col gap-1">

components/organisms/Auth/__snapshots__/StepRegistration.test.js.snap

@@ -318,6 +318,25 @@ exports[`StepRegistration should render information if activeStep=2: information
             </fieldset>
           </div>
         </div>
+        <div
+          class="hidden h-[4px] w-full gap-10 justify-between items-center mt-2"
+        >
+          <div
+            class="h-full w-3/6 bg-gray-200 rounded-full"
+          >
+            <div
+              class="h-full rounded-full"
+              style="width: 0%; background: red;"
+            />
+          </div>
+          <span
+            class="text-xs"
+            style="color: red;"
+          >
+            Mot de passe 
+            faible
+          </span>
+        </div>
       </div>
       <div
         class="flex flex-col gap-1"

next.config.js

@@ -9,21 +9,15 @@ const withPWA = require('next-pwa')({
 const nextConfig = withPWA({
   reactStrictMode: true,
   images: {
-    domains: [
-      'via.placeholder.com',
-      'xsgames.co',
-      'lh3.googleusercontent.com',
-      'ui-avatars.com',
-      'i.goopics.net',
-      'flagcdn.com',
-    ],
+    domains: [],
   },
   experimental: {
     forceSwcTransforms: true,
   },
   env: {
     NEXT_PUBLIC_API_URL: 'https://api.wiiqare.com',
     //NEXT_PUBLIC_API_URL: 'http://localhost:3001',
+    //NEXT_PUBLIC_BASE_URL: 'http://localhost:3000',
     NEXT_PUBLIC_BASE_URL: 'https://app.wiiqare.com',
     NEXTAUTH_URL: 'https://app.wiiqare.com',
   },

package.json

@@ -66,7 +66,8 @@
     "stripe": "^11.16.0",
     "styled-components": "^5.3.6",
     "swr": "^2.1.1",
-    "yup": "^1.0.2"
+    "yup": "^1.0.2",
+    "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.10.4",

yarn.lock

@@ -9148,3 +9148,8 @@ yup@^1.0.2:
     tiny-case "^1.0.3"
     toposort "^2.0.2"
     type-fest "^2.19.0"
+
+zxcvbn@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/zxcvbn/-/zxcvbn-4.4.2.tgz#28ec17cf09743edcab056ddd8b1b06262cc73c30"
+  integrity sha512-Bq0B+ixT/DMyG8kgX2xWcI5jUvCwqrMxSFam7m0lAf78nf04hv6lNCsyLYdyYTrCVMqNDY/206K7eExYCeSyUQ==