Merge pull request #830 from eisbuk/feature/admin-preferences-help-text

Feature/admin preferences help text
eisbuk · Sep 18, 2023 · a312fd0 · a312fd0
2 parents 3e96224 + 279e853
commit a312fd0
Show file tree

Hide file tree

Showing 9 changed files with 260 additions and 118 deletions.
diff --git a/packages/client/src/pages/admin_preferences/index.tsx b/packages/client/src/pages/admin_preferences/index.tsx
@@ -101,14 +101,36 @@ const OrganizationSettings: React.FC = () => {
 
   return (
     <Layout additionalButtons={additionalButtons}>
-      <LayoutContent>
-        <div className="pt-[44px] px-[71px] pb-8 md:pt-[62px]">
-          <Formik
-            {...{ initialValues }}
-            onSubmit={(values, actions) => handleSubmit(values, actions)}
-            validationSchema={OrganizationValidation}
+      <Formik
+        {...{ initialValues }}
+        onSubmit={(values, actions) => handleSubmit(values, actions)}
+        validationSchema={OrganizationValidation}
+      >
+        {({ isSubmitting, isValidating, handleReset }) => (
+          <LayoutContent
+            actionButtons={
+              <div className="py-2 flex justify-end items-center gap-2">
+                <Button
+                  onClick={handleReset}
+                  disabled={isSubmitting || isValidating}
+                  className="!text-cyan-500"
+                  size={ButtonSize.MD}
+                >
+                  {t(ActionButton.Reset)}
+                </Button>
+                <Button
+                  disabled={isSubmitting || isValidating}
+                  color={ButtonColor.Primary}
+                  size={ButtonSize.MD}
+                  aria-label={"save"}
+                  type="submit"
+                >
+                  {t(ActionButton.Save)}
+                </Button>
+              </div>
+            }
           >
-            {({ isSubmitting, isValidating, handleReset }) => (
+            <div className="pt-[44px] px-[71px] pb-8 md:pt-[62px]">
               <div className="md:px-11">
                 {view === Views.GeneralSettings && (
                   <AdminsField currentUser={currentUser} />
@@ -120,32 +142,12 @@ const OrganizationSettings: React.FC = () => {
                   ) : (
                     <GeneralSettings />
                   )}
-
-                  <div className="py-4 flex justify-end items-center gap-2">
-                    <Button
-                      onClick={handleReset}
-                      disabled={isSubmitting || isValidating}
-                      className="!text-cyan-500"
-                      size={ButtonSize.MD}
-                    >
-                      {t(ActionButton.Reset)}
-                    </Button>
-                    <Button
-                      disabled={isSubmitting || isValidating}
-                      color={ButtonColor.Primary}
-                      size={ButtonSize.MD}
-                      aria-label={"save"}
-                      type="submit"
-                    >
-                      {t(ActionButton.Save)}
-                    </Button>
-                  </div>
                 </Form>
               </div>
-            )}
-          </Formik>
-        </div>
-      </LayoutContent>
+            </div>
+          </LayoutContent>
+        )}
+      </Formik>
     </Layout>
   );
 };

diff --git a/packages/client/src/pages/admin_preferences/views/GeneralSettings.tsx b/packages/client/src/pages/admin_preferences/views/GeneralSettings.tsx
@@ -1,25 +1,59 @@
 import React from "react";
 import { Field, FieldProps } from "formik";
+import { QuestionMarkCircle } from "@eisbuk/svg";
 
 import i18n, { OrganizationLabel } from "@eisbuk/translations";
-import { CountryCodesDropdownFormik, FormSection, TextInput } from "@eisbuk/ui";
+import {
+  CountryCodesDropdownFormik,
+  FormSection,
+  HoverText,
+  TextInput,
+} from "@eisbuk/ui";
+
+const HelpText: React.FC<{ text?: string }> = ({ text }) =>
+  text ? (
+    <HoverText
+      multiline="md"
+      className="h-5 w-5 ml-2.5 text-gray-700"
+      text={text}
+    >
+      <QuestionMarkCircle />
+    </HoverText>
+  ) : null;
 
 const GeneralSettings: React.FC = () => {
   return (
     <>
       <FormSection title="General">
-        {generalFields.map(({ component = TextInput, ...field }) => (
-          <Field key={field.name} component={component} {...field} />
-        ))}
+        {generalFields.map(
+          ({ component = TextInput, description, ...field }) => (
+            <Field
+              key={field.name}
+              component={component}
+              {...field}
+              StartAdornment={<HelpText text={description || ""} />}
+            />
+          )
+        )}
       </FormSection>
       <FormSection title="Email">
-        {emailFields.map(({ component = TextInput, ...field }) => (
-          <Field key={field.name} component={component} {...field} />
+        {emailFields.map(({ component = TextInput, description, ...field }) => (
+          <Field
+            key={field.name}
+            component={component}
+            {...field}
+            StartAdornment={<HelpText text={description || ""} />}
+          />
         ))}
       </FormSection>
       <FormSection title="SMS">
-        {smsFields.map(({ component = TextInput, ...field }) => (
-          <Field key={field.name} component={component} {...field} />
+        {smsFields.map(({ component = TextInput, description, ...field }) => (
+          <Field
+            key={field.name}
+            component={component}
+            {...field}
+            StartAdornment={<HelpText text={description || ""} />}
+          />
         ))}
       </FormSection>
     </>
@@ -29,6 +63,7 @@ const GeneralSettings: React.FC = () => {
 // #region fieldSetup
 interface FormSectionFieldProps {
   name: string;
+  description?: string;
   label: string;
   multiline?: boolean;
   rows?: number;
@@ -39,43 +74,52 @@ const generalFields: FormSectionFieldProps[] = [
   {
     name: "displayName",
     label: i18n.t(OrganizationLabel.DisplayName),
+    description: i18n.t(OrganizationLabel.DisplayNameHelpText),
   },
   {
     name: "location",
     label: i18n.t(OrganizationLabel.Location),
+    description: i18n.t(OrganizationLabel.LocationHelpText),
   },
   {
     name: "registrationCode",
     label: i18n.t(OrganizationLabel.RegistrationCode),
+    description: i18n.t(OrganizationLabel.RegistrationCodeHelpText),
   },
   {
     name: "defaultCountryCode",
     label: i18n.t(OrganizationLabel.CountryCode),
+    description: i18n.t(OrganizationLabel.CountryCodeHelpText),
     component: CountryCodesDropdownFormik,
   },
 ];
 const emailFields: FormSectionFieldProps[] = [
   {
     name: "emailNameFrom",
     label: i18n.t(OrganizationLabel.EmailNameFrom),
+    description: i18n.t(OrganizationLabel.EmailNameFromHelpText),
   },
   {
     name: "emailFrom",
     label: i18n.t(OrganizationLabel.EmailFrom),
+    description: i18n.t(OrganizationLabel.EmailFromHelpText),
   },
   {
     name: "bcc",
     label: i18n.t(OrganizationLabel.BCC),
+    description: i18n.t(OrganizationLabel.BCCHelpText),
   },
 ];
 const smsFields: FormSectionFieldProps[] = [
   {
     name: "smsFrom",
     label: i18n.t(OrganizationLabel.SmsFrom),
+    description: i18n.t(OrganizationLabel.SmsFromHelpText),
   },
   {
     name: "smsTemplate",
     label: i18n.t(OrganizationLabel.SmsTemplate),
+    description: i18n.t(OrganizationLabel.SmsTemplateHelpText),
     multiline: true,
     rows: 6,
   },

diff --git a/packages/translations/src/dict/en.json b/packages/translations/src/dict/en.json
@@ -121,22 +121,44 @@
 
   "OrganizationLabel": {
     "SettingsTitle": "{{ organization }} Settings",
-    "EmailNameFrom": "Email Name From",
-    "EmailFrom": "Email From",
-    "EmailTemplates": "Email Templates",
-    "SmsFrom": "SMS From",
-    "SmsTemplate": "SMS Template",
+
+    "General": "General",
+
+    "Admins": "Admins",
+    "AddNewAdmin": "Add New Admin",
+
     "DisplayName": "Organization Name",
+    "DisplayNameHelpText": "The name of your organization which will be displayed in the app and in communication with the customers.",
+
     "Location": "Location",
+    "LocationHelpText": "The address of your organization.",
+
+    "RegistrationCode": "Registration code",
+    "RegistrationCodeHelpText": "The code sent to new customers in order to register with your organization (customers will be required to provide this code when self-registering).",
+
     "CountryCode": "Country code",
-    "Admins": "Admins",
-    "AddNewAdmin": "Add New Admin",
+    "CountryCodeHelpText": "The country code for phone numbers (e.g. +39 for Italy). This is used as a default value when customers register their phone number.",
+
     "Email": "Email",
+
+    "EmailNameFrom": "Organization Email Name",
+    "EmailNameFromHelpText": "This name will be used as sender name in emails sent to customers.",
+
+    "EmailFrom": "Organization Email Address",
+    "EmailFromHelpText": "This address will be used as sender address in emails sent to customers.",
+
+    "BCC": "BCC Email Address",
+    "BCCHelpText": "This email address will be used to send copies of all emails sent to customers (this address is not shown to the customers).",
+
     "SMS": "SMS",
-    "General": "General",
-    "BCC": "BCC",
-    "RegistrationCode": "Registration code"
+
+    "SmsFrom": "Organization SMS Sender Name",
+    "SmsFromHelpText": "This name will be used as sender name in SMS sent to customers.",
+
+    "SmsTemplate": "SMS Template",
+    "SmsTemplateHelpText": "This is a template for SMS sent to customers."
   },
+
   "EmailTemplateLabel": {
     "SubjectPreview": "Subject Preview",
     "HTMLPreview": "Body Preview",

diff --git a/packages/translations/src/dict/it.json b/packages/translations/src/dict/it.json
@@ -120,21 +120,44 @@
 
   "OrganizationLabel": {
     "SettingsTitle": "{{ organization }} Impostazioni",
-    "EmailNameFrom": "Nome Email Da",
-    "EmailFrom": "Email Da",
-    "EmailTemplate": "Modello Di Emails",
-    "SmsFrom": "SMS Da",
-    "SmsTemplate": "Modello Di SMS",
+
+    "General": "Generale",
+
+    "Admins": "Amministrat(rici/ori)",
+    "AddNewAdmin": "Aggiungi Nuovo Amministratore",
+
     "DisplayName": "Nome Dell'Organizzazione",
+    "DisplayNameHelpText": "Il nome dell'organizzazione che sarà mostrato nella app e nelle comunicazioni con i clienti.",
+
     "Location": "Posizione",
+    "LocationHelpText": "L'indirizzo dell'organizzazione.",
+
+    "RegistrationCode": "Codice di registrazione",
+    "RegistrationCodeHelpText": "Il codice necessario per registrarsi sul sito.",
+
     "CountryCode": "Prefisso internazionale di default",
-    "Admins": "Amministrat(rici/ori)",
-    "AddNewAdmin": "Aggiungi Nuovo Amministratore",
+    "CountryCodeHelpText": "Il prefisso internazionale di defaut (e.g. +39 for Italy). Verrà compilato automaticamente per gli utenti che si registrano.",
+
     "Email": "Email",
+
+    "EmailNameFrom": "Nome Email Da",
+    "EmailNameFromHelpText": "Questo nome verrà utilizzato per le email inviate agli utenti.",
+
+    "EmailFrom": "Email Da",
+    "EmailFromHelpText": "Indirisso email da usare come mittente nelle comunicazioni agli utenti.",
+
+    "BCC": "Email copia BCC",
+    "BCCHelpText": "Tutte le email inviate agli utenti verranno anche mandate in copia a questo indirizzo. Gli utenti non vedranno questo indirizzo.",
+
+    "EmailTemplate": "Modello Di Emails",
+
     "SMS": "SMS",
-    "General": "Generale",
-    "BCC": "BCC",
-    "RegistrationCode": "Codice di registrazione"
+
+    "SmsFrom": "SMS Da",
+    "SmsFromHelpText": "This name will be used as sender name in SMS sent to customers.",
+
+    "SmsTemplate": "Modello Di SMS",
+    "SmsTemplateHelpText": "This is a template for SMS sent to customers."
   },
 
   "EmailTemplateLabel": {

diff --git a/packages/translations/src/translations.ts b/packages/translations/src/translations.ts
@@ -142,22 +142,44 @@ export enum ValidationMessage {
 }
 export enum OrganizationLabel {
   SettingsTitle = "OrganizationLabel.SettingsTitle",
-  EmailNameFrom = "OrganizationLabel.EmailNameFrom",
-  EmailFrom = "OrganizationLabel.EmailFrom",
-  EmailTemplate = "OrganizationLabel.EmailTemplate",
-  SmsFrom = "OrganizationLabel.SmsFrom",
-  SmsTemplate = "OrganizationLabel.SmsTemplate",
+
+  General = "OrganizationLabel.General",
+
+  Admins = "OrganizationLabel.Admins",
+  AddNewAdmin = "OrganizationLabel.AddNewAdmin",
+
   DisplayName = "OrganizationLabel.DisplayName",
+  DisplayNameHelpText = "OrganizationLabel.DisplayNameHelpText",
+
   Location = "OrganizationLabel.Location",
+  LocationHelpText = "OrganizationLabel.LocationHelpText",
+
+  RegistrationCode = "OrganizationLabel.RegistrationCode",
+  RegistrationCodeHelpText = "OrganizationLabel.RegistrationCodeHelpText",
+
   CountryCode = "OrganizationLabel.CountryCode",
-  Admins = "OrganizationLabel.Admins",
-  AddNewAdmin = "OrganizationLabel.AddNewAdmin",
+  CountryCodeHelpText = "OrganizationLabel.CountryCodeHelpText",
+
   Email = "OrganizationLabel.Email",
-  SMS = "OrganizationLabel.SMS",
-  General = "OrganizationLabel.General",
+
+  EmailNameFrom = "OrganizationLabel.EmailNameFrom",
+  EmailNameFromHelpText = "OrganizationLabel.EmailNameFromHelpText",
+
+  EmailFrom = "OrganizationLabel.EmailFrom",
+  EmailFromHelpText = "OrganizationLabel.EmailFromHelpText",
+
   BCC = "OrganizationLabel.BCC",
-  RegistrationCode = "OrganizationLabel.RegistrationCode",
+  BCCHelpText = "OrganizationLabel.BCCHelpText",
+
+  SMS = "OrganizationLabel.SMS",
+
+  SmsFrom = "OrganizationLabel.SmsFrom",
+  SmsFromHelpText = "OrganizationLabel.SmsFromHelpText",
+
+  SmsTemplate = "OrganizationLabel.SmsTemplate",
+  SmsTemplateHelpText = "OrganizationLabel.SmsTemplateHelpText",
 }
+
 export enum EmailTemplateLabel {
   SubjectPreview = "EmailTemplateLabel.SubjectPreview",
   HTMLPreview = "EmailTemplateLabel.HTMLPreview",