add error handling to seo form

src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx

@@ -79,6 +79,7 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
               />
               <CardSpacer />
               <SeoForm
+                isCreating={true}
                 helperText={intl.formatMessage({
                   defaultMessage:
                     "Add search engine title and description to make this category easier to find"

src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx

@@ -135,6 +135,7 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
                 />
                 <CardSpacer />
                 <SeoForm
+                  isCreating={true}
                   description={data.seoDescription}
                   disabled={disabled}
                   descriptionPlaceholder=""

src/components/SeoForm/SeoForm.tsx

@@ -4,6 +4,11 @@ import CardContent from "@material-ui/core/CardContent";
 import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
+import { PageErrorFragment } from "@saleor/fragments/types/PageErrorFragment";
+import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
+import { PageErrorCode, ProductErrorCode } from "@saleor/types/globalTypes";
+import { getProductErrorMessage } from "@saleor/utils/errors";
+import getPageErrorMessage from "@saleor/utils/errors/page";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -12,6 +17,21 @@ import slugify from "slugify";
 import CardTitle from "../CardTitle";
 import FormSpacer from "../FormSpacer";
 
+enum SeoField {
+  slug = "slug",
+  title = "seoTitle",
+  description = "seoDescription"
+}
+
+const DEFAULT_INPUT_MESSAGE =
+  "If empty, the preview shows what will be autogenerated.";
+
+interface Error {
+  __typename: "ProductError" | "PageError";
+  field: string | null;
+  code: ProductErrorCode | PageErrorCode;
+}
+
 const useStyles = makeStyles(
   theme => ({
     addressBar: {
@@ -66,8 +86,10 @@ interface SeoFormProps {
   description?: string;
   descriptionPlaceholder: string;
   disabled?: boolean;
+  errors?: ProductErrorFragment[] | PageErrorFragment[];
   loading?: boolean;
   helperText?: string;
+  isCreating?: boolean;
   title: string;
   slug: string;
   slugPlaceholder?: string;
@@ -81,7 +103,9 @@ const SeoForm: React.FC<SeoFormProps> = props => {
     description,
     descriptionPlaceholder,
     disabled,
+    errors,
     helperText,
+    isCreating = false,
     loading,
     title,
     slug,
@@ -96,6 +120,43 @@ const SeoForm: React.FC<SeoFormProps> = props => {
   const toggleExpansion = () => setExpansionStatus(!expanded);
   const shouldDisplayHelperText = helperText && !expanded;
 
+  const getFilteredErrors = () =>
+    (errors as Error[])?.filter(({ field }) =>
+      Object.keys(SeoField).includes(field)
+    ) || [];
+
+  const getError = (fieldName: SeoField) =>
+    getFilteredErrors().find(({ field }) => fieldName === field);
+
+  const isError = (fieldName: SeoField) => !!getError(fieldName);
+
+  const getSlugHelperText = () => {
+    const error = isError(SeoField.slug);
+
+    if (isCreating && !error) {
+      return intl.formatMessage({
+        defaultMessage: DEFAULT_INPUT_MESSAGE
+      });
+    }
+
+    if (error) {
+      return getSlugErrorHelperText();
+    }
+
+    return "";
+  };
+
+  const getSlugErrorHelperText = () => {
+    const error = getError(SeoField.slug);
+    const { __typename: type } = error;
+
+    return type === "ProductError"
+      ? getProductErrorMessage(error as ProductErrorFragment, intl)
+      : getPageErrorMessage(error as PageErrorFragment, intl);
+  };
+
+  // .replace(/[^\x00-\x7F]/g, "")
+
   return (
     <Card>
       <CardTitle
@@ -122,7 +183,8 @@ const SeoForm: React.FC<SeoFormProps> = props => {
         {expanded && (
           <div className={classes.container}>
             <TextField
-              name="slug"
+              error={isError(SeoField.slug)}
+              name={SeoField.slug}
               label={
                 <div className={classes.labelContainer}>
                   <div className={classes.label}>
@@ -142,10 +204,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
                   )}
                 </div>
               }
-              helperText={intl.formatMessage({
-                defaultMessage:
-                  "If empty, the preview shows what will be autogenerated."
-              })}
+              helperText={getSlugHelperText()}
               value={slug?.slice(0, 69)}
               disabled={loading || disabled}
               placeholder={slug || slugify(slugPlaceholder, { lower: true })}
@@ -154,7 +213,8 @@ const SeoForm: React.FC<SeoFormProps> = props => {
             />
             <FormSpacer />
             <TextField
-              name="seoTitle"
+              name={SeoField.title}
+              error={isError(SeoField.title)}
               label={
                 <div className={classes.labelContainer}>
                   <div className={classes.label}>
@@ -175,8 +235,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
                 </div>
               }
               helperText={intl.formatMessage({
-                defaultMessage:
-                  "If empty, the preview shows what will be autogenerated."
+                defaultMessage: DEFAULT_INPUT_MESSAGE
               })}
               value={title?.slice(0, 69)}
               disabled={loading || disabled}
@@ -186,7 +245,8 @@ const SeoForm: React.FC<SeoFormProps> = props => {
             />
             <FormSpacer />
             <TextField
-              name="seoDescription"
+              error={isError(SeoField.description)}
+              name={SeoField.description}
               label={
                 <div className={classes.labelContainer}>
                   <div className={classes.label}>
@@ -207,8 +267,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
                 </div>
               }
               helperText={intl.formatMessage({
-                defaultMessage:
-                  "If empty, the preview shows what will be autogenerated."
+                defaultMessage: DEFAULT_INPUT_MESSAGE
               })}
               value={description?.slice(0, 299)}
               onChange={onChange}

src/pages/components/PageDetailsPage/PageDetailsPage.tsx

@@ -38,6 +38,7 @@ export interface PageDetailsPageProps {
   disabled: boolean;
   errors: PageErrorFragment[];
   page: PageDetails_page;
+  isCreating?: boolean;
   saveButtonBarState: ConfirmButtonTransitionState;
   onBack: () => void;
   onRemove: () => void;
@@ -55,6 +56,7 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
 }) => {
   const intl = useIntl();
   const localizeDate = useDateLocalize();
+  const pageExists = page === null;
 
   const initialForm: FormData = {
     content: maybe(
@@ -77,7 +79,7 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
           </AppHeader>
           <PageHeader
             title={
-              page === null
+              pageExists
                 ? intl.formatMessage({
                     defaultMessage: "Create Page",
                     description: "page header"
@@ -96,6 +98,8 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
               />
               <CardSpacer />
               <SeoForm
+                errors={errors}
+                isCreating={pageExists}
                 description={data.seoDescription}
                 disabled={disabled}
                 descriptionPlaceholder={maybe(

src/products/components/ProductCreatePage/ProductCreatePage.tsx

@@ -306,6 +306,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                   </>
                 )}
                 <SeoForm
+                  isCreating={true}
                   helperText={intl.formatMessage({
                     defaultMessage:
                       "Add search engine title and description to make this product easier to find"

src/products/components/ProductUpdatePage/ProductUpdatePage.tsx

@@ -352,6 +352,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                   )}
                   <CardSpacer />
                   <SeoForm
+                    errors={errors}
                     title={data.seoTitle}
                     titlePlaceholder={data.name}
                     description={data.seoDescription}