fix seo form to work with null values from some props

src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx

@@ -103,7 +103,7 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
         publicationDate: maybe(() => collection.publicationDate, ""),
         seoDescription: maybe(() => collection.seoDescription, ""),
         seoTitle: maybe(() => collection.seoTitle, ""),
-        slug: collection.slug || ""
+        slug: collection?.slug || ""
       }}
       onSubmit={handleSubmit}
       confirmLeave

src/components/SeoForm/SeoForm.tsx

@@ -78,14 +78,14 @@ interface SeoFormProps {
 
 const SeoForm: React.FC<SeoFormProps> = props => {
   const {
-    description = "",
+    description,
     descriptionPlaceholder,
     disabled,
     helperText,
     loading,
-    title = "",
+    title,
     slug,
-    slugPlaceholder = "",
+    slugPlaceholder,
     titlePlaceholder,
     onChange
   } = props;
@@ -95,6 +95,39 @@ const SeoForm: React.FC<SeoFormProps> = props => {
   const [expanded, setExpansionStatus] = React.useState(false);
   const toggleExpansion = () => setExpansionStatus(!expanded);
   const shouldDisplayHelperText = () => helperText && !expanded;
+  // const getParsedProps = () => {
+  //   const keysToParse: Array<keyof SeoFormProps> = [
+  //     "slug",
+  //     "slugPlaceholder",
+  //     "description",
+  //     "descriptionPlaceholder",
+  //     "title",
+  //     "titlePlaceholder"
+  //   ];
+
+  //   return reduce(
+  //     props,
+  //     (result, value, key: keyof SeoFormProps) => {
+  //       console.log({ result, value, key });
+  //       if (keysToParse.includes(key)) {
+  //         return { ...result, [key]: !!value ? "" : value };
+  //       }
+  //       return result;
+  //     },
+  //     {} as Partial<SeoFormProps>
+  //   );
+  // };
+
+  // const {
+  //   title,
+  //   titlePlaceholder,
+  //   slug,
+  //   slugPlaceholder,
+  //   description,
+  //   descriptionPlaceholder
+  // } = getParsedProps();
+
+  // console.log({ ...getParsedProps() });
 
   return (
     <Card>
@@ -146,7 +179,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
                 defaultMessage:
                   "If empty, the preview shows what will be autogenerated."
               })}
-              value={slug.slice(0, 69)}
+              value={slug?.slice(0, 69)}
               disabled={loading || disabled}
               placeholder={slug || slugify(slugPlaceholder)}
               onChange={onChange}
@@ -160,7 +193,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
                   <div className={classes.label}>
                     <FormattedMessage defaultMessage="Search engine title" />
                   </div>
-                  {title.length > 0 && (
+                  {title?.length > 0 && (
                     <span>
                       <FormattedMessage
                         defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
@@ -178,7 +211,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
                 defaultMessage:
                   "If empty, the preview shows what will be autogenerated."
               })}
-              value={title.slice(0, 69)}
+              value={title?.slice(0, 69)}
               disabled={loading || disabled}
               placeholder={titlePlaceholder}
               onChange={onChange}
@@ -192,7 +225,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
                   <div className={classes.label}>
                     <FormattedMessage defaultMessage="Search engine description" />
                   </div>
-                  {description.length > 0 && (
+                  {description?.length > 0 && (
                     <span>
                       <FormattedMessage
                         defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
@@ -210,7 +243,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
                 defaultMessage:
                   "If empty, the preview shows what will be autogenerated."
               })}
-              value={description ? description.slice(0, 299) : undefined}
+              value={description?.slice(0, 299)}
               onChange={onChange}
               disabled={loading || disabled}
               fullWidth