Merge pull request #493 from topcoder-platform/PROD-2142_old-webdesign

hentrymartin · web-flow · commit 1c2189a98a1f · 2022-06-23T17:39:59.000+02:00
PROD-2142 added the breadcrumbs for the legacy designs -&gt; Develop
diff --git a/src-ts/lib/breadcrumb/Breadcrumb.tsx b/src-ts/lib/breadcrumb/Breadcrumb.tsx
@@ -36,6 +36,7 @@ const Breadcrumb: FC<BreadcrumbProps> = (props: BreadcrumbProps) => {
                                     <BreadcrumbItem
                                         index={0}
                                         item={{
+                                            ...props.items[props.items.length - 2],
                                             isElipsis: true,
                                             name: '...',
                                             url: props.items[props.items.length - 2].url,
@@ -44,6 +45,7 @@ const Breadcrumb: FC<BreadcrumbProps> = (props: BreadcrumbProps) => {
                                     <BreadcrumbItem
                                         index={1}
                                         item={{
+                                            ...props.items[props.items.length - 1],
                                             name: props.items[props.items.length - 1].name,
                                             url: props.items[props.items.length - 1].url,
                                         }}
diff --git a/src-ts/lib/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx b/src-ts/lib/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx
@@ -11,7 +11,7 @@ interface BreadcrumbItemProps {
 
 const BreadcrumbItem: FC<BreadcrumbItemProps> = (props: BreadcrumbItemProps) => {
     return (
-        <li key={props.index}>
+        <li key={props.index} onClick={() => props.item.onClick?.(props.item)}>
             <Link className={props.item.isElipsis && styles['elipsis']} to={props.item.url}>
                 {props.item.name}
             </Link>
diff --git a/src-ts/lib/breadcrumb/breadcrumb-item/breadcrumb-item.model.ts b/src-ts/lib/breadcrumb/breadcrumb-item/breadcrumb-item.model.ts
@@ -1,5 +1,6 @@
 export interface BreadcrumbItemModel {
     isElipsis?: boolean
     name: string
+    onClick?: (item: BreadcrumbItemModel) => void
     url: string
 }
diff --git a/src/autoSaveBeforeLogin.js b/src/autoSaveBeforeLogin.js
@@ -74,6 +74,7 @@ export const saveUpdatesMiddleware = ({ dispatch, getState }) => {
     const result = next(action);
 
     if ([ACTIONS.AUTO_SAVE.TRIGGER_COOKIE_CLEARED].includes(result.type)) {
+      clearCachedChallengeId();
       clearCache();
     } else if ([ACTIONS.AUTO_SAVE.TRIGGER_AUTO_SAVE].includes(result.type)) {
       handleAutoSave();
diff --git a/src/components/Banners/WebsiteDesignBannerLegacy/styles.module.scss b/src/components/Banners/WebsiteDesignBannerLegacy/styles.module.scss
@@ -5,13 +5,11 @@
   min-width: 610px;
   left: 0px;
   top: 0px;
-  margin: 16px 0px;
   
   display: grid;
   grid-template-columns: 1fr 359px;
   
   background: linear-gradient(263.22deg, #038664 2.65%, #075F96 98.14%), #FFFFFF;
-  border-radius: 8px;
   margin-bottom: -35px;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
diff --git a/src/components/ServicePrice/index.jsx b/src/components/ServicePrice/index.jsx
@@ -21,9 +21,7 @@ const ServicePrice = ({
   return (
     <div styleName="container">
       <PageRow styleName="inline">
-        <div styleName="iconWrapper">
-          {showIcon && icon && <>{icon}</>}
-        </div>
+        <div styleName="iconWrapper">{showIcon && icon && <>{icon}</>}</div>
         {showIcon && !icon && <WebsiteDesignIcon />}
         <div>
           {!hideTitle && <p styleName="serviceTitle">{serviceType}</p>}
diff --git a/src/constants/index.js b/src/constants/index.js
@@ -36,14 +36,21 @@ export const ROUTES = {
   INTAKE_FORM: "/self-service/wizard",
   HOME_PAGE: "/self-service",
   DASHBOARD_PAGE: "/work/dashboard",
-  WEBSITE_DESIGN: "/self-service/work/new/website-design/basic-info",
-  WEBSITE_DESIGN_REVIEW: "/self-service/work/new/website-design/review",
+  WEBSITE_DESIGN: "/self-service/work/new/website-design-new/basic-info",
+  WEBSITE_DESIGN_REVIEW: "/self-service/work/new/website-design-new/review",
   DATA_EXPLORATION: "/self-service/work/new/data-exploration/basic-info",
   DATA_EXPLORATION_REVIEW: "/self-service/work/new/data-exploration/review",
   PROBLEM_STATEMENT: "/self-service/work/new/data-advisory/basic-info",
   PROBLEM_STATEMENT_REVIEW: "/self-service/work/new/data-advisory/review",
   FIND_ME_DATA: "/self-service/work/new/find-me-data/basic-info",
   FIND_ME_DATA_REVIEW: "/self-service/work/new/find-me-data/review",
+  WEBSITE_DESIGN_LEGACY: "/self-service/work/new/website-design/basic-info",
+  WEBSITE_DESIGN_PURPOSE_LEGACY:
+    "/self-service/work/new/website-design/website-purpose",
+  WEBSITE_DESIGN_PAGE_DETAILS_LEGACY:
+    "/self-service/work/new/website-design/page-details",
+  WEBSITE_DESIGN_BRANDING_LEGACY:
+    "/self-service/work/new/website-design/branding",
 };
 
 /**
diff --git a/src/routes/BasicInfoLegacy/index.jsx b/src/routes/BasicInfoLegacy/index.jsx
@@ -11,12 +11,18 @@ import PageFoot from "../../components/PageElements/PageFoot";
 import PageH2 from "../../components/PageElements/PageH2";
 import Progress from "../../components/Progress";
 import { WebsiteDesignBannerLegacy } from "../../components/Banners/WebsiteDesignBannerLegacy";
-import { BUTTON_SIZE, BUTTON_TYPE, PageOptions } from "../../constants/";
+import {
+  BUTTON_SIZE,
+  BUTTON_TYPE,
+  PageOptions,
+  ROUTES,
+} from "../../constants/";
 import {
   saveBasicInfo,
   toggleSupportModal,
   savePageDetails,
   saveWorkType,
+  resetIntakeForm,
 } from "../../actions/form";
 import { triggerAutoSave } from "../../actions/autoSave";
 import { setProgressItem } from "../../actions/progress";
@@ -29,7 +35,7 @@ import {
   currencyFormat,
 } from "../../utils/";
 
-import { ContactSupportModal } from "../../../src-ts";
+import { Breadcrumb, ContactSupportModal } from "../../../src-ts";
 
 /**
  * Basic Info Page
@@ -63,6 +69,7 @@ const BasicInfoLegacy = ({
   const estimate = getDynamicPriceAndTimelineEstimate(fullState);
 
   const onBack = () => {
+    dispatch(resetIntakeForm(true));
     navigate("/self-service/wizard");
   };
 
@@ -141,6 +148,18 @@ const BasicInfoLegacy = ({
     toggleSupportModal(false);
   };
 
+  const breadcrumbs = [
+    { url: ROUTES.DASHBOARD_PAGE, name: "My work" },
+    {
+      url: ROUTES.INTAKE_FORM,
+      name: "Start work",
+      onClick: () => {
+        dispatch(resetIntakeForm(true));
+      },
+    },
+    { url: ROUTES.WEBSITE_DESIGN_LEGACY, name: "Basic Info" },
+  ];
+
   return (
     <>
       <LoadingSpinner show={isLoading} />
@@ -150,6 +169,7 @@ const BasicInfoLegacy = ({
         onClose={onHideSupportModal}
       />
       <Page>
+        <Breadcrumb items={breadcrumbs} />
         <WebsiteDesignBannerLegacy />
         <PageContent styleName="container">
           <PageH2>BASIC INFO</PageH2>
diff --git a/src/routes/BrandingLegacy/index.jsx b/src/routes/BrandingLegacy/index.jsx
@@ -12,13 +12,15 @@ import React, { useEffect, useState } from "react";
 import { connect, useDispatch, useSelector } from "react-redux";
 import withAuthentication from "hoc/withAuthentication";
 import { triggerAutoSave } from "../../actions/autoSave";
-import { saveBranding } from "../../actions/form";
+import { resetIntakeForm, saveBranding } from "../../actions/form";
 import { setProgressItem } from "../../actions/progress";
 import BackIcon from "../../assets/images/icon-back-arrow.svg";
 import BrandingForm from "./components/BrandingForm";
 import "./styles.module.scss";
 import { getDynamicPriceAndTimelineEstimate } from "utils/";
 import { WebsiteDesignBannerLegacy } from "../../components/Banners/WebsiteDesignBannerLegacy";
+import { ROUTES } from "../../constants";
+import { Breadcrumb } from "../../../src-ts";
 
 /**
  * Branding Page
@@ -106,10 +108,26 @@ const BrandingLegacy = ({ saveBranding, setProgressItem }) => {
     setProgressItem(6);
   };
 
+  const breadcrumbs = [
+    { url: ROUTES.DASHBOARD_PAGE, name: "My work" },
+    {
+      url: ROUTES.INTAKE_FORM,
+      name: "Start work",
+      onClick: () => {
+        dispatch(resetIntakeForm(true));
+      },
+    },
+    { url: ROUTES.WEBSITE_DESIGN_LEGACY, name: "Basic Info" },
+    { url: ROUTES.WEBSITE_DESIGN_PURPOSE_LEGACY, name: "Website purpose" },
+    { url: ROUTES.WEBSITE_DESIGN_PAGE_DETAILS_LEGACY, name: "Page details" },
+    { url: "#", name: "Branding" },
+  ];
+
   return (
     <>
       <LoadingSpinner show={isLoading} />
       <Page>
+        <Breadcrumb items={breadcrumbs} />
         <WebsiteDesignBannerLegacy />
         <PageContent>
           <PageH2>BRANDING</PageH2>
diff --git a/src/routes/PageDetailsLegacy/index.jsx b/src/routes/PageDetailsLegacy/index.jsx
@@ -12,12 +12,14 @@ import React, { useEffect, useRef, useState } from "react";
 import { connect, useDispatch, useSelector } from "react-redux";
 import { getDynamicPriceAndTimelineEstimate } from "utils/";
 import { triggerAutoSave } from "../../actions/autoSave";
-import { savePageDetails } from "../../actions/form";
+import { resetIntakeForm, savePageDetails } from "../../actions/form";
 import { setProgressItem } from "../../actions/progress";
 import BackIcon from "../../assets/images/icon-back-arrow.svg";
 import PageDetailsForm from "./components/PageDetailsForm";
 import { WebsiteDesignBannerLegacy } from "../../components/Banners/WebsiteDesignBannerLegacy";
 import "./styles.module.scss";
+import { ROUTES } from "../../constants";
+import { Breadcrumb } from "../../../src-ts";
 
 /**
  * Page Details Page
@@ -82,10 +84,25 @@ const PageDetailsLegacy = ({ savePageDetails, setProgressItem }) => {
     return isValid;
   };
 
+  const breadcrumbs = [
+    { url: ROUTES.DASHBOARD_PAGE, name: "My work" },
+    {
+      url: ROUTES.INTAKE_FORM,
+      name: "Start work",
+      onClick: () => {
+        dispatch(resetIntakeForm(true));
+      },
+    },
+    { url: ROUTES.WEBSITE_DESIGN_LEGACY, name: "Basic Info" },
+    { url: ROUTES.WEBSITE_DESIGN_PURPOSE_LEGACY, name: "Website purpose" },
+    { url: "#", name: "Page details" },
+  ];
+
   return (
     <>
       <LoadingSpinner show={isLoading} />
       <Page>
+        <Breadcrumb items={breadcrumbs} />
         <WebsiteDesignBannerLegacy />
         <PageContent>
           <PageH2>PAGE DETAILS</PageH2>
diff --git a/src/routes/Products/components/BasicInfo/index.jsx b/src/routes/Products/components/BasicInfo/index.jsx
@@ -19,6 +19,7 @@ import {
   toggleSupportModal,
   savePageDetails,
   saveWorkType,
+  resetIntakeForm,
 } from "../../../../actions/form";
 import { triggerAutoSave, triggerCookieClear } from "../../../../actions/autoSave";
 import { setProgressItem } from "../../../../actions/progress";
@@ -220,6 +221,14 @@ const BasicInfo = ({
     if (autoSave) navigate("/self-service");
   };
 
+  const onClickBreadcrumbItem = (item) => {
+    if (item.name === "Start work") {
+      dispatch(resetIntakeForm(true));
+      dispatch(triggerCookieClear());
+      saveBasicInfo(defaultFormData);
+    }
+  };
+
   return (
     <>
       <LoadingSpinner show={isLoading} />
@@ -229,7 +238,12 @@ const BasicInfo = ({
         onClose={onHideSupportModal}
       />
       <Page>
-        <Breadcrumb items={breadcrumb} />
+        <Breadcrumb
+          items={breadcrumb.map((item) => ({
+            ...item,
+            onClick: onClickBreadcrumbItem,
+          }))}
+        />
         <FeaturedWorkTypeBanner
           title={workItemConfig.title}
           subTitle={workItemConfig.subTitle}
diff --git a/src/routes/Review/components/AboutYourProject/index.jsx b/src/routes/Review/components/AboutYourProject/index.jsx
@@ -5,7 +5,7 @@ import PageUl from "../../../../components/PageElements/PageUl";
 const AboutYourProject = () => {
   return (
     <HelpBanner
-      styles={["turqoise", "marginTop24Mobile"]}
+      styles={["turqoise"]}
       title="Important things to know about your project"
     >
       <PageUl>
diff --git a/src/routes/Review/index.jsx b/src/routes/Review/index.jsx
@@ -15,7 +15,7 @@ import { BUTTON_SIZE, BUTTON_TYPE, MAX_COMPLETED_STEP } from "constants/";
 import React, { useEffect, useState } from "react";
 import { connect, useDispatch, useSelector } from "react-redux";
 import PaymentForm from "./components/PaymentForm";
-import { triggerAutoSave } from "../../actions/autoSave";
+import { triggerAutoSave, triggerCookieClear } from "../../actions/autoSave";
 import { setProgressItem } from "../../actions/progress";
 import BackIcon from "../../assets/images/icon-back-arrow.svg";
 import ReviewTable from "./components/ReviewTable";
@@ -203,6 +203,13 @@ const Review = ({
     formData.zipCode &&
     formData.checked;
 
+  const onClickBreadcrumbItem = (item) => {
+    if (item.name === "Start work") {
+      dispatch(resetIntakeForm(true));
+      dispatch(triggerCookieClear());
+    }
+  };
+
   return (
     <>
       <OrderContractModal
@@ -211,7 +218,12 @@ const Review = ({
       />
       <LoadingSpinner show={isLoading} />
       <Page>
-        <Breadcrumb items={breadcrumb} />
+        <Breadcrumb
+          items={breadcrumb.map((item) => ({
+            ...item,
+            onClick: onClickBreadcrumbItem,
+          }))}
+        />
         {banner}
         <PageContent styleName="container">
           <ServicePrice
diff --git a/src/routes/ReviewLegacy/index.jsx b/src/routes/ReviewLegacy/index.jsx
@@ -15,7 +15,12 @@ import PageDivider from "../../components/PageDivider";
 import PageFoot from "../../components/PageElements/PageFoot";
 import { resetIntakeForm } from "../../actions/form";
 import Progress from "../../components/Progress";
-import { BUTTON_SIZE, BUTTON_TYPE, MAX_COMPLETED_STEP } from "../../constants/";
+import {
+  BUTTON_SIZE,
+  BUTTON_TYPE,
+  MAX_COMPLETED_STEP,
+  ROUTES,
+} from "../../constants/";
 import PaymentForm from "../Review/components/PaymentForm";
 import { triggerAutoSave } from "../../actions/autoSave";
 import { setProgressItem } from "../../actions/progress";
@@ -36,7 +41,7 @@ import {
   setCookie,
   clearCachedChallengeId,
 } from "../../autoSaveBeforeLogin";
-import { OrderContractModal } from "../../../src-ts";
+import { Breadcrumb, OrderContractModal } from "../../../src-ts";
 import AboutYourProject from "../../routes/Review/components/AboutYourProject";
 import PageH2 from "../../components/PageElements/PageH2";
 
@@ -187,6 +192,22 @@ const ReviewLegacy = ({
     formData.zipCode &&
     formData.checked;
 
+  const breadcrumbs = [
+    { url: ROUTES.DASHBOARD_PAGE, name: "My work" },
+    {
+      url: ROUTES.INTAKE_FORM,
+      name: "Start work",
+      onClick: () => {
+        dispatch(resetIntakeForm(true));
+      },
+    },
+    { url: ROUTES.WEBSITE_DESIGN_LEGACY, name: "Basic Info" },
+    { url: ROUTES.WEBSITE_DESIGN_PURPOSE_LEGACY, name: "Website purpose" },
+    { url: ROUTES.WEBSITE_DESIGN_PAGE_DETAILS_LEGACY, name: "Page details" },
+    { url: ROUTES.WEBSITE_DESIGN_BRANDING_LEGACY, name: "Branding" },
+    { url: "#", name: "Review" },
+  ];
+
   return (
     <>
       <OrderContractModal
@@ -195,6 +216,7 @@ const ReviewLegacy = ({
       />
       <LoadingSpinner show={isLoading} />
       <Page>
+        <Breadcrumb items={breadcrumbs} />
         {banner}
         <PageContent styleName="container">
           <PageH2>REVIEW & PAYMENT</PageH2>
diff --git a/src/routes/WebsitePurposeLegacy/index.jsx b/src/routes/WebsitePurposeLegacy/index.jsx
diff --git a/src/services/challenge.js b/src/services/challenge.js
diff --git a/src/utils/products/WebDesignLegacy/index.js b/src/utils/products/WebDesignLegacy/index.js
diff --git a/src/utils/products/index.js b/src/utils/products/index.js

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`export interface BreadcrumbItemModel {`
`2`	`2`	`isElipsis?: boolean`
`3`	`3`	`name: string`
	`4`	`+ onClick?: (item: BreadcrumbItemModel) => void`
`4`	`5`	`url: string`
`5`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ import PageUl from "../../../../components/PageElements/PageUl";`
`5`	`5`	`const AboutYourProject = () => {`
`6`	`6`	`return (`
`7`	`7`	`<HelpBanner`
`8`		`- styles={["turqoise", "marginTop24Mobile"]}`
	`8`	`+ styles={["turqoise"]}`
`9`	`9`	`title="Important things to know about your project"`
`10`	`10`	`>`
`11`	`11`	`<PageUl>`