Skip to content

Commit

Permalink
New home page base layout under FF (#5260)
Browse files Browse the repository at this point in the history 
* Add feature flag for new home page

* New home page with layout

* Conditionally render new and old home page

* Add changeset
  • Loading branch information
@poulch
poulch committed Nov 20, 2024
1 parent 54e77d2 commit a28cd97
Show file tree
Hide file tree
Showing 6 changed files with 194 additions and 156 deletions.
5 changes: 5 additions & 0 deletions .changeset/serious-walls-hide.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"saleor-dashboard": patch
---

Prepare base layout for new home, hide new home page under feature flag
18 changes: 14 additions & 4 deletions .featureFlags/generated.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 = () => (<><p><img src={R80834} alt="Discount rules"/></p>
const discounts_rules = () => (<><p><img src={X97611} alt="Discount rules"/></p>
<p>Apply the new discounts rules to narrow your promotions audience.
Set up conditions and channels that must be fulfilled to apply defined reward.</p>
</>)
const improved_refunds = () => (<><p><img src={E27647} alt="Improved refunds"/></p>
const improved_refunds = () => (<><p><img src={B19783} alt="Improved refunds"/></p>
<h3 id="enable-the-enhanced-refund-feature-to-streamline-your-refund-process">Enable the enhanced refund feature to streamline your refund process:</h3>
<ul>
<li><p>• Choose between automatic calculations based on selected items or enter refund amounts directly for overcharges and custom adjustments.</p>
Expand All @@ -17,6 +17,7 @@ const improved_refunds = () => (<><p><img src={E27647} alt="Improved refunds"/><
</ul>

</>)
const new_home_page = () => (<></>)

export const AVAILABLE_FLAGS = [{
name: "discounts_rules",
Expand All @@ -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;
7 changes: 7 additions & 0 deletions .featureFlags/new-home-page.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
name: new_home_page
displayName: New home page
enabled: false
payload: "default"
visible: false
---
302 changes: 150 additions & 152 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -122,7 +124,9 @@ const App: React.FC = () => (
<NavigatorSearchProvider>
<ProductAnalytics>
<SavebarRefProvider>
<Routes />
<FeatureFlagsProviderWithUser>
<Routes />
</FeatureFlagsProviderWithUser>
</SavebarRefProvider>
</ProductAnalytics>
</NavigatorSearchProvider>
Expand Down Expand Up @@ -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 (
<>
<WindowTitle title={intl.formatMessage(commonMessages.dashboard)} />
{DEMO_MODE && <DemoBanner />}
{homePageLoaded ? (
<FeatureFlagsProviderWithUser>
<ExternalAppProvider>
<AppLayout fullSize={isAppPath}>
<ErrorBoundary
onError={e => {
const errorId = errorTracker.captureException(e);
<ExternalAppProvider>
<AppLayout fullSize={isAppPath}>
<ErrorBoundary
onError={e => {
const errorId = errorTracker.captureException(e);

dispatchAppState({
payload: {
error: "unhandled",
errorId,
},
type: "displayError",
});
}}
fallbackRender={({ resetErrorBoundary }) => (
<ErrorPage
onBack={resetErrorBoundary}
onRefresh={() => window.location.reload()}
/>
)}
>
<Switch>
<SectionRoute exact path="/" component={HomePage} />
<SectionRoute
permissions={[PermissionEnum.MANAGE_PRODUCTS]}
path="/categories"
component={CategorySection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_PRODUCTS]}
path="/collections"
component={CollectionSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_USERS]}
path="/customers"
component={CustomerSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_GIFT_CARD]}
path={giftCardsSectionUrlName}
component={GiftCardSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_DISCOUNTS]}
path="/discounts"
component={DiscountSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_PAGES]}
path="/pages"
component={PageSection}
/>
<SectionRoute
permissions={[
PermissionEnum.MANAGE_PAGES,
PermissionEnum.MANAGE_PAGE_TYPES_AND_ATTRIBUTES,
]}
path="/page-types"
component={PageTypesSection}
matchPermission="any"
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_PLUGINS]}
path="/plugins"
component={PluginsSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_ORDERS]}
path="/orders"
component={OrdersSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_PRODUCTS]}
path="/products"
component={ProductSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES]}
path="/product-types"
component={ProductTypesSection}
/>
<SectionRoute path="/staff" component={StaffSection} />
<SectionRoute
permissions={[PermissionEnum.MANAGE_STAFF]}
path="/permission-groups"
component={PermissionGroupSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_SETTINGS]}
path="/site-settings"
component={SiteSettingsSection}
/>
<SectionRoute path="/taxes" component={TaxesSection} />
<SectionRoute
permissions={[PermissionEnum.MANAGE_SHIPPING]}
path="/shipping"
component={ShippingSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_TRANSLATIONS]}
path="/translations"
component={TranslationsSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_MENUS]}
path={navigationSection}
component={NavigationSection}
/>
<SectionRoute
permissions={[
PermissionEnum.MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES,
PermissionEnum.MANAGE_PAGE_TYPES_AND_ATTRIBUTES,
]}
path={attributeSection}
component={AttributeSection}
matchPermission="any"
/>
<SectionRoute
permissions={[]}
path={AppSections.appsSection}
component={AppsSectionRoot}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_PRODUCTS]}
path={warehouseSection}
component={WarehouseSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_CHANNELS]}
path={channelsSection}
component={ChannelsSection}
/>
<SectionRoute
matchPermission="any"
permissions={getConfigMenuItemsPermissions(intl)}
exact
path="/configuration"
component={ConfigurationSection}
/>
<SectionRoute
path={CustomAppSections.appsSection}
component={CustomAppsSection}
/>
<Route component={NotFound} />
</Switch>
</ErrorBoundary>
</AppLayout>
</ExternalAppProvider>
</FeatureFlagsProviderWithUser>
dispatchAppState({
payload: {
error: "unhandled",
errorId,
},
type: "displayError",
});
}}
fallbackRender={({ resetErrorBoundary }) => (
<ErrorPage onBack={resetErrorBoundary} onRefresh={() => window.location.reload()} />
)}
>
<Switch>
<SectionRoute exact path="/" component={HomePageComponent} />
<SectionRoute
permissions={[PermissionEnum.MANAGE_PRODUCTS]}
path="/categories"
component={CategorySection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_PRODUCTS]}
path="/collections"
component={CollectionSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_USERS]}
path="/customers"
component={CustomerSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_GIFT_CARD]}
path={giftCardsSectionUrlName}
component={GiftCardSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_DISCOUNTS]}
path="/discounts"
component={DiscountSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_PAGES]}
path="/pages"
component={PageSection}
/>
<SectionRoute
permissions={[
PermissionEnum.MANAGE_PAGES,
PermissionEnum.MANAGE_PAGE_TYPES_AND_ATTRIBUTES,
]}
path="/page-types"
component={PageTypesSection}
matchPermission="any"
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_PLUGINS]}
path="/plugins"
component={PluginsSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_ORDERS]}
path="/orders"
component={OrdersSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_PRODUCTS]}
path="/products"
component={ProductSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES]}
path="/product-types"
component={ProductTypesSection}
/>
<SectionRoute path="/staff" component={StaffSection} />
<SectionRoute
permissions={[PermissionEnum.MANAGE_STAFF]}
path="/permission-groups"
component={PermissionGroupSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_SETTINGS]}
path="/site-settings"
component={SiteSettingsSection}
/>
<SectionRoute path="/taxes" component={TaxesSection} />
<SectionRoute
permissions={[PermissionEnum.MANAGE_SHIPPING]}
path="/shipping"
component={ShippingSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_TRANSLATIONS]}
path="/translations"
component={TranslationsSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_MENUS]}
path={navigationSection}
component={NavigationSection}
/>
<SectionRoute
permissions={[
PermissionEnum.MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES,
PermissionEnum.MANAGE_PAGE_TYPES_AND_ATTRIBUTES,
]}
path={attributeSection}
component={AttributeSection}
matchPermission="any"
/>
<SectionRoute
permissions={[]}
path={AppSections.appsSection}
component={AppsSectionRoot}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_PRODUCTS]}
path={warehouseSection}
component={WarehouseSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_CHANNELS]}
path={channelsSection}
component={ChannelsSection}
/>
<SectionRoute
matchPermission="any"
permissions={getConfigMenuItemsPermissions(intl)}
exact
path="/configuration"
component={ConfigurationSection}
/>
<SectionRoute path={CustomAppSections.appsSection} component={CustomAppsSection} />
<Route component={NotFound} />
</Switch>
</ErrorBoundary>
</AppLayout>
</ExternalAppProvider>
) : homePageLoading ? (
<LoginLoading />
) : (
Expand Down
Loading

0 comments on commit a28cd97

Please sign in to comment.