From a28cd973daac367ca8aef16724a97aeda896f5ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Tue, 19 Nov 2024 13:28:44 +0100 Subject: [PATCH] New home page base layout under FF (#5260) * Add feature flag for new home page * New home page with layout * Conditionally render new and old home page * Add changeset --- .changeset/serious-walls-hide.md | 5 + .featureFlags/generated.tsx | 18 +- .featureFlags/new-home-page.md | 7 + src/index.tsx | 302 +++++++++++++++---------------- src/newHome/HomePage.tsx | 17 ++ src/newHome/index.ts | 1 + 6 files changed, 194 insertions(+), 156 deletions(-) create mode 100644 .changeset/serious-walls-hide.md create mode 100644 .featureFlags/new-home-page.md create mode 100644 src/newHome/HomePage.tsx create mode 100644 src/newHome/index.ts diff --git a/.changeset/serious-walls-hide.md b/.changeset/serious-walls-hide.md new file mode 100644 index 00000000000..4e535aec473 --- /dev/null +++ b/.changeset/serious-walls-hide.md @@ -0,0 +1,5 @@ +--- +"saleor-dashboard": patch +--- + +Prepare base layout for new home, hide new home page under feature flag diff --git a/.featureFlags/generated.tsx b/.featureFlags/generated.tsx index 190f32768dd..8f0d4d79483 100644 --- a/.featureFlags/generated.tsx +++ b/.featureFlags/generated.tsx @@ -1,13 +1,13 @@ // @ts-nocheck -import R80834 from "./images/discounts-list.png" -import E27647 from "./images/improved_refunds.png" +import X97611 from "./images/discounts-list.png" +import B19783 from "./images/improved_refunds.png" -const discounts_rules = () => (<>

Discount rules

+const discounts_rules = () => (<>

Discount rules

Apply the new discounts rules to narrow your promotions audience. Set up conditions and channels that must be fulfilled to apply defined reward.

) -const improved_refunds = () => (<>

Improved refunds

+const improved_refunds = () => (<>

Improved refunds

Enable the enhanced refund feature to streamline your refund process:

) +const new_home_page = () => (<>) export const AVAILABLE_FLAGS = [{ name: "discounts_rules", @@ -36,4 +37,13 @@ export const AVAILABLE_FLAGS = [{ enabled: true, payload: "default", } +},{ + name: "new_home_page", + displayName: "New home page", + component: new_home_page, + visible: false, + content: { + enabled: false, + payload: "default", + } }] as const; diff --git a/.featureFlags/new-home-page.md b/.featureFlags/new-home-page.md new file mode 100644 index 00000000000..b52f81aa0fe --- /dev/null +++ b/.featureFlags/new-home-page.md @@ -0,0 +1,7 @@ +--- +name: new_home_page +displayName: New home page +enabled: false +payload: "default" +visible: false +--- \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index b444a37e4ae..217d20a09b3 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,6 +4,7 @@ import "./index.css"; import { ApolloProvider } from "@apollo/client"; import DemoBanner from "@dashboard/components/DemoBanner"; import { history, Route, Router } from "@dashboard/components/Router"; +import { useFlag } from "@dashboard/featureFlags"; import { PermissionEnum } from "@dashboard/graphql"; import useAppState from "@dashboard/hooks/useAppState"; import { ThemeProvider } from "@dashboard/theme"; @@ -56,11 +57,12 @@ import { FeatureFlagsProviderWithUser } from "./featureFlags/FeatureFlagsProvide import GiftCardSection from "./giftCards"; import { giftCardsSectionUrlName } from "./giftCards/urls"; import { apolloClient, saleorClient } from "./graphql/client"; -import HomePage from "./home"; +import OldHomePage from "./home"; import { useLocationState } from "./hooks/useLocationState"; import { commonMessages } from "./intl"; import NavigationSection from "./navigation"; import { navigationSection } from "./navigation/urls"; +import { HomePage } from "./newHome"; import { NotFound } from "./NotFound"; import OrdersSection from "./orders"; import PageSection from "./pages"; @@ -122,7 +124,9 @@ const App: React.FC = () => ( - + + + @@ -151,163 +155,157 @@ const Routes: React.FC = () => { const homePageLoaded = channelLoaded && authenticated; const homePageLoading = (authenticated && !channelLoaded) || authenticating; const { isAppPath } = useLocationState(); + const { enabled: isNewHomePageEnabled } = useFlag("new_home_page"); + const HomePageComponent = isNewHomePageEnabled ? HomePage : OldHomePage; return ( <> {DEMO_MODE && } {homePageLoaded ? ( - - - - { - const errorId = errorTracker.captureException(e); + + + { + const errorId = errorTracker.captureException(e); - dispatchAppState({ - payload: { - error: "unhandled", - errorId, - }, - type: "displayError", - }); - }} - fallbackRender={({ resetErrorBoundary }) => ( - window.location.reload()} - /> - )} - > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + dispatchAppState({ + payload: { + error: "unhandled", + errorId, + }, + type: "displayError", + }); + }} + fallbackRender={({ resetErrorBoundary }) => ( + window.location.reload()} /> + )} + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) : homePageLoading ? ( ) : ( diff --git a/src/newHome/HomePage.tsx b/src/newHome/HomePage.tsx new file mode 100644 index 00000000000..1fc8b813309 --- /dev/null +++ b/src/newHome/HomePage.tsx @@ -0,0 +1,17 @@ +import { DetailPageLayout } from "@dashboard/components/Layouts"; +import { Box } from "@saleor/macaw-ui-next"; +import React from "react"; + +export const HomePage = () => { + return ( + + + +

Hello John, welcome to your Store Dashboard

+ + +

Right Sidebar

+ + + ); +}; diff --git a/src/newHome/index.ts b/src/newHome/index.ts new file mode 100644 index 00000000000..9f297830d48 --- /dev/null +++ b/src/newHome/index.ts @@ -0,0 +1 @@ +export { HomePage } from "./HomePage";