Add slug field to category, product, collection & page details

CHANGELOG.md

@@ -43,8 +43,10 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix return to previous page on screen size change - #710 by @orzechdev
 - Add variants reordering possibility - #716 by @orzechdev
 - Fix avatar change button - #719 by @orzechdev
+- Add slug field to product, collection, category & page details (update and create) - #720 by @mmarkusik
 - Change plural form of "informations" to "information" strings across the app #722 by @mmarkusik
 
+
 ## 2.10.1
 
 - Add weight field and fix warehouse country selection - #597 by @dominik-zeglen

locale/defaultMessages.json

@@ -1829,6 +1829,9 @@
   "src_dot_components_dot_SeoForm_dot_3468022343": {
     "string": "Search Engine Preview"
   },
+  "src_dot_components_dot_SeoForm_dot_3478065224": {
+    "string": "Slug"
+  },
   "src_dot_components_dot_SeoForm_dot_3877274856": {
     "context": "character limit",
     "string": "{numberOfCharacters} of {maxCharacters} characters"
@@ -3564,16 +3567,6 @@
     "context": "page status",
     "string": "Not Published"
   },
-  "src_dot_pages_dot_components_dot_PageSlug_dot_1324178587": {
-    "string": "URL"
-  },
-  "src_dot_pages_dot_components_dot_PageSlug_dot_3478065224": {
-    "context": "page internal name",
-    "string": "Slug"
-  },
-  "src_dot_pages_dot_components_dot_PageSlug_dot_4210828158": {
-    "string": "If empty, URL will be autogenerated from Page Name"
-  },
   "src_dot_pages_dot_views_dot_1068617485": {
     "context": "header",
     "string": "Create Page"

src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx

@@ -19,6 +19,7 @@ import CategoryDetailsForm from "../../components/CategoryDetailsForm";
 export interface FormData extends MetadataFormData {
   description: RawDraftContentState;
   name: string;
+  slug: string;
   seoTitle: string;
   seoDescription: string;
 }
@@ -29,7 +30,8 @@ const initialData: FormData = {
   name: "",
   privateMetadata: [],
   seoDescription: "",
-  seoTitle: ""
+  seoTitle: "",
+  slug: ""
 };
 
 export interface CategoryCreatePageProps {
@@ -81,6 +83,8 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
                   defaultMessage:
                     "Add search engine title and description to make this category easier to find"
                 })}
+                slug={data.slug}
+                slugPlaceholder={data.name}
                 title={data.seoTitle}
                 titlePlaceholder={data.name}
                 description={data.seoDescription}

src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx

@@ -36,6 +36,7 @@ export interface FormData extends MetadataFormData {
   backgroundImageAlt: string;
   description: RawDraftContentState;
   name: string;
+  slug: string;
   seoTitle: string;
   seoDescription: string;
 }
@@ -118,7 +119,8 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
         name: category.name || "",
         privateMetadata: category?.privateMetadata?.map(mapMetadataItemToInput),
         seoDescription: category.seoDescription || "",
-        seoTitle: category.seoTitle || ""
+        seoTitle: category.seoTitle || "",
+        slug: category?.slug || ""
       }
     : {
         backgroundImageAlt: "",
@@ -127,7 +129,8 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
         name: "",
         privateMetadata: undefined,
         seoDescription: "",
-        seoTitle: ""
+        seoTitle: "",
+        slug: ""
       };
 
   const handleSubmit = (data: FormData) => {
@@ -179,6 +182,8 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
               titlePlaceholder={data.name}
               description={data.seoDescription}
               descriptionPlaceholder={data.name}
+              slug={data.slug}
+              slugPlaceholder={data.name}
               loading={!category}
               onChange={change}
               disabled={disabled}

src/categories/fixtures.ts

@@ -511,7 +511,8 @@ export const category: (
     }
   },
   seoDescription: null,
-  seoTitle: null
+  seoTitle: null,
+  slug: "coffees"
 });
 export const errors = [
   {

src/categories/types/CategoryCreate.ts

@@ -38,6 +38,7 @@ export interface CategoryCreate_categoryCreate_category {
   privateMetadata: (CategoryCreate_categoryCreate_category_privateMetadata | null)[];
   backgroundImage: CategoryCreate_categoryCreate_category_backgroundImage | null;
   name: string;
+  slug: string;
   descriptionJson: any;
   seoDescription: string | null;
   seoTitle: string | null;

src/categories/types/CategoryDetails.ts

@@ -147,6 +147,7 @@ export interface CategoryDetails_category {
   privateMetadata: (CategoryDetails_category_privateMetadata | null)[];
   backgroundImage: CategoryDetails_category_backgroundImage | null;
   name: string;
+  slug: string;
   descriptionJson: any;
   seoDescription: string | null;
   seoTitle: string | null;

src/categories/types/CategoryUpdate.ts

@@ -38,6 +38,7 @@ export interface CategoryUpdate_categoryUpdate_category {
   privateMetadata: (CategoryUpdate_categoryUpdate_category_privateMetadata | null)[];
   backgroundImage: CategoryUpdate_categoryUpdate_category_backgroundImage | null;
   name: string;
+  slug: string;
   descriptionJson: any;
   seoDescription: string | null;
   seoTitle: string | null;

src/categories/views/CategoryCreate.tsx

@@ -52,7 +52,8 @@ export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
           seo: {
             description: formData.seoDescription,
             title: formData.seoTitle
-          }
+          },
+          slug: formData.slug
         },
         parent: parentId || null
       }

src/categories/views/CategoryDetails.tsx

@@ -186,7 +186,8 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
           seo: {
             description: formData.seoDescription,
             title: formData.seoTitle
-          }
+          },
+          slug: formData.slug
         }
       }
     });

src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx

@@ -28,6 +28,7 @@ export interface CollectionCreatePageFormData extends MetadataFormData {
   backgroundImageAlt: string;
   description: RawDraftContentState;
   name: string;
+  slug: string;
   publicationDate: string;
   isPublished: boolean;
   seoDescription: string;
@@ -55,7 +56,8 @@ const initialForm: CollectionCreatePageFormData = {
   privateMetadata: [],
   publicationDate: "",
   seoDescription: "",
-  seoTitle: ""
+  seoTitle: "",
+  slug: ""
 };
 
 const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
@@ -140,6 +142,8 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
                     defaultMessage:
                       "Add search engine title and description to make this collection easier to find"
                   })}
+                  slug={data.slug}
+                  slugPlaceholder={data.name}
                   title={data.seoTitle}
                   titlePlaceholder={data.name}
                   onChange={change}

src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx

@@ -33,6 +33,7 @@ export interface CollectionDetailsPageFormData extends MetadataFormData {
   backgroundImageAlt: string;
   description: RawDraftContentState;
   name: string;
+  slug: string;
   publicationDate: string;
   seoDescription: string;
   seoTitle: string;
@@ -101,7 +102,8 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
         ),
         publicationDate: maybe(() => collection.publicationDate, ""),
         seoDescription: maybe(() => collection.seoDescription, ""),
-        seoTitle: maybe(() => collection.seoTitle, "")
+        seoTitle: maybe(() => collection.seoTitle, ""),
+        slug: collection?.slug || ""
       }}
       onSubmit={handleSubmit}
       confirmLeave
@@ -149,6 +151,8 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
                     defaultMessage:
                       "Add search engine title and description to make this collection easier to find"
                   })}
+                  slug={data.slug}
+                  slugPlaceholder={data.name}
                   title={data.seoTitle}
                   titlePlaceholder={maybe(() => collection.name)}
                   onChange={change}

src/collections/fixtures.ts

@@ -167,5 +167,6 @@ export const collection: (
   },
   publicationDate: "2018-08-25T18:45:54.125Z",
   seoDescription: "",
-  seoTitle: ""
+  seoTitle: "",
+  slug: "summer-collection"
 });

src/collections/types/CollectionDetails.ts

@@ -71,6 +71,7 @@ export interface CollectionDetails_collection {
   metadata: (CollectionDetails_collection_metadata | null)[];
   privateMetadata: (CollectionDetails_collection_privateMetadata | null)[];
   backgroundImage: CollectionDetails_collection_backgroundImage | null;
+  slug: string;
   descriptionJson: any;
   publicationDate: any | null;
   seoDescription: string | null;

src/collections/types/CollectionUpdate.ts

@@ -34,6 +34,7 @@ export interface CollectionUpdate_collectionUpdate_collection {
   metadata: (CollectionUpdate_collectionUpdate_collection_metadata | null)[];
   privateMetadata: (CollectionUpdate_collectionUpdate_collection_privateMetadata | null)[];
   backgroundImage: CollectionUpdate_collectionUpdate_collection_backgroundImage | null;
+  slug: string;
   descriptionJson: any;
   publicationDate: any | null;
   seoDescription: string | null;

src/collections/types/CollectionUpdateWithHomepage.ts

@@ -56,6 +56,7 @@ export interface CollectionUpdateWithHomepage_collectionUpdate_collection {
   metadata: (CollectionUpdateWithHomepage_collectionUpdate_collection_metadata | null)[];
   privateMetadata: (CollectionUpdateWithHomepage_collectionUpdate_collection_privateMetadata | null)[];
   backgroundImage: CollectionUpdateWithHomepage_collectionUpdate_collection_backgroundImage | null;
+  slug: string;
   descriptionJson: any;
   publicationDate: any | null;
   seoDescription: string | null;

src/collections/types/CreateCollection.ts

@@ -34,6 +34,7 @@ export interface CreateCollection_collectionCreate_collection {
   metadata: (CreateCollection_collectionCreate_collection_metadata | null)[];
   privateMetadata: (CreateCollection_collectionCreate_collection_privateMetadata | null)[];
   backgroundImage: CreateCollection_collectionCreate_collection_backgroundImage | null;
+  slug: string;
   descriptionJson: any;
   publicationDate: any | null;
   seoDescription: string | null;

src/collections/views/CollectionDetails.tsx

@@ -180,7 +180,8 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
             seo: {
               description: formData.seoDescription,
               title: formData.seoTitle
-            }
+            },
+            slug: formData.slug
           };
           const isFeatured = data.shop.homepageCollection
             ? data.shop.homepageCollection.id === data.collection.id

src/components/SeoForm/SeoForm.tsx

@@ -7,6 +7,7 @@ import Typography from "@material-ui/core/Typography";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
+import slugify from "slugify";
 
 import CardTitle from "../CardTitle";
 import FormSpacer from "../FormSpacer";
@@ -68,6 +69,8 @@ interface SeoFormProps {
   loading?: boolean;
   helperText?: string;
   title: string;
+  slug: string;
+  slugPlaceholder?: string;
   titlePlaceholder: string;
   onChange(event: any);
   onClick?();
@@ -81,6 +84,8 @@ const SeoForm: React.FC<SeoFormProps> = props => {
     helperText,
     loading,
     title,
+    slug,
+    slugPlaceholder,
     titlePlaceholder,
     onChange
   } = props;
@@ -89,6 +94,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
   const intl = useIntl();
   const [expanded, setExpansionStatus] = React.useState(false);
   const toggleExpansion = () => setExpansionStatus(!expanded);
+  const shouldDisplayHelperText = helperText && !expanded;
 
   return (
     <Card>
@@ -106,7 +112,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
         }
       />
       <CardContent>
-        {helperText && (
+        {shouldDisplayHelperText && (
           <Typography
             className={classNames({ [classes.helperText]: expanded })}
           >
@@ -115,14 +121,46 @@ const SeoForm: React.FC<SeoFormProps> = props => {
         )}
         {expanded && (
           <div className={classes.container}>
+            <TextField
+              name="slug"
+              label={
+                <div className={classes.labelContainer}>
+                  <div className={classes.label}>
+                    <FormattedMessage defaultMessage="Slug" />
+                  </div>
+                  {slug?.length > 0 && (
+                    <span>
+                      <FormattedMessage
+                        defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
+                        description="character limit"
+                        values={{
+                          maxCharacters: 70,
+                          numberOfCharacters: slug?.length
+                        }}
+                      />
+                    </span>
+                  )}
+                </div>
+              }
+              helperText={intl.formatMessage({
+                defaultMessage:
+                  "If empty, the preview shows what will be autogenerated."
+              })}
+              value={slug?.slice(0, 69)}
+              disabled={loading || disabled}
+              placeholder={slug || slugify(slugPlaceholder, { lower: true })}
+              onChange={onChange}
+              fullWidth
+            />
+            <FormSpacer />
             <TextField
               name="seoTitle"
               label={
                 <div className={classes.labelContainer}>
                   <div className={classes.label}>
                     <FormattedMessage defaultMessage="Search engine title" />
                   </div>
-                  {title.length > 0 && (
+                  {title?.length > 0 && (
                     <span>
                       <FormattedMessage
                         defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
@@ -140,7 +178,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}
@@ -154,7 +192,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"
@@ -172,7 +210,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

src/fragments/categories.ts

@@ -24,6 +24,7 @@ export const categoryDetailsFragment = gql`
       url
     }
     name
+    slug
     descriptionJson
     seoDescription
     seoTitle

src/fragments/collections.ts

@@ -20,6 +20,7 @@ export const collectionDetailsFragment = gql`
       alt
       url
     }
+    slug
     descriptionJson
     publicationDate
     seoDescription