Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New home page base layout under FF #5260

Merged
merged 5 commits into from
Nov 19, 2024
Merged

New home page base layout under FF #5260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8bfefee
Add feature flag for new home page
poulch Nov 18, 2024
71107b0
New home page with layout
poulch Nov 18, 2024
cc7df7e
Conditionally render new and old home page
poulch Nov 18, 2024
d608749
Add changeset
poulch Nov 18, 2024
9d7d480
Merge branch 'main' into merx-1259-new-home-page-layout
poulch Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/serious-walls-hide.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading