feat: add tour message in profile page

apps/OpenSign/public/locales/en/translation.json

@@ -4,6 +4,7 @@
   "language": "Language",
   "name": "Name",
   "phone": "Phone",
+  "phone-optional":"Phone(optional)",
   "email": "Email",
   "company": "Company",
   "job-title": "Job title",
@@ -310,7 +311,7 @@
   "contact-details": "Contact Details",
   "verify-email": "Please verify your email !",
   "send-otp": " Send OTP",
-  "otp-placeholder": "Enter OTP received over email",
+  "otp-placeholder": "Enter verification code received over email",
   "loading-doc": "Loading Document..",
   "widgets-name": {
     "signature": "signature",
@@ -448,7 +449,7 @@
   "decline-alert-3": "You can not sign this document as it has been declined/revoked.",
   "sign here": "Sign here",
   "guest-email-alert": "verification code is sent to your email",
-  "get-otp-alert": "you will get a OTP via Email",
+  "get-otp-alert": "you will get a verification code via Email",
   "user-already-exist": "User already exist.",
   "server-error": "Internal server error !",
   "fill-required-details!": "Please fill required details!",

apps/OpenSign/public/locales/fr/translation.json

@@ -5,6 +5,7 @@
   "language": "Langue",
   "name": "Nom et Prénom",
   "phone": "Téléphone",
+  "phone-optional":"Téléphone (facultatif)",
   "email": "E-mail",
   "company": "Organisation",
   "job-title": "Votre Fonction",
@@ -310,7 +311,7 @@
   "contact-details": "Coordonnées",
   "verify-email": "Veuillez vérifier votre email!",
   "send-otp": "envoyer un code à usage unique",
-  "otp-placeholder": "Saisissez l'OTP reçu par e-mail",
+  "otp-placeholder":"Entrez le code de vérification reçu par e-mail",
   "loading-doc": "Chargement du document..",
   "widgets-name": {
     "signature": "signature",
@@ -448,7 +449,7 @@
   "decline-alert-3": "Vous ne pouvez pas signer ce document car il a été refusé/révoqué.",
   "sign here": "Signer ici",
   "guest-email-alert": "le code de vérification a été envoyé sur votre e-mail",
-  "get-otp-alert": "vous recevrez un mot de passe à usage unique par e-mail",
+  "get-otp-alert": "vous recevrez un code de vérification par e-mail",
   "user-already-exist": "L'utilisateur existe déjà.",
   "server-error": "Erreur interne du serveur !",
   "fill-required-details!": "Veuillez remplir les informations requises !",

apps/OpenSign/src/pages/UserProfile.js

@@ -22,6 +22,10 @@ import { useTranslation } from "react-i18next";
 import SelectLanguage from "../components/pdf/SelectLanguage";
 import { RWebShare } from "react-web-share";
 import Alert from "../primitives/Alert";
+import Tour from "reactour";
+import TourContentWithBtn from "../primitives/TourContentWithBtn";
+import userName from "../assets/images/user-name-image.png";
+import publicRole from "../assets/images/public-role.mp4";
 
 function UserProfile() {
   const navigate = useNavigate();
@@ -58,6 +62,7 @@ function UserProfile() {
     extendUser && extendUser?.[0]?.Tagline
   );
   const [isPlan, setIsPlan] = useState({ plan: "", isValid: false });
+  const [profileTour, setProfileTour] = useState(true);
   const getPublicUrl = isStaging
     ? `https://staging.opensign.me/${extendUser?.[0]?.UserName}`
     : `https://opensign.me/${extendUser?.[0]?.UserName}`;
@@ -329,6 +334,54 @@ function UserProfile() {
     setTimeout(() => setIsAlert({}), 3000);
   };
 
+  const tourConfig = [
+    {
+      selector: '[data-tut="username"]',
+      content: () => (
+        <TourContentWithBtn
+          message="Enter your username to generate your public profile. Once added, 
+          you can visit `https://opensign.me/your-username` to view your public template."
+          // {t("tour-mssg.username")}
+          isChecked={true}
+          image={userName}
+        />
+      ),
+      position: "top",
+      style: { fontSize: "13px" }
+    },
+    {
+      selector: '[data-tut="tagline"]',
+      content: () => (
+        <TourContentWithBtn
+          message="Add your tagline here! You can view your tagline by 
+          visiting `https://opensign.me/your-username` replacing your-username with your actual username."
+          // {t("tour-mssg.tagline")}
+          isChecked={true}
+          image={userName}
+        />
+      ),
+      position: "top",
+      style: { fontSize: "13px" }
+    },
+    {
+      selector: '[data-tut="publicTemplate"]',
+      content: () => (
+        <TourContentWithBtn
+          message="Here's an example of how to make any template public and accessible via a URL.
+           For instance, visiting `https://opensign.me/your-username` will allow you to view your public template and make it available for public signing."
+          // {t("tour-mssg.tagline")}
+          isChecked={true}
+          video={publicRole}
+        />
+      ),
+      position: "top",
+      style: { fontSize: "13px" }
+    }
+  ];
+  //function for update TourStatus
+  const closeTour = async () => {
+    setProfileTour(false);
+  };
   return (
     <React.Fragment>
       <Title title={"Profile"} />
@@ -343,6 +396,13 @@ function UserProfile() {
               {isAlert.message}
             </Alert>
           )}
+          <Tour
+            onRequestClose={closeTour}
+            steps={tourConfig}
+            isOpen={profileTour}
+            rounded={5}
+            closeWithMask={false}
+          />
           <div className="bg-base-100 text-base-content flex flex-col justify-center shadow-md rounded-box w-[450px]">
             <div className="flex flex-col justify-center items-center my-4">
               <div className="w-[200px] h-[200px] overflow-hidden rounded-full">
@@ -491,7 +551,10 @@ function UserProfile() {
                         message={t("public-profile-help")}
                       />
                     </span>
-                    <div className="flex md:flex-row flex-col md:items-center">
+                    <div
+                      data-tut="username"
+                      className="flex md:flex-row flex-col md:items-center"
+                    >
                       {editmode || !extendUser?.[0]?.UserName ? (
                         <input
                           maxLength={40}
@@ -506,7 +569,7 @@ function UserProfile() {
                           value={publicUserName}
                           disabled={!editmode}
                           placeholder="enter user name"
-                          className="op-input op-input-bordered focus:outline-none hover:border-base-content op-input-xs"
+                          className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-sm"
                         />
                       ) : (
                         <div className="flex flex-row gap-1 items-center justify-between md:justify-start">
@@ -547,22 +610,20 @@ function UserProfile() {
                         message={t("tagline-help")}
                       />
                     </span>
-                    <div className="flex md:flex-row flex-col md:items-center">
+                    <div
+                      data-tut="tagline"
+                      className="flex md:flex-row flex-col md:items-center"
+                    >
                       {editmode ? (
                         <input
                           onChange={handleOnchangeTagLine}
                           value={tagLine}
                           disabled={!editmode}
                           placeholder="enter tagline"
-                          className="op-input op-input-bordered focus:outline-none hover:border-base-content op-input-xs"
+                          className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-sm"
                         />
                       ) : (
-                        <input
-                          value={extendUser?.[0]?.Tagline}
-                          disabled
-                          placeholder="enter tagline"
-                          className="op-input op-input-bordered op-input-xs"
-                        />
+                        <span>{extendUser?.[0]?.Tagline}</span>
                       )}
                     </div>
                   </li>

apps/OpenSign/src/primitives/TourContentWithBtn.js

@@ -1,6 +1,11 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-export default function TourContentWithBtn({ message, isChecked }) {
+export default function TourContentWithBtn({
+  message,
+  isChecked,
+  image,
+  video
+}) {
   const { t } = useTranslation();
   const [isCheck, setIsCheck] = useState(false);
 
@@ -13,6 +18,19 @@ export default function TourContentWithBtn({ message, isChecked }) {
   return (
     <div>
       <p>{message}</p>
+      {image && (
+        <div className="flex items-center justify-center my-[10px]">
+          <img width={800} height={100} src={image} />
+        </div>
+      )}
+      {video && (
+        <div className="flex items-center justify-center">
+          <video width="320" height="240" autoPlay loop muted playsInline>
+            <source src={video} type="video/mp4" />
+          </video>
+        </div>
+      )}
+
       <label className="flex items-center justify-center mb-0">
         <input
           type="checkbox"