diff --git a/.changeset/polite-badgers-relate.md b/.changeset/polite-badgers-relate.md new file mode 100644 index 0000000..60191f1 --- /dev/null +++ b/.changeset/polite-badgers-relate.md @@ -0,0 +1,5 @@ +--- +"saleor-app-emails-and-messages": patch +--- + +Added improved descriptions in the Sendgrid configuration views. diff --git a/.changeset/popular-comics-sniff.md b/.changeset/popular-comics-sniff.md new file mode 100644 index 0000000..60191f1 --- /dev/null +++ b/.changeset/popular-comics-sniff.md @@ -0,0 +1,5 @@ +--- +"saleor-app-emails-and-messages": patch +--- + +Added improved descriptions in the Sendgrid configuration views. diff --git a/apps/emails-and-messages/src/modules/app-configuration/ui/configuration-active-description-text.tsx b/apps/emails-and-messages/src/modules/app-configuration/ui/configuration-active-description-text.tsx new file mode 100644 index 0000000..bd3637c --- /dev/null +++ b/apps/emails-and-messages/src/modules/app-configuration/ui/configuration-active-description-text.tsx @@ -0,0 +1,7 @@ +import { Text } from "@saleor/macaw-ui/next"; + +export const ConfigurationActiveDescriptionText = () => ( + + Marking the configuration as not active will prevent it from sending any messages. + +); diff --git a/apps/emails-and-messages/src/modules/app-configuration/ui/configuration-name-description-text.tsx b/apps/emails-and-messages/src/modules/app-configuration/ui/configuration-name-description-text.tsx new file mode 100644 index 0000000..66dc00b --- /dev/null +++ b/apps/emails-and-messages/src/modules/app-configuration/ui/configuration-name-description-text.tsx @@ -0,0 +1,9 @@ +import { Text } from "@saleor/macaw-ui/next"; + +export const ConfigurationNameDescriptionText = () => ( + + The name for your configuration. You can have more than one if you want to use different settings for each channel. +
+ For example - production and development. +
+); diff --git a/apps/emails-and-messages/src/modules/sendgrid/ui/api-connection-section.tsx b/apps/emails-and-messages/src/modules/sendgrid/ui/api-connection-section.tsx index 5aa55cf..b7aea2a 100644 --- a/apps/emails-and-messages/src/modules/sendgrid/ui/api-connection-section.tsx +++ b/apps/emails-and-messages/src/modules/sendgrid/ui/api-connection-section.tsx @@ -14,6 +14,7 @@ import { SectionWithDescription } from "../../../components/section-with-descrip import { zodResolver } from "@hookform/resolvers/zod"; import { setBackendErrors } from "../../../lib/set-backend-errors"; import { Input } from "@saleor/react-hook-form-macaw"; +import { SendgridApiKeyDescriptionText } from "./sendgrid-api-key-description-text"; interface ApiConnectionSectionProps { configuration: SendgridConfiguration; @@ -47,7 +48,7 @@ export const ApiConnectionSection = ({ configuration }: ApiConnectionSectionProp }); return ( - + }>
{ diff --git a/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-api-key-description-text.tsx b/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-api-key-description-text.tsx new file mode 100644 index 0000000..d011e31 --- /dev/null +++ b/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-api-key-description-text.tsx @@ -0,0 +1,13 @@ +import { TextLink } from "@saleor/apps-ui"; +import { Text } from "@saleor/macaw-ui/next"; + +export const SendgridApiKeyDescriptionText = () => ( + + The API keys can be found at your Sendgrid dashboard, in the Settings menu. You can find more + information in the{" "} + + documentation + + . + +); diff --git a/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-basic-information-section.tsx b/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-basic-information-section.tsx index e3e0525..09b1d8f 100644 --- a/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-basic-information-section.tsx +++ b/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-basic-information-section.tsx @@ -14,6 +14,8 @@ import { SectionWithDescription } from "../../../components/section-with-descrip import { zodResolver } from "@hookform/resolvers/zod"; import { setBackendErrors } from "../../../lib/set-backend-errors"; import { Input } from "@saleor/react-hook-form-macaw"; +import { ConfigurationNameDescriptionText } from "../../app-configuration/ui/configuration-name-description-text"; +import { ConfigurationActiveDescriptionText } from "../../app-configuration/ui/configuration-active-description-text"; interface SendgridBasicInformationSectionProps { configuration: SendgridConfiguration; @@ -49,12 +51,12 @@ export const SendgridBasicInformationSection = ({ return ( - Provide unique name for your configuration - you can create more than one. For example - - production and development. Then, pass your API Key. Obtain it here. - + + + + } > diff --git a/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-events-section.tsx b/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-events-section.tsx index df630f1..8816013 100644 --- a/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-events-section.tsx +++ b/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-events-section.tsx @@ -19,6 +19,7 @@ import { fetchTemplates } from "../sendgrid-api"; import { zodResolver } from "@hookform/resolvers/zod"; import { setBackendErrors } from "../../../lib/set-backend-errors"; import { Combobox } from "@saleor/react-hook-form-macaw"; +import { TextLink } from "@saleor/apps-ui"; interface EventBoxProps { configuration: SendgridConfiguration; @@ -100,13 +101,13 @@ export const SendgridEventsSection = ({ configuration }: SendgridEventsSectionPr - - Provide unique name for your configuration - you can create more than one. For example - - production and development. - - Then, pass your API Key. Obtain it here. - + + Choose which Saleor events should send emails via Sendgrid. You can create and modify your templates in the + + Sendgrid dashboard + + . + } > diff --git a/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-sender-section.tsx b/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-sender-section.tsx index 48b94a4..54ac890 100644 --- a/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-sender-section.tsx +++ b/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-sender-section.tsx @@ -1,6 +1,6 @@ import { SendgridConfiguration } from "../configuration/sendgrid-config-schema"; import { BoxWithBorder } from "../../../components/box-with-border"; -import { Box, Button } from "@saleor/macaw-ui/next"; +import { Box, Button, Text } from "@saleor/macaw-ui/next"; import { defaultPadding } from "../../../components/ui-defaults"; import { useDashboardNotification } from "@saleor/apps-shared"; import { trpcClient } from "../../trpc/trpc-client"; @@ -16,6 +16,7 @@ import { useQuery } from "@tanstack/react-query"; import { zodResolver } from "@hookform/resolvers/zod"; import { setBackendErrors } from "../../../lib/set-backend-errors"; import { Combobox } from "@saleor/react-hook-form-macaw"; +import { TextLink } from "@saleor/apps-ui"; interface SendgridSenderSectionProps { configuration: SendgridConfiguration; @@ -50,7 +51,18 @@ export const SendgridSenderSection = ({ configuration }: SendgridSenderSectionPr }); return ( - + + Authenticating the sender is required to send emails. Configure your sender in{" "} + + Sendgrid dashboard + {" "} + and choose it from the list. + + } + > { diff --git a/apps/emails-and-messages/src/modules/smtp/ui/smtp-basic-information-section.tsx b/apps/emails-and-messages/src/modules/smtp/ui/smtp-basic-information-section.tsx index 77289d1..cbd22df 100644 --- a/apps/emails-and-messages/src/modules/smtp/ui/smtp-basic-information-section.tsx +++ b/apps/emails-and-messages/src/modules/smtp/ui/smtp-basic-information-section.tsx @@ -4,7 +4,6 @@ import { Box, Button, Text } from "@saleor/macaw-ui/next"; import { defaultPadding } from "../../../components/ui-defaults"; import { useDashboardNotification } from "@saleor/apps-shared"; import { trpcClient } from "../../trpc/trpc-client"; -import { z } from "zod"; import { useForm } from "react-hook-form"; import { BoxFooter } from "../../../components/box-footer"; import { SectionWithDescription } from "../../../components/section-with-description"; @@ -15,6 +14,8 @@ import { import { zodResolver } from "@hookform/resolvers/zod"; import { setBackendErrors } from "../../../lib/set-backend-errors"; import { Input } from "@saleor/react-hook-form-macaw"; +import { ConfigurationNameDescriptionText } from "../../app-configuration/ui/configuration-name-description-text"; +import { ConfigurationActiveDescriptionText } from "../../app-configuration/ui/configuration-active-description-text"; interface SmtpBasicInformationSectionProps { configuration: SmtpConfiguration; @@ -50,12 +51,12 @@ export const SmtpBasicInformationSection = ({ return ( - Provide unique name for your configuration - you can create more than one. For example - - production and development. Then, pass your API Key. Obtain it here. - + + + + } > diff --git a/apps/emails-and-messages/src/modules/smtp/ui/smtp-events-section.tsx b/apps/emails-and-messages/src/modules/smtp/ui/smtp-events-section.tsx index 9e633f7..41f9f41 100644 --- a/apps/emails-and-messages/src/modules/smtp/ui/smtp-events-section.tsx +++ b/apps/emails-and-messages/src/modules/smtp/ui/smtp-events-section.tsx @@ -12,6 +12,7 @@ import { useRouter } from "next/router"; import { zodResolver } from "@hookform/resolvers/zod"; import { smtpUrls } from "../urls"; import { setBackendErrors } from "../../../lib/set-backend-errors"; +import { TextLink } from "@saleor/apps-ui"; interface EventBoxProps { configuration: SmtpConfiguration; @@ -87,13 +88,16 @@ export const SmtpEventsSection = ({ configuration }: SmtpEventsSectionProps) => + + Chose which Saleor events should send emails via SMTP. - Provide unique name for your configuration - you can create more than one. For example - - production and development. + You can modify the email templates using{" "} + + MJML + {" "} + syntax. - Then, pass your API Key. Obtain it here. - + } > diff --git a/apps/emails-and-messages/src/modules/smtp/ui/smtp-section.tsx b/apps/emails-and-messages/src/modules/smtp/ui/smtp-section.tsx index ba4842b..0af1238 100644 --- a/apps/emails-and-messages/src/modules/smtp/ui/smtp-section.tsx +++ b/apps/emails-and-messages/src/modules/smtp/ui/smtp-section.tsx @@ -48,7 +48,7 @@ export const SmtpSection = ({ configuration }: SmtpSectionProps) => { return ( Provide SMTP server configuration} + description={Provide SMTP server credentials.} > { @@ -69,19 +69,19 @@ export const SmtpSection = ({ configuration }: SmtpSectionProps) => { label="Port" name="smtpPort" control={control} - helperText="Port that will be used" + helperText="Port that will be used for SMTP connection" /> diff --git a/apps/emails-and-messages/src/modules/smtp/ui/smtp-sender-section.tsx b/apps/emails-and-messages/src/modules/smtp/ui/smtp-sender-section.tsx index b7628aa..6469102 100644 --- a/apps/emails-and-messages/src/modules/smtp/ui/smtp-sender-section.tsx +++ b/apps/emails-and-messages/src/modules/smtp/ui/smtp-sender-section.tsx @@ -1,6 +1,6 @@ import { SmtpConfiguration } from "../configuration/smtp-config-schema"; import { BoxWithBorder } from "../../../components/box-with-border"; -import { Box, Button } from "@saleor/macaw-ui/next"; +import { Box, Button, Text } from "@saleor/macaw-ui/next"; import { defaultPadding } from "../../../components/ui-defaults"; import { useDashboardNotification } from "@saleor/apps-shared"; import { trpcClient } from "../../trpc/trpc-client"; @@ -46,7 +46,17 @@ export const SmtpSenderSection = ({ configuration }: SmtpSenderSectionProps) => }); return ( - + + + Sender's name and email address will be displayed as the author of an email. + + Setting up the sender is required to send emails. + + } + > { diff --git a/apps/emails-and-messages/src/pages/configuration/index.tsx b/apps/emails-and-messages/src/pages/configuration/index.tsx index 71bb0dd..8db64c6 100644 --- a/apps/emails-and-messages/src/pages/configuration/index.tsx +++ b/apps/emails-and-messages/src/pages/configuration/index.tsx @@ -38,17 +38,15 @@ const ConfigurationPage: NextPage = () => { - Configure Emails & Messages app to deliver Saleor Events webhooks to various messaging - providers + Configure Emails & Messages app to deliver Saleor Event webhooks to configured messaging + providers. - Manage providers configuration to connect Saleor events with 3rd party services. - + Manage provider configurations and modify it's message templates. } > diff --git a/apps/emails-and-messages/src/pages/configuration/sendgrid/new.tsx b/apps/emails-and-messages/src/pages/configuration/sendgrid/new.tsx index 14e2d94..7c52a5d 100644 --- a/apps/emails-and-messages/src/pages/configuration/sendgrid/new.tsx +++ b/apps/emails-and-messages/src/pages/configuration/sendgrid/new.tsx @@ -1,4 +1,4 @@ -import { Box, Button, Input, Text } from "@saleor/macaw-ui/next"; +import { Box, Button, Text } from "@saleor/macaw-ui/next"; import { NextPage } from "next"; import { SectionWithDescription } from "../../../components/section-with-description"; import { BoxWithBorder } from "../../../components/box-with-border"; @@ -13,6 +13,9 @@ import { useRouter } from "next/router"; import { sendgridUrls } from "../../../modules/sendgrid/urls"; import { appUrls } from "../../../modules/app-configuration/urls"; import { setBackendErrors } from "../../../lib/set-backend-errors"; +import { Input } from "@saleor/react-hook-form-macaw"; +import { SendgridApiKeyDescriptionText } from "../../../modules/sendgrid/ui/sendgrid-api-key-description-text"; +import { ConfigurationNameDescriptionText } from "../../../modules/app-configuration/ui/configuration-name-description-text"; const NewSendgridConfigurationPage: NextPage = () => { const router = useRouter(); @@ -51,10 +54,10 @@ const NewSendgridConfigurationPage: NextPage = () => { - Provide unique name for your configuration - you can create more than one. For example - - production and development. Then, pass your API Key. Obtain it here. - + + + + } > @@ -66,46 +69,14 @@ const NewSendgridConfigurationPage: NextPage = () => { })} > - ( - - )} - /> - ( - // TODO: add validation - - )} + label="Configuration name" + helperText={"Name of the configuration, for example 'Production' or 'Test'"} /> + {/* TODO: add key validation */} + diff --git a/apps/emails-and-messages/src/pages/configuration/smtp/new.tsx b/apps/emails-and-messages/src/pages/configuration/smtp/new.tsx index a96f775..9a28608 100644 --- a/apps/emails-and-messages/src/pages/configuration/smtp/new.tsx +++ b/apps/emails-and-messages/src/pages/configuration/smtp/new.tsx @@ -18,6 +18,7 @@ import { appUrls } from "../../../modules/app-configuration/urls"; import { smtpUrls } from "../../../modules/smtp/urls"; import { setBackendErrors } from "../../../lib/set-backend-errors"; import { Input } from "@saleor/react-hook-form-macaw"; +import { ConfigurationNameDescriptionText } from "../../../modules/app-configuration/ui/configuration-name-description-text"; const NewSmtpConfigurationPage: NextPage = () => { const router = useRouter(); @@ -57,12 +58,7 @@ const NewSmtpConfigurationPage: NextPage = () => { - Provide unique name for your configuration - you can create more than one. For example - - production and development. Then, pass your API Key. Obtain it here. - - } + description={} > { SMTP server connection @@ -91,19 +87,19 @@ const NewSmtpConfigurationPage: NextPage = () => { label="Port" name="smtpPort" control={control} - helperText="Port that will be used" + helperText="Port that will be used for SMTP connection" />