Fix visibility card view

CHANGELOG.md

@@ -36,6 +36,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add phone validation in the GraphQL API to handle the library upgrade - #4156 by @NyanKiyoshi
 - Fix view all orders button - #4173 by @benekex2
 - Fix applying discounts in checkout's subtotal calculation in API - #4192 by @maarcingebala
+- Fix visibility card view - #4198 by @benekex2
 
 ## 2.6.0
 

saleor/static/dashboard-next/collections/components/CollectionCreatePage/CollectionCreatePage.tsx

@@ -8,12 +8,12 @@ import { CardSpacer } from "../../../components/CardSpacer";
 import CardTitle from "../../../components/CardTitle";
 import { ConfirmButtonTransitionState } from "../../../components/ConfirmButton/ConfirmButton";
 import { Container } from "../../../components/Container";
-import { ControlledSwitch } from "../../../components/ControlledSwitch";
 import Form from "../../../components/Form";
 import Grid from "../../../components/Grid";
 import PageHeader from "../../../components/PageHeader";
 import SaveButtonBar from "../../../components/SaveButtonBar";
 import SeoForm from "../../../components/SeoForm";
+import VisibilityCard from "../../../components/VisibilityCard";
 import i18n from "../../../i18n";
 import { UserError } from "../../../types";
 import CollectionDetails from "../CollectionDetails/CollectionDetails";
@@ -27,6 +27,7 @@ export interface CollectionCreatePageFormData {
   backgroundImageAlt: string;
   description: RawDraftContentState;
   name: string;
+  publicationDate: string;
   isPublished: boolean;
   seoDescription: string;
   seoTitle: string;
@@ -49,6 +50,7 @@ const initialForm: CollectionCreatePageFormData = {
   description: null,
   isPublished: false,
   name: "",
+  publicationDate: "",
   seoDescription: "",
   seoTitle: ""
 };
@@ -140,14 +142,11 @@ const CollectionCreatePage: React.StatelessComponent<
                   })}
                 />
                 <CardContent>
-                  <ControlledSwitch
-                    checked={data.isPublished}
+                  <VisibilityCard
+                    data={data}
+                    errors={formErrors}
                     disabled={disabled}
-                    name="isPublished"
                     onChange={change}
-                    label={i18n.t("Publish on storefront", {
-                      context: "button"
-                    })}
                   />
                 </CardContent>
               </Card>

saleor/static/dashboard-next/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx

@@ -5,24 +5,26 @@ import AppHeader from "../../../components/AppHeader";
 import { CardSpacer } from "../../../components/CardSpacer";
 import { ConfirmButtonTransitionState } from "../../../components/ConfirmButton/ConfirmButton";
 import { Container } from "../../../components/Container";
+import { ControlledSwitch } from "../../../components/ControlledSwitch";
 import Form from "../../../components/Form";
 import Grid from "../../../components/Grid";
 import PageHeader from "../../../components/PageHeader";
 import SaveButtonBar from "../../../components/SaveButtonBar";
 import SeoForm from "../../../components/SeoForm";
+import VisibilityCard from "../../../components/VisibilityCard";
 import i18n from "../../../i18n";
 import { maybe } from "../../../misc";
 import { ListActions, PageListProps } from "../../../types";
 import { CollectionDetails_collection } from "../../types/CollectionDetails";
 import CollectionDetails from "../CollectionDetails/CollectionDetails";
 import { CollectionImage } from "../CollectionImage/CollectionImage";
 import CollectionProducts from "../CollectionProducts/CollectionProducts";
-import CollectionStatus from "../CollectionStatus/CollectionStatus";
 
 export interface CollectionDetailsPageFormData {
   backgroundImageAlt: string;
   description: RawDraftContentState;
   name: string;
+  publicationDate: string;
   seoDescription: string;
   seoTitle: string;
   isFeatured: boolean;
@@ -54,83 +56,97 @@ const CollectionDetailsPage: React.StatelessComponent<
   onImageUpload,
   onSubmit,
   ...collectionProductsProps
-}: CollectionDetailsPageProps) => (
-  <Form
-    initial={{
-      backgroundImageAlt: maybe(() => collection.backgroundImage.alt, ""),
-      description: maybe(() => JSON.parse(collection.descriptionJson)),
-      isFeatured,
-      isPublished: maybe(() => collection.isPublished, false),
-      name: maybe(() => collection.name, ""),
-      seoDescription: maybe(() => collection.seoDescription, ""),
-      seoTitle: maybe(() => collection.seoTitle, "")
-    }}
-    onSubmit={onSubmit}
-    confirmLeave
-  >
-    {({ change, data, errors: formErrors, hasChanged, submit }) => (
-      <Container>
-        <AppHeader onBack={onBack}>{i18n.t("Collections")}</AppHeader>
-        <PageHeader title={maybe(() => collection.name)} />
-        <Grid>
-          <div>
-            <CollectionDetails
-              collection={collection}
-              data={data}
-              disabled={disabled}
-              errors={formErrors}
-              onChange={change}
-            />
-            <CardSpacer />
-            <CollectionImage
-              data={data}
-              image={maybe(() => collection.backgroundImage)}
-              onImageDelete={onImageDelete}
-              onImageUpload={onImageUpload}
-              onChange={change}
-            />
-            <CardSpacer />
-            <CollectionProducts
-              disabled={disabled}
-              collection={collection}
-              {...collectionProductsProps}
-            />
-            <CardSpacer />
-            <SeoForm
-              description={data.seoDescription}
-              disabled={disabled}
-              descriptionPlaceholder=""
-              helperText={i18n.t(
-                "Add search engine title and description to make this collection easier to find",
-                {
-                  context: "help text"
-                }
-              )}
-              title={data.seoTitle}
-              titlePlaceholder={maybe(() => collection.name)}
-              onChange={change}
-            />
-          </div>
-          <div>
+}: CollectionDetailsPageProps) => {
+  return (
+    <Form
+      initial={{
+        backgroundImageAlt: maybe(() => collection.backgroundImage.alt, ""),
+        description: maybe(() => JSON.parse(collection.descriptionJson)),
+        isFeatured,
+        isPublished: maybe(() => collection.isPublished, false),
+        name: maybe(() => collection.name, ""),
+        publicationDate: maybe(() => collection.publicationDate, ""),
+        seoDescription: maybe(() => collection.seoDescription, ""),
+        seoTitle: maybe(() => collection.seoTitle, "")
+      }}
+      onSubmit={onSubmit}
+      confirmLeave
+    >
+      {({ change, data, errors: formErrors, hasChanged, submit }) => (
+        <Container>
+          <AppHeader onBack={onBack}>{i18n.t("Collections")}</AppHeader>
+          <PageHeader title={maybe(() => collection.name)} />
+          <Grid>
             <div>
-              <CollectionStatus
+              <CollectionDetails
+                collection={collection}
                 data={data}
                 disabled={disabled}
+                errors={formErrors}
                 onChange={change}
               />
+              <CardSpacer />
+              <CollectionImage
+                data={data}
+                image={maybe(() => collection.backgroundImage)}
+                onImageDelete={onImageDelete}
+                onImageUpload={onImageUpload}
+                onChange={change}
+              />
+              <CardSpacer />
+              <CollectionProducts
+                disabled={disabled}
+                collection={collection}
+                {...collectionProductsProps}
+              />
+              <CardSpacer />
+              <SeoForm
+                description={data.seoDescription}
+                disabled={disabled}
+                descriptionPlaceholder=""
+                helperText={i18n.t(
+                  "Add search engine title and description to make this collection easier to find",
+                  {
+                    context: "help text"
+                  }
+                )}
+                title={data.seoTitle}
+                titlePlaceholder={maybe(() => collection.name)}
+                onChange={change}
+              />
+            </div>
+            <div>
+              <div>
+                <VisibilityCard
+                  data={data}
+                  errors={formErrors}
+                  disabled={disabled}
+                  onChange={change}
+                >
+                  <ControlledSwitch
+                    checked={data.isFeatured}
+                    disabled={disabled}
+                    name="isFeatured"
+                    onChange={change}
+                    label={i18n.t("Feature on Homepage", {
+                      context: "button"
+                    })}
+                  />
+                </VisibilityCard>
+              </div>
             </div>
-          </div>
-        </Grid>
-        <SaveButtonBar
-          state={saveButtonBarState}
-          disabled={disabled || !hasChanged}
-          onCancel={onBack}
-          onDelete={onCollectionRemove}
-          onSave={submit}
-        />
-      </Container>
-    )}
-  </Form>
-);
+          </Grid>
+          <SaveButtonBar
+            state={saveButtonBarState}
+            disabled={disabled || !hasChanged}
+            onCancel={onBack}
+            onDelete={onCollectionRemove}
+            onSave={submit}
+          />
+        </Container>
+      )}
+    </Form>
+  );
+};
 CollectionDetailsPage.displayName = "CollectionDetailsPage";
 export default CollectionDetailsPage;

saleor/static/dashboard-next/collections/fixtures.ts

@@ -117,6 +117,7 @@ export const collection: (
       startCursor: ""
     }
   },
+  publicationDate: "2018-08-25T18:45:54.125Z",
   seoDescription: "",
   seoTitle: ""
 });

saleor/static/dashboard-next/collections/queries.ts

@@ -27,6 +27,7 @@ export const collectionDetailsFragment = gql`
       url
     }
     descriptionJson
+    publicationDate
     seoDescription
     seoTitle
     isPublished

saleor/static/dashboard-next/collections/types/CollectionDetails.ts

@@ -58,6 +58,7 @@ export interface CollectionDetails_collection {
   name: string;
   backgroundImage: CollectionDetails_collection_backgroundImage | null;
   descriptionJson: any;
+  publicationDate: any | null;
   seoDescription: string | null;
   seoTitle: string | null;
   products: CollectionDetails_collection_products | null;

saleor/static/dashboard-next/collections/types/CollectionDetailsFragment.ts

@@ -19,6 +19,7 @@ export interface CollectionDetailsFragment {
   name: string;
   backgroundImage: CollectionDetailsFragment_backgroundImage | null;
   descriptionJson: any;
+  publicationDate: any | null;
   seoDescription: string | null;
   seoTitle: string | null;
 }

saleor/static/dashboard-next/collections/types/CollectionUpdate.ts

@@ -27,6 +27,7 @@ export interface CollectionUpdate_collectionUpdate_collection {
   name: string;
   backgroundImage: CollectionUpdate_collectionUpdate_collection_backgroundImage | null;
   descriptionJson: any;
+  publicationDate: any | null;
   seoDescription: string | null;
   seoTitle: string | null;
 }

saleor/static/dashboard-next/collections/types/CollectionUpdateWithHomepage.ts

@@ -49,6 +49,7 @@ export interface CollectionUpdateWithHomepage_collectionUpdate_collection {
   name: string;
   backgroundImage: CollectionUpdateWithHomepage_collectionUpdate_collection_backgroundImage | null;
   descriptionJson: any;
+  publicationDate: any | null;
   seoDescription: string | null;
   seoTitle: string | null;
 }

saleor/static/dashboard-next/collections/types/CreateCollection.ts

@@ -27,6 +27,7 @@ export interface CreateCollection_collectionCreate_collection {
   name: string;
   backgroundImage: CreateCollection_collectionCreate_collection_backgroundImage | null;
   descriptionJson: any;
+  publicationDate: any | null;
   seoDescription: string | null;
   seoTitle: string | null;
 }

saleor/static/dashboard-next/collections/views/CollectionDetails.tsx

@@ -144,11 +144,12 @@ export const CollectionDetails: React.StatelessComponent<
               const handleSubmit = (
                 formData: CollectionDetailsPageFormData
               ) => {
-                const input = {
+                const input: CollectionInput = {
                   backgroundImageAlt: formData.backgroundImageAlt,
                   descriptionJson: JSON.stringify(formData.description),
                   isPublished: formData.isPublished,
                   name: formData.name,
+                  publicationDate: formData.publicationDate,
                   seo: {
                     description: formData.seoDescription,
                     title: formData.seoTitle