[ADDED] offline detector for every proceed button (#342)

Signed-off-by: Zeeshan Mehboob <[email protected]>
mosip · Sep 9, 2024 · 1b93758 · 1b93758
1 parent f377acc
commit 1b93758
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 37 deletions.
diff --git a/signup-ui/src/pages/EkycVerificationPage/KycProviderList/KycProviderList.tsx b/signup-ui/src/pages/EkycVerificationPage/KycProviderList/KycProviderList.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
+import { Detector } from "react-detect-offline";
 import { useTranslation } from "react-i18next";
 
 import { Button } from "~components/ui/button";
@@ -281,15 +282,19 @@ export const KycProviderList = ({
                 >
                   {t("cancel_button")}
                 </Button>
-                <Button
-                  id="proceed-preview-button"
-                  name="proceed-preview-button"
-                  className="max-w-max px-[6rem] font-semibold sm:px-[2rem] xs:px-[1.5rem]"
-                  onClick={handleContinue}
-                  disabled={!selectedKycProvider}
-                >
-                  {t("proceed_button")}
-                </Button>
+                <Detector
+                  render={({ online }) => (
+                    <Button
+                      id="proceed-preview-button"
+                      name="proceed-preview-button"
+                      className="max-w-max px-[6rem] font-semibold sm:px-[2rem] xs:px-[1.5rem]"
+                      onClick={handleContinue}
+                      disabled={!online || !selectedKycProvider}
+                    >
+                      {t("proceed_button")}
+                    </Button>
+                  )}
+                />
               </div>
             </StepFooter>
           </Step>

diff --git a/signup-ui/src/pages/EkycVerificationPage/TermsAndCondition/TermsAndCondition.tsx b/signup-ui/src/pages/EkycVerificationPage/TermsAndCondition/TermsAndCondition.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import purify from "dompurify";
 import i18next from "i18next";
+import { Detector } from "react-detect-offline";
 import { useTranslation } from "react-i18next";
 
 import { ActionMessage } from "~components/ui/action-message";
@@ -189,17 +190,15 @@ export const TermsAndCondition = ({
               )}
             </StepContent>
             <StepAlert>
-              <ActionMessage className="justify-start tnc-consent">
+              <ActionMessage className="tnc-consent justify-start">
                 <Checkbox
                   id="consent-button"
                   checked={agreeTerms}
                   onCheckedChange={changeAgreeTerms}
                   disabled={!termsAndCondition}
                   className="h-5 w-5 rounded-[2px] text-white data-[state=checked]:border-primary data-[state=checked]:bg-primary"
                 />
-                <p className="ml-2 tnc-consent-text">
-                  {t("agree_text")}
-                </p>
+                <p className="tnc-consent-text ml-2">{t("agree_text")}</p>
               </ActionMessage>
             </StepAlert>
             <StepDivider />
@@ -214,15 +213,19 @@ export const TermsAndCondition = ({
                 >
                   {t("cancel_button")}
                 </Button>
-                <Button
-                  id="proceed-tnc-button"
-                  name="proceed-tnc-button"
-                  className="w-full p-4 font-semibold"
-                  onClick={handleContinue}
-                  disabled={!agreeTerms}
-                >
-                  {t("proceed_button")}
-                </Button>
+                <Detector
+                  render={({ online }) => (
+                    <Button
+                      id="proceed-tnc-button"
+                      name="proceed-tnc-button"
+                      className="w-full p-4 font-semibold"
+                      onClick={handleContinue}
+                      disabled={!online || !agreeTerms}
+                    >
+                      {t("proceed_button")}
+                    </Button>
+                  )}
+                />
               </div>
             </StepFooter>
           </Step>

diff --git a/signup-ui/src/pages/EkycVerificationPage/VerificationSteps/VerificationSteps.tsx b/signup-ui/src/pages/EkycVerificationPage/VerificationSteps/VerificationSteps.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import Stepper from "@keyvaluesystems/react-stepper";
+import { Detector } from "react-detect-offline";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
@@ -190,12 +191,17 @@ export const VerificationSteps = ({
                   >
                     {t("cancel")}
                   </Button>
-                  <Button
-                    className="px-[6rem] font-semibold sm:w-full sm:p-4"
-                    onClick={handleContinue}
-                  >
-                    {t("proceed")}
-                  </Button>
+                  <Detector
+                    render={({ online }) => (
+                      <Button
+                        className="px-[6rem] font-semibold sm:w-full sm:p-4"
+                        onClick={handleContinue}
+                        disabled={!online}
+                      >
+                        {t("proceed")}
+                      </Button>
+                    )}
+                  />
                 </div>
               </StepFooter>
             </Step>

diff --git a/signup-ui/src/pages/EkycVerificationPage/VideoPreview/VideoPreview.tsx b/signup-ui/src/pages/EkycVerificationPage/VideoPreview/VideoPreview.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
+import { Detector } from "react-detect-offline";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import Webcam from "react-webcam";
@@ -211,15 +212,19 @@ export const VideoPreview = ({
               >
                 {t("cancel_button")}
               </Button>
-              <Button
-                id="proceed-preview-button"
-                name="proceed-preview-button"
-                className="w-full p-4 font-semibold"
-                onClick={handleContinue}
-                disabled={!permissionGranted}
-              >
-                {t("proceed_button")}
-              </Button>
+              <Detector
+                render={({ online }) => (
+                  <Button
+                    id="proceed-preview-button"
+                    name="proceed-preview-button"
+                    className="w-full p-4 font-semibold"
+                    onClick={handleContinue}
+                    disabled={!online || !permissionGranted}
+                  >
+                    {t("proceed_button")}
+                  </Button>
+                )}
+              />
             </div>
           </StepFooter>
         </Step>