diff --git a/apps/OpenSign/public/locales/en/translation.json b/apps/OpenSign/public/locales/en/translation.json index dba15b70d..408da4fb3 100644 --- a/apps/OpenSign/public/locales/en/translation.json +++ b/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!", diff --git a/apps/OpenSign/public/locales/fr/translation.json b/apps/OpenSign/public/locales/fr/translation.json index 9d14e52ab..e22e1c7f3 100644 --- a/apps/OpenSign/public/locales/fr/translation.json +++ b/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 !", diff --git a/apps/OpenSign/src/assets/images/public-role.mp4 b/apps/OpenSign/src/assets/images/public-role.mp4 new file mode 100644 index 000000000..fe49900ad Binary files /dev/null and b/apps/OpenSign/src/assets/images/public-role.mp4 differ diff --git a/apps/OpenSign/src/assets/images/user-name-image.png b/apps/OpenSign/src/assets/images/user-name-image.png new file mode 100644 index 000000000..ec8d665c3 Binary files /dev/null and b/apps/OpenSign/src/assets/images/user-name-image.png differ diff --git a/apps/OpenSign/src/pages/UserProfile.js b/apps/OpenSign/src/pages/UserProfile.js index 06f9ce63c..2324d240d 100644 --- a/apps/OpenSign/src/pages/UserProfile.js +++ b/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: () => ( + + ), + position: "top", + style: { fontSize: "13px" } + }, + { + selector: '[data-tut="tagline"]', + content: () => ( + + ), + position: "top", + style: { fontSize: "13px" } + }, + { + selector: '[data-tut="publicTemplate"]', + content: () => ( + + ), + position: "top", + style: { fontSize: "13px" } + } + ]; + //function for update TourStatus + const closeTour = async () => { + setProfileTour(false); + }; return ( @@ -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> diff --git a/apps/OpenSign/src/primitives/TourContentWithBtn.js b/apps/OpenSign/src/primitives/TourContentWithBtn.js index 2dbaee9ae..824681906 100644 --- a/apps/OpenSign/src/primitives/TourContentWithBtn.js +++ b/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"