ES-693: write technical document for signup UI

signup-ui/README.md

@@ -58,6 +58,11 @@ This opens [http://localhost:6006](http://localhost:6006) in the browser. Making
 
 We provide you with `.env.example` file. You can copy and paste the variables described into a self-created `.env.local` file, replacing the required values with your own.
 
+By default, the environment variables are:
+| variable | value |
+| -------- | ----- |
+| `REACT_APP_API_BASE_URL` | http://localhost:8088/v1/signup |
+
 #### Translation
 
 You can add translations using the `locales` folder in the `public` folder. You will need to add the newly added key(s) to `resource.d.ts` so that you can get translation key suggestion.

signup-ui/src/app/AppRouter.tsx

@@ -16,6 +16,7 @@ import {
   UNDER_CONSTRUCTION,
 } from "~constants/routes";
 import { lazyRetry } from "~utils/lazyRetry";
+import { setupResponseInterceptor } from "~services/api.service";
 
 const SignUpPage = lazy(() => lazyRetry(() => import("~pages/SignUpPage")));
 const ResetPasswordPage = lazy(() =>

signup-ui/src/components/icon-label-popover.tsx

@@ -0,0 +1,36 @@
+import {
+  Popover,
+  PopoverArrow,
+  PopoverContent,
+  PopoverTrigger,
+} from "./ui/popover";
+
+interface IconLabelPopoverProps {
+  icon: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export const IconLabelPopover = ({ icon, children }: IconLabelPopoverProps) => {
+  return (
+    <>
+      <div className="flex items-center sm:hidden">
+        <Popover>
+          <PopoverTrigger>{icon}</PopoverTrigger>
+          <PopoverContent side="right" className="text-xs">
+            {children}
+            <PopoverArrow className="fill-[#FFFFFF] stroke-[#BCBCBC]" />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="hidden items-center sm:flex">
+        <Popover>
+          <PopoverTrigger>{icon}</PopoverTrigger>
+          <PopoverContent side="bottom" className="text-xs">
+            {children}
+            <PopoverArrow className="fill-[#FFFFFF] stroke-[#BCBCBC]" />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </>
+  );
+};

signup-ui/src/components/ui/icons.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
 
+import InfoPng from "~assets/png/info-38-2.png";
 import { ReactComponent as ArrowLeft } from "~assets/svg/arrow-left.svg";
 import { ReactComponent as Check } from "~assets/svg/check.svg";
 import { ReactComponent as ChevronDown } from "~assets/svg/chevron-down.svg";
 import { ReactComponent as ChevronUp } from "~assets/svg/chevron-up.svg";
 import { ReactComponent as EyeOff } from "~assets/svg/eye-off.svg";
 import { ReactComponent as Eye } from "~assets/svg/eye.svg";
-import { ReactComponent as Info } from "~assets/svg/info.svg";
 import { ReactComponent as Loader } from "~assets/svg/loader.svg";
 import { ReactComponent as X } from "~assets/svg/x.svg";
 
@@ -18,7 +18,12 @@ export const Icons = {
   close: X,
   eye: Eye,
   eyeOff: EyeOff,
-  info: Info,
+  info: React.forwardRef<
+    HTMLImageElement,
+    React.ImgHTMLAttributes<HTMLImageElement>
+  >(({ alt, ...props }, ref) => (
+    <img ref={ref} src={InfoPng} alt={alt} {...props} />
+  )),
   loader: Loader,
   arrow: React.forwardRef<SVGSVGElement, React.SVGAttributes<SVGSVGElement>>(
     (props, ref) => (

signup-ui/src/components/ui/popover.tsx

@@ -5,6 +5,8 @@ import { cn } from "~utils/cn";
 
 const Popover = PopoverPrimitive.Root;
 
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverContent = React.forwardRef<
@@ -17,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 w-[175px] rounded-md border bg-popover px-3 py-2 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 md:w-[220px] sm:w-[200px]",
         className
       )}
       {...props}
@@ -37,4 +39,4 @@ const PopoverArrow = React.forwardRef<
   />
 ));
 
-export { Popover, PopoverTrigger, PopoverArrow, PopoverContent };
+export { Popover, PopoverAnchor, PopoverTrigger, PopoverArrow, PopoverContent };

signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx

@@ -3,6 +3,7 @@ import { useFormContext, UseFormReturn } from "react-hook-form";
 import { Trans, useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 
+import { IconLabelPopover } from "~components/icon-label-popover";
 import { ActionMessage } from "~components/ui/action-message";
 import { Button } from "~components/ui/button";
 import {
@@ -14,12 +15,6 @@ import {
 } from "~components/ui/form";
 import { Icons } from "~components/ui/icons";
 import { Input } from "~components/ui/input";
-import {
-  Popover,
-  PopoverArrow,
-  PopoverContent,
-  PopoverTrigger,
-} from "~components/ui/popover";
 import {
   Step,
   StepAlert,
@@ -172,21 +167,22 @@ export const ResetPassword = ({ methods, settings }: ResetPasswordProps) => {
                     <div className="space-y-2">
                       <div className="flex items-center gap-1">
                         <FormLabel>{t("new_password")}</FormLabel>
-                        <Popover>
-                          <PopoverTrigger asChild>
-                            <Icons.info className="h-4 w-4 cursor-pointer" />
-                          </PopoverTrigger>
-                          <PopoverContent side="right" className="w-full">
-                            <Trans
-                              i18nKey="password_rules"
-                              components={{
-                                ul: <ul className="list-inside list-disc" />,
-                                li: <li />,
-                              }}
+                        <IconLabelPopover
+                          icon={
+                            <Icons.info
+                              className="m-1 h-4 w-4 cursor-pointer sm:h-3 sm:w-3"
+                              alt="info icon"
                             />
-                            <PopoverArrow className="fill-[#FFFFFF] stroke-[#BCBCBC]" />
-                          </PopoverContent>
-                        </Popover>
+                          }
+                        >
+                          <Trans
+                            i18nKey="password_rules"
+                            components={{
+                              ul: <ul className="list-inside list-disc" />,
+                              li: <li />,
+                            }}
+                          />
+                        </IconLabelPopover>
                       </div>
                       <FormControl>
                         <Input

signup-ui/src/pages/ResetPasswordPage/UserInfo/UserInfo.tsx

@@ -23,12 +23,6 @@ import {
 } from "~components/ui/form";
 import { Icons } from "~components/ui/icons";
 import { Input } from "~components/ui/input";
-import {
-  Popover,
-  PopoverArrow,
-  PopoverContent,
-  PopoverTrigger,
-} from "~components/ui/popover";
 import {
   Step,
   StepAlert,

signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx

@@ -1,8 +1,8 @@
 import { KeyboardEvent, useCallback, useMemo, useState } from "react";
-import { PopoverTrigger } from "@radix-ui/react-popover";
 import { UseFormReturn } from "react-hook-form";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 
+import { IconLabelPopover } from "~components/icon-label-popover";
 import { Button } from "~components/ui/button";
 import { Checkbox } from "~components/ui/checkbox";
 import {
@@ -14,7 +14,6 @@ import {
 } from "~components/ui/form";
 import { Icons } from "~components/ui/icons";
 import { Input } from "~components/ui/input";
-import { Popover, PopoverArrow, PopoverContent } from "~components/ui/popover";
 import {
   Step,
   StepContent,
@@ -63,7 +62,7 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => {
 
   const { registerMutation } = useRegister();
   const [openTermConditionModal, setOpenTermConditionModal] = useState(false);
-  const [modalData, setModalData] = useState({title: "", content: ""});
+  const [modalData, setModalData] = useState({ title: "", content: "" });
 
   const disabledContinue =
     !isValid ||
@@ -121,20 +120,26 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => {
 
   const onModalToggle = () => {
     setOpenTermConditionModal(false);
-    setModalData({title: "", content: ""});
-  }
+    setModalData({ title: "", content: "" });
+  };
 
   const onOpenTerm = (e: any) => {
     e.preventDefault();
-    setModalData({title: t("terms_and_conditions_title"), content: t("terms_and_conditions_content")});
+    setModalData({
+      title: t("terms_and_conditions_title"),
+      content: t("terms_and_conditions_content"),
+    });
     setOpenTermConditionModal(true);
-  }
+  };
 
   const onOpenPrivacy = (e: any) => {
     e.preventDefault();
-    setModalData({title: t("privacy_and_policy_title"), content: t("privacy_and_policy_content")});
+    setModalData({
+      title: t("privacy_and_policy_title"),
+      content: t("privacy_and_policy_content"),
+    });
     setOpenTermConditionModal(true);
-  }
+  };
 
   const handleFullNameInput = (event: KeyboardEvent<HTMLInputElement>) =>
     handleInputFilter(
@@ -183,15 +188,16 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => {
                   <div className="space-y-2">
                     <div className="flex items-center gap-1">
                       <FormLabel>{t("full_name")}</FormLabel>
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <Icons.info className="h-4 w-4 cursor-pointer" />
-                        </PopoverTrigger>
-                        <PopoverContent side="right">
-                          {t("full_name_tooltip")}
-                          <PopoverArrow className="fill-[#FFFFFF] stroke-[#BCBCBC]" />
-                        </PopoverContent>
-                      </Popover>
+                      <IconLabelPopover
+                        icon={
+                          <Icons.info
+                            className="m-1 h-4 w-4 cursor-pointer sm:h-3 sm:w-3"
+                            alt="info icon"
+                          />
+                        }
+                      >
+                        <span>{t("full_name_tooltip")}</span>
+                      </IconLabelPopover>
                     </div>
                     <FormControl>
                       <Input
@@ -223,21 +229,22 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => {
                   <div className="space-y-2">
                     <div className="flex items-center gap-1">
                       <FormLabel>{t("password")}</FormLabel>
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <Icons.info className="h-4 w-4 cursor-pointer" />
-                        </PopoverTrigger>
-                        <PopoverContent side="right" className="w-full">
-                          <Trans
-                            i18nKey="password_rules"
-                            components={{
-                              ul: <ul className="list-inside list-disc" />,
-                              li: <li />,
-                            }}
+                      <IconLabelPopover
+                        icon={
+                          <Icons.info
+                            className="m-1 h-4 w-4 cursor-pointer sm:h-3 sm:w-3"
+                            alt="info icon"
                           />
-                          <PopoverArrow className="fill-[#FFFFFF] stroke-[#BCBCBC]" />
-                        </PopoverContent>
-                      </Popover>
+                        }
+                      >
+                        <Trans
+                          i18nKey="password_rules"
+                          components={{
+                            ul: <ul className="list-inside list-disc" />,
+                            li: <li />,
+                          }}
+                        />
+                      </IconLabelPopover>
                     </div>
                     <FormControl>
                       <Input