Merge pull request #241 from zimmerman-team/feat/DX-1821/DX-1828/DX-1…

…815/DX-1752 Feat/dx 1821/dx 1828/dx 1815/dx 1752
zimmerman-team · Oct 1, 2024 · 8b87f00 · 8b87f00
2 parents 6e45abc + 0aa24c8
commit 8b87f00
Show file tree

Hide file tree

Showing 10 changed files with 131 additions and 42 deletions.
diff --git a/src/app/hooks/useDataThemesEchart.tsx b/src/app/hooks/useDataThemesEchart.tsx
@@ -79,6 +79,7 @@ export function useDataThemesEchart() {
       barWidth,
       xAxisLineColor,
       xAxisLabelFontSize,
+      autoBarWidth,
       focus,
       xAxisLabelColor,
       xAxisLabelInterval,
@@ -136,11 +137,11 @@ export function useDataThemesEchart() {
             {
               type: "inside",
               start: 0,
-              end: 20,
+              end: 100,
             },
             {
               start: 0,
-              end: 20,
+              end: 100,
             },
           ]
         : null,
@@ -162,7 +163,7 @@ export function useDataThemesEchart() {
           emphasis: {
             focus,
           },
-          barWidth,
+          barWidth: autoBarWidth ? undefined : barWidth,
         },
       ],
       tooltip: {

diff --git a/src/app/modules/chart-module/components/toolbox/index.tsx b/src/app/modules/chart-module/components/toolbox/index.tsx
@@ -217,6 +217,7 @@ export function ChartModuleToolBox(props: Readonly<ChartToolBoxProps>) {
               onMouseOverNavBtn={onMouseOverNavBtn}
               setChartFromAPI={props.setChartFromAPI}
               deselectDataset={props.deselectDataset}
+              setShowSnackbar={setShowSnackbar}
             />
           )}
 
@@ -233,24 +234,83 @@ export function ChartModuleToolBox(props: Readonly<ChartToolBoxProps>) {
         onClose={() => setShowSnackbar(null)}
         open={showSnackbar !== null && showSnackbar !== ""}
       >
-        <SnackbarContent
-          message={showSnackbar}
-          aria-describedby="create-chart-snackbar-content"
-          action={
-            <>
-              {!location.pathname.includes("report") && (
-                <button
-                  onClick={() => {
-                    setShowSnackbar(null);
-                    history.push("/report/new/initial");
-                  }}
-                >
-                  CREATE NEW REPORT
-                </button>
-              )}
-            </>
-          }
-        />
+        <div
+          css={`
+            border-radius: 20px;
+            width: 1232px;
+            padding: 8px 0;
+            display: flex;
+            align-items: center;
+            background: #fff;
+            box-shadow: 0px 0px 10px 0px rgba(152, 161, 170, 0.6);
+            justify-content: center;
+            column-gap: 48px;
+            p {
+              font-size: 18px;
+              font-style: normal;
+              margin: 0;
+              line-height: 20px; /* 111.111% */
+              letter-spacing: 0.5px;
+            }
+            button {
+              font-size: 14px;
+              font-style: normal;
+              font-weight: 500;
+              font-family: Inter;
+              line-height: normal;
+              text-align: center;
+              color: #fff;
+              background: #231d2c;
+              border-radius: 20px;
+              border: none;
+              padding: 12px 27px;
+              cursor: pointer;
+            }
+          `}
+        >
+          <p
+            css={`
+              font-family: GothamNarrow-Bold;
+              font-weight: 400;
+            `}
+          >
+            Your chart has been successfully created! You can now find it in
+            your library.
+          </p>
+          <div
+            css={`
+              display: flex;
+              align-items: center;
+              column-gap: 24px;
+            `}
+          >
+            <button
+              onClick={() => {
+                setShowSnackbar(null);
+                history.push("/report/new/initial");
+              }}
+            >
+              CREATE REPORT
+            </button>
+            <p
+              css={`
+                font-family: GothamNarrow-Book;
+                font-weight: 325;
+              `}
+            >
+              or
+            </p>
+
+            <button
+              onClick={() => {
+                setShowSnackbar(null);
+                history.push("/");
+              }}
+            >
+              BACK TO EXPLORE
+            </button>
+          </div>
+        </div>
       </InfoSnackbar>
     </>
   );

diff --git a/src/app/modules/chart-module/components/toolbox/steps/index.tsx b/src/app/modules/chart-module/components/toolbox/steps/index.tsx
@@ -18,7 +18,7 @@ import { isEmpty } from "lodash";
 import { ToolboxNavType } from "app/modules/chart-module/components/toolbox/data";
 
 import { ChartRenderedItem } from "app/modules/chart-module/data";
-import { chartFromReportAtom } from "app/state/recoil/atoms";
+import { chartFromReportAtom, newChartAtom } from "app/state/recoil/atoms";
 import { useRecoilState } from "recoil";
 
 interface ChartToolBoxStepsProps {
@@ -45,6 +45,7 @@ interface ChartToolBoxStepsProps {
     value: React.SetStateAction<ChartRenderedItem | null>
   ) => void;
   deselectDataset: () => void;
+  setShowSnackbar: (value: string | null) => void;
 }
 
 export function ChartToolBoxSteps(props: ChartToolBoxStepsProps) {
@@ -56,6 +57,7 @@ export function ChartToolBoxSteps(props: ChartToolBoxStepsProps) {
   const appliedFilters = useStoreState(
     (state) => state.charts.appliedFilters.value
   );
+  const [newChart, setNewChart] = useRecoilState(newChartAtom);
   const [chartFromReport, setChartFromReport] =
     useRecoilState(chartFromReportAtom);
   let appliedFiltersCount = 0;
@@ -71,6 +73,15 @@ export function ChartToolBoxSteps(props: ChartToolBoxStepsProps) {
       if (chartFromReport.state) {
         setChartFromReport((prev) => ({ ...prev, chartId: page }));
         history.push(`/report/${reportPage}/edit`);
+      } else {
+        if (newChart.state && newChart.chartId === page) {
+          props.setShowSnackbar("Chart saved successfully");
+          setNewChart({
+            state: false,
+            chartId: null,
+          });
+        }
+        history.push(`/chart/${page}`);
       }
     }
   };
@@ -226,7 +237,7 @@ export function ChartToolBoxSteps(props: ChartToolBoxStepsProps) {
           }}
           data-cy="toolbox-chart-next"
         >
-          {currentPathIndex < 5 ? "Next" : "Save"}
+          {currentPathIndex < 5 ? "Next" : "Save and Preview"}
         </button>
       </div>
     </div>

diff --git a/src/app/modules/chart-module/index.tsx b/src/app/modules/chart-module/index.tsx
@@ -57,6 +57,7 @@ import {
   chartFromReportAtom,
   isChartAIAgentActive,
   isChartAutoMappedAtom,
+  newChartAtom,
   planDialogAtom,
 } from "app/state/recoil/atoms";
 import { IDatasetDetails } from "./components/toolbox/steps/panels-content/SelectDataset";
@@ -76,6 +77,8 @@ export default function ChartModule() {
 
   const setPlanDialog = useSetRecoilState(planDialogAtom);
 
+  const setNewChart = useSetRecoilState(newChartAtom);
+
   const [rawViz, setRawViz] = React.useState<any>(null);
   const [toolboxOpen, setToolboxOpen] = React.useState(Boolean(isValidView));
   const [savedChanges, setSavedChanges] = React.useState<boolean>(false);
@@ -333,6 +336,10 @@ export default function ChartModule() {
             onTryAgain: () => {},
           });
         }
+        setNewChart({
+          state: true,
+          chartId: data.id,
+        });
         history.push(
           `/chart/${data.id}/mapping${
             chartFromReport.state

diff --git a/src/app/modules/home-module/components/Footer/DesktopFooter.tsx b/src/app/modules/home-module/components/Footer/DesktopFooter.tsx
@@ -216,25 +216,6 @@ export default function DesktopFooter() {
                   ? "Oops! Something went wrong with the request! Please fill your email again."
                   : "  You will receive occasional emails from DX. You always have choice to unsubscribe within every Email."}
               </p>
-              <a
-                rel="noreferrer noopener"
-                href={`https://${process.env.REACT_APP_AUTH0_DOMAIN}/authorize?response_type=token&client_id=${process.env.REACT_APP_AUTH0_CLIENT}&audience=${process.env.REACT_APP_AUTH0_AUDIENCE}&scope=openid%20profile%20email&redirect_uri=${window.location.origin}/callback`}
-              >
-                <button
-                  css={`
-                    height: 40px;
-                    width: 120px;
-                    border-radius: 10px;
-                    background: "#000";
-                    cursor: pointer;
-                    color: #fff;
-                    border: none;
-                    outline: none;
-                  `}
-                >
-                  Sign In
-                </button>
-              </a>
             </Grid>
           </Grid>
           <div

diff --git a/src/app/modules/home-module/index.tsx b/src/app/modules/home-module/index.tsx
@@ -11,6 +11,7 @@ import HomeFooter from "app/modules/home-module/components/Footer";
 import DatasetDetailImage from "app/modules/home-module/assets/dataset-detail.png";
 import { ReactComponent as GoogleIcon } from "app/modules/onboarding-module/asset/google-img.svg";
 import { ReactComponent as LinkedInIcon } from "app/modules/onboarding-module/asset/linkedIn-img.svg";
+import { ReactComponent as MicrosoftIcon } from "app/modules/onboarding-module/asset/microsoft-img.svg";
 import HeroEllipses from "app/modules/home-module/assets/hero-ellipses.svg";
 
 import { homeDisplayAtom } from "app/state/recoil/atoms";
@@ -142,6 +143,9 @@ export default function HomeModule() {
                       <button onClick={() => socialAuth("linkedin")}>
                         <LinkedInIcon /> sign in for free
                       </button>
+                      <button onClick={() => socialAuth("windowslive")}>
+                        <MicrosoftIcon /> sign in for free
+                      </button>
                     </div>
                   )}
                 </div>

diff --git a/src/app/modules/home-module/sub-modules/about/index.tsx b/src/app/modules/home-module/sub-modules/about/index.tsx
@@ -16,6 +16,7 @@ import { useAuth0 } from "@auth0/auth0-react";
 import { socialAuth } from "app/utils/socialAuth";
 import { ReactComponent as GoogleIcon } from "app/modules/onboarding-module/asset/google-img.svg";
 import { ReactComponent as LinkedInIcon } from "app/modules/onboarding-module/asset/linkedIn-img.svg";
+import { ReactComponent as MicrosoftIcon } from "app/modules/onboarding-module/asset/microsoft-img.svg";
 import SiemAvi from "app/modules/home-module/assets/team/siem.png";
 import JohnAvi from "app/modules/home-module/assets/team/john.png";
 import KennyAvi from "app/modules/home-module/assets/team/kenny.png";
@@ -382,6 +383,9 @@ export default function AboutModule() {
                   <button onClick={() => socialAuth("linkedin")}>
                     <LinkedInIcon /> sign in for free
                   </button>
+                  <button onClick={() => socialAuth("windowslive")}>
+                    <MicrosoftIcon /> sign in for free
+                  </button>
                 </div>
               )}
             </div>

diff --git a/src/app/modules/home-module/sub-modules/partners/components/empowerBlock.tsx b/src/app/modules/home-module/sub-modules/partners/components/empowerBlock.tsx
@@ -5,6 +5,7 @@ import { socialAuth } from "app/utils/socialAuth";
 import { HomePrimaryButton } from "app/components/Styled/button";
 import { ReactComponent as GoogleIcon } from "app/modules/onboarding-module/asset/google-img.svg";
 import { ReactComponent as LinkedInIcon } from "app/modules/onboarding-module/asset/linkedIn-img.svg";
+import { ReactComponent as MicrosoftIcon } from "app/modules/onboarding-module/asset/microsoft-img.svg";
 import { ReactComponent as Ellipses } from "app/modules/home-module/assets/ellipses.svg";
 import { ReactComponent as EllipsesMobile } from "app/modules/home-module/assets/ellipses-mobile.svg";
 import {
@@ -147,6 +148,9 @@ export default function EmpowerBlock(props: {
           <button onClick={() => socialAuth("linkedin")}>
             <LinkedInIcon /> sign in for free
           </button>
+          <button onClick={() => socialAuth("windowslive")}>
+            <MicrosoftIcon /> sign in for free
+          </button>
         </div>
       )}
       <Ellipses

diff --git a/src/app/modules/home-module/sub-modules/pricing/components/features.tsx b/src/app/modules/home-module/sub-modules/pricing/components/features.tsx
@@ -54,6 +54,11 @@ const Features = () => {
           info: "Connect data from your database",
           values: ["", true, true, true],
         },
+        {
+          name: "Microsoft Drive data connect",
+          info: "Connect data from your Microsoft Drive",
+          values: ["", true, true, true],
+        },
         {
           name: "Google Drive data connect",
           info: "Connect data from your Google Drive",

diff --git a/src/app/state/recoil/atoms/index.ts b/src/app/state/recoil/atoms/index.ts
@@ -115,6 +115,18 @@ export const chartFromReportAtom = atom<{
   effects_UNSTABLE: [persistAtom],
 });
 
+export const newChartAtom = atom<{
+  state: boolean;
+  chartId: string | null;
+}>({
+  key: "newChartAtom",
+  default: {
+    state: false,
+    chartId: null,
+  },
+  effects_UNSTABLE: [persistAtom],
+});
+
 export const dataUploadTabAtom = atom<"search" | "file">({
   key: "dataUploadTabAtom",
   default: "search",