From e5b1f4f700ab8636a4c4583793d281d54959f4fe Mon Sep 17 00:00:00 2001
From: Peter NDENGO <frdrcpeter@gmail.com>
Date: Wed, 31 Jan 2024 17:14:17 +0100
Subject: [PATCH] Grayed when voucher've been already used

---
 .env                         |   2 +-
 next.config.js               |   4 +-
 pages/voucher/pass/[pass].js | 286 ++++++++++++++++++++++++-----------
 3 files changed, 198 insertions(+), 94 deletions(-)

diff --git a/.env b/.env
index 4b601bd..191397f 100644
--- a/.env
+++ b/.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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
 
diff --git a/next.config.js b/next.config.js
index 332b447..001425c 100644
--- a/next.config.js
+++ b/next.config.js
@@ -17,8 +17,8 @@ const nextConfig = withPWA({
   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',
+    NEXT_PUBLIC_BASE_URL: 'http://localhost:3000',
+    //NEXT_PUBLIC_BASE_URL: 'https://app.wiiqare.com',
     NEXTAUTH_URL: 'https://app.wiiqare.com',
   },
 });
diff --git a/pages/voucher/pass/[pass].js b/pages/voucher/pass/[pass].js
index 1640ae6..4f7561b 100644
--- a/pages/voucher/pass/[pass].js
+++ b/pages/voucher/pass/[pass].js
@@ -22,6 +22,8 @@ function Pass() {
     `/payment/voucher?paymentId=${pass}`,
   );
 
+  console.log(data);
+
   if (isLoading)
     return (
       <>
@@ -70,107 +72,209 @@ function Pass() {
   return (
     <div className="flex flex-col gap-14 justify-between items-center h-full w-full pt-20 overflow-hidden">
       <>
-        <div className="flex flex-col items-center text-center space-y-2">
-          <div className="flex flex-col items-center select-none">
-            <Image
-              src={logoDark}
-              className="h-6 md:h-9 object-left object-contain w-min"
-              alt="Logo"
-            />
-            <h1 className="font-extrabold text-gray-700 text-lg hidden md:flex">
-              Pass Santé
-            </h1>
-          </div>
-          <span className="text-xs flex items-center gap-1">
-            Pass Santé ID:
-            <CopyToClipboard
-              text={data.voucherEntity.voucherHash}
-              onCopy={() => {
-                setCopy(true);
-                setTimeout(() => {
-                  setCopy(false);
-                }, 2000);
-              }}
-            >
-              <div className="flex items-center gap-1">
-                [
-                <div
-                  className="tooltip"
-                  data-tip={!copy ? 'Copy to clipboard' : '✓ Copy'}
-                >
-                  <span className="text-orange cursor-pointer">
-                    <SliceText text={data.voucherEntity.voucherHash} />
-                  </span>
+        {
+          data.status === "PAID_OUT" ? (
+            <>
+              <div className="flex flex-col items-center text-center space-y-2">
+                <div className="flex flex-col items-center select-none">
+                  <Image
+                    src={logoDark}
+                    className="h-6 md:h-9 object-left object-contain w-min"
+                    alt="Logo"
+                  />
+                  <h1 className="font-extrabold text-gray-300 text-lg hidden md:flex">
+                    Pass Santé
+                  </h1>
                 </div>
-                ]
+                <span className="text-xs flex items-center gap-1 text-gray-300">
+                  Pass Santé ID:
+
+                  <div className="flex items-center gap-1">
+                    [
+                    <div
+                      className=""
+                      data-tip={!copy ? 'Copy to clipboard' : '✓ Copy'}
+                    >
+                      <span className="text-gray-300">
+                        <SliceText text={data.voucherEntity.voucherHash} />
+                      </span>
+                    </div>
+                    ]
+                  </div>
+                </span>
               </div>
-            </CopyToClipboard>
-          </span>
-        </div>
 
-        <div className="flex flex-col items-center gap-4">
-          <div className="border relative border-gray-300 rounded-lg overflow-hidden">
-            <Canvas
-              className="w-full"
-              text={`${data.voucherEntity.voucherHash}`}
-              options={{
-                level: 'M',
-                margin: 1,
-                scale: 5,
-                quality: 100,
-                color: {
-                  dark: '#000',
-                  light: '#FFF',
-                },
-              }}
-            />
-            {/* <div className="absolute w-full h-full z-20 top-1/3 left-1.5/3 mx-auto">
+              <div className="flex flex-col items-center gap-4">
+                <div className="border relative border-gray-300 rounded-lg overflow-hidden">
+                  <Canvas
+                    className="w-full"
+                    text={`${data.voucherEntity.voucherHash}`}
+                    options={{
+                      level: 'M',
+                      margin: 1,
+                      scale: 5,
+                      quality: 100,
+                      color: {
+                        dark: '#DDD',
+                        light: '#FFF',
+                      },
+                    }}
+                  />
+                  {/* <div className="absolute w-full h-full z-20 top-1/3 left-1.5/3 mx-auto">
 						<Image
 							src={logo}
 							className="h-6 md:h-9 object-left object-contain w-min"
 						/>
 					</div> */}
-          </div>
+                </div>
 
-          <div className="flex flex-col items-center gap-1">
-            <div className="flex -space-x-2">
-              <img
-                className="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800"
-                src="/images/homme.png"
-                alt="Image Description"
-              />
-              <img
-                className="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800"
-                src="/images/femme.png"
-                alt="Image Description"
-              />
-            </div>
-
-            <h4 className="text-sm text-center">
-              <span className="flex items-center justify-center gap-2">
-                <span className="font-semibold flex items-center gap-1">
-                  <CurrencyFlag
-                    currency={data.currency}
-                    className="rounded-full !h-4 !w-4 object-cover"
-                  />{' '}
-                  {new Intl.NumberFormat('en-US', {
-                    style: 'currency',
-                    currency: data.currency,
-                  }).format(data.amount)}
+                <div className="flex flex-col items-center gap-1">
+                  <div className="flex -space-x-2">
+                    <img
+                      className="inline-block opacity-30 grayscale h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800"
+                      src="/images/homme.png"
+                      alt="Image Description"
+                    />
+                    <img
+                      className="inline-block opacity-30 grayscale h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800"
+                      src="/images/femme.png"
+                      alt="Image Description"
+                    />
+                  </div>
+
+                  <h4 className="text-sm text-center text-gray-300">
+                    <span className="flex items-center justify-center gap-2">
+                      <span className="font-semibold flex items-center gap-1">
+                        <CurrencyFlag
+                          currency={data.currency}
+                          className="rounded-full !h-4 !w-4 object-cover opacity-30 grayscale"
+                        />{' '}
+                        {new Intl.NumberFormat('en-US', {
+                          style: 'currency',
+                          currency: data.currency,
+                        }).format(data.amount)}
+                      </span>
+                      Pass santé WiiQare
+                    </span>
+                    de{' '}
+                    <span className="text-gray-300 font-semibold">
+                      {data?.sender?.firstName || "WiiQare Admin"}
+                    </span>{' '}
+                    à{' '}
+                    <span className="text-gray-300 font-semibold">
+                      {data?.patient?.firstName}
+                    </span>
+                  </h4>
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="flex flex-col items-center text-center space-y-2">
+                <div className="flex flex-col items-center select-none">
+                  <Image
+                    src={logoDark}
+                    className="h-6 md:h-9 object-left object-contain w-min"
+                    alt="Logo"
+                  />
+                  <h1 className="font-extrabold text-gray-700 text-lg hidden md:flex">
+                    Pass Santé
+                  </h1>
+                </div>
+                <span className="text-xs flex items-center gap-1">
+                  Pass Santé ID:
+                  <CopyToClipboard
+                    text={data.voucherEntity.voucherHash}
+                    onCopy={() => {
+                      setCopy(true);
+                      setTimeout(() => {
+                        setCopy(false);
+                      }, 2000);
+                    }}
+                  >
+                    <div className="flex items-center gap-1">
+                      [
+                      <div
+                        className="tooltip"
+                        data-tip={!copy ? 'Copy to clipboard' : '✓ Copy'}
+                      >
+                        <span className="text-orange cursor-pointer">
+                          <SliceText text={data.voucherEntity.voucherHash} />
+                        </span>
+                      </div>
+                      ]
+                    </div>
+                  </CopyToClipboard>
                 </span>
-                Pass santé WiiQare
-              </span>
-              de{' '}
-              <span className="text-orange font-semibold">
-                {data?.sender?.firstName || "WiiQare Admin"}
-              </span>{' '}
-              à{' '}
-              <span className="text-orange font-semibold">
-                {data.patient.firstName}
-              </span>
-            </h4>
-          </div>
-        </div>
+              </div>
+
+              <div className="flex flex-col items-center gap-4">
+                <div className="border relative border-gray-300 rounded-lg overflow-hidden">
+                  <Canvas
+                    className="w-full"
+                    text={`${data.voucherEntity.voucherHash}`}
+                    options={{
+                      level: 'M',
+                      margin: 1,
+                      scale: 5,
+                      quality: 100,
+                      color: {
+                        dark: '#000',
+                        light: '#FFF',
+                      },
+                    }}
+                  />
+                  {/* <div className="absolute w-full h-full z-20 top-1/3 left-1.5/3 mx-auto">
+						<Image
+							src={logo}
+							className="h-6 md:h-9 object-left object-contain w-min"
+						/>
+					</div> */}
+                </div>
+
+                <div className="flex flex-col items-center gap-1">
+                  <div className="flex -space-x-2">
+                    <img
+                      className="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800"
+                      src="/images/homme.png"
+                      alt="Image Description"
+                    />
+                    <img
+                      className="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800"
+                      src="/images/femme.png"
+                      alt="Image Description"
+                    />
+                  </div>
+
+                  <h4 className="text-sm text-center">
+                    <span className="flex items-center justify-center gap-2">
+                      <span className="font-semibold flex items-center gap-1">
+                        <CurrencyFlag
+                          currency={data.currency}
+                          className="rounded-full !h-4 !w-4 object-cover"
+                        />{' '}
+                        {new Intl.NumberFormat('en-US', {
+                          style: 'currency',
+                          currency: data.currency,
+                        }).format(data.amount)}
+                      </span>
+                      Pass santé WiiQare
+                    </span>
+                    de{' '}
+                    <span className="text-orange font-semibold">
+                      {data?.sender?.firstName || "WiiQare Admin"}
+                    </span>{' '}
+                    à{' '}
+                    <span className="text-orange font-semibold">
+                      {data?.patient?.firstName}
+                    </span>
+                  </h4>
+                </div>
+              </div>
+            </>
+          )
+        }
+
       </>
 
       <div className="flex flex-col gap-5 items-center md:pt-8">