diff --git a/packages/client/src/pages/admin_preferences/index.tsx b/packages/client/src/pages/admin_preferences/index.tsx index 19eeaa666..e8a3846a6 100644 --- 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 ( - -
- handleSubmit(values, actions)} - validationSchema={OrganizationValidation} + handleSubmit(values, actions)} + validationSchema={OrganizationValidation} + > + {({ isSubmitting, isValidating, handleReset }) => ( + + + +
+ } > - {({ isSubmitting, isValidating, handleReset }) => ( +
{view === Views.GeneralSettings && ( @@ -120,32 +142,12 @@ const OrganizationSettings: React.FC = () => { ) : ( )} - -
- - -
- )} - -
- + + + )} + ); }; diff --git a/packages/client/src/pages/admin_preferences/views/GeneralSettings.tsx b/packages/client/src/pages/admin_preferences/views/GeneralSettings.tsx index 40242ad67..a4cc563d4 100644 --- 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 ? ( + + + + ) : null; const GeneralSettings: React.FC = () => { return ( <> - {generalFields.map(({ component = TextInput, ...field }) => ( - - ))} + {generalFields.map( + ({ component = TextInput, description, ...field }) => ( + } + /> + ) + )} - {emailFields.map(({ component = TextInput, ...field }) => ( - + {emailFields.map(({ component = TextInput, description, ...field }) => ( + } + /> ))} - {smsFields.map(({ component = TextInput, ...field }) => ( - + {smsFields.map(({ component = TextInput, description, ...field }) => ( + } + /> ))} @@ -29,6 +63,7 @@ const GeneralSettings: React.FC = () => { // #region fieldSetup interface FormSectionFieldProps { name: string; + description?: string; label: string; multiline?: boolean; rows?: number; @@ -39,18 +74,22 @@ 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, }, ]; @@ -58,24 +97,29 @@ 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 index df2fed760..66b496a39 100644 --- 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 index 8f2f19a65..b6bd44b85 100644 --- 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 index 43b40b7d3..860061e3a 100644 --- 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", diff --git a/packages/ui/src/Dropdown/Dropdown.tsx b/packages/ui/src/Dropdown/Dropdown.tsx index ef2f652cd..d349da0b7 100644 --- a/packages/ui/src/Dropdown/Dropdown.tsx +++ b/packages/ui/src/Dropdown/Dropdown.tsx @@ -10,6 +10,7 @@ export interface DropdownProps options: DropdownOption[]; label?: string; disabled?: boolean; + StartAdornment?: JSX.Element; } export const Dropdown: React.FC = ({ @@ -18,6 +19,7 @@ export const Dropdown: React.FC = ({ className, name, label, + StartAdornment = null, ...props }) => { const hasLabel = Boolean(label); @@ -41,29 +43,39 @@ export const Dropdown: React.FC = ({ > {label || name} - + {options.map((opt) => { + // If string, value is the same as label + if (typeof opt === "string") { + return ; + } - // If label/value object, render accordingly - return ( - - ); - })} - + // If label/value object, render accordingly + return ( + + ); + })} + + ); }; @@ -81,7 +93,6 @@ const dropdownClasses = [ "focus:ring-2", "focus:border-none", "py-0", - "pl-3", "px-8", "text-center", "border-gray-300", diff --git a/packages/ui/src/HoverText/HoverText.stories.tsx b/packages/ui/src/HoverText/HoverText.stories.tsx index 6371fd11d..257afe09f 100644 --- a/packages/ui/src/HoverText/HoverText.stories.tsx +++ b/packages/ui/src/HoverText/HoverText.stories.tsx @@ -9,7 +9,7 @@ export default { component: HoverText, } as ComponentMeta; -export const Interactive = () => ( +export const Defualt = () => ( ( ); +export const Multiline = () => ( +
+ + + +
+); + export const Hovered = () => ( <>

Position: "relative"

diff --git a/packages/ui/src/HoverText/HoverText.tsx b/packages/ui/src/HoverText/HoverText.tsx index b2fe2ec68..f99371b07 100644 --- a/packages/ui/src/HoverText/HoverText.tsx +++ b/packages/ui/src/HoverText/HoverText.tsx @@ -3,12 +3,14 @@ import React from "react"; interface HoverTextProps extends React.HTMLAttributes { className?: string; text: string; + multiline?: "sm" | "md" | "lg" | false; } const HoverText: React.FC = ({ className, children, text, + multiline = false, ...props }) => { const inputClasses = className?.split(" ") || []; @@ -21,9 +23,17 @@ const HoverText: React.FC = ({
{children} - - {text} - +
+
+ + {text} + +
+
); }; @@ -54,21 +64,10 @@ const applyRelativePositioning = (inputClasses: string[]): string[] => { : noStaticClasses.concat("relative"); }; -const hoverTextClasses = [ - "absolute", - "z-40", - "left-1/2", - "bottom-1/2", - "py-0.5", - "px-1", - "bg-gray-200", - "text-xs", - "text-gray-900", - "whitespace-nowrap", - "border", - "border-gray-300", - "select-none", - "cursor-normal", -]; +const multilineWidthLookup = { + sm: "w-[300px]", + md: "w-[400px]", + lg: "w-[500px]", +}; export default HoverText; diff --git a/packages/ui/src/Layout/Layout.tsx b/packages/ui/src/Layout/Layout.tsx index 4999619e8..45e66abec 100644 --- a/packages/ui/src/Layout/Layout.tsx +++ b/packages/ui/src/Layout/Layout.tsx @@ -73,12 +73,19 @@ const Layout: React.FC = ({ ); }; -export const LayoutContent: React.FC<{ wide?: boolean }> = ({ - children, - wide = false, -}) => ( -
- {children} +export const LayoutContent: React.FC<{ + wide?: boolean; + actionButtons?: JSX.Element; +}> = ({ children, wide = false, actionButtons = null }) => ( +
+
+ {children} +
+ {actionButtons && ( +
+
{actionButtons}
+
+ )}
);