Skip to content
This repository has been archived by the owner on Sep 24, 2024. It is now read-only.

Commit

Permalink
feat: update routes with new design
Browse files Browse the repository at this point in the history
  • Loading branch information
marcomontalbano committed Jan 10, 2024
1 parent 2999e10 commit f676474
Show file tree
Hide file tree
Showing 20 changed files with 684 additions and 74 deletions.
4 changes: 2 additions & 2 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
// format on save
// "editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.organizeImports": true
"source.fixAll": "explicit",
"source.organizeImports": "explicit"
}
}
2 changes: 1 addition & 1 deletion packages/app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"prepare": "touch ./public/config.local.js"
},
"dependencies": {
"@commercelayer/app-elements": "^1.3.0",
"@commercelayer/app-elements": "^1.9.7",
"@commercelayer/sdk": "5.18.0",
"@hookform/resolvers": "^3.3.2",
"lodash": "^4.17.21",
Expand Down
55 changes: 40 additions & 15 deletions packages/app/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,31 @@ import {
} from '@commercelayer/app-elements'
import { Suspense, lazy } from 'react'
import { SWRConfig } from 'swr'
import { Route, Router, Switch } from 'wouter'
import { Redirect, Route, Router, Switch } from 'wouter'
import { appRoutes } from './data/routes'

const HomePage = lazy(async () => await import('#pages/HomePage'))
// const HomePage = lazy(async () => await import('#pages/HomePage'))
const PromotionListPage = lazy(
async () => await import('#pages/PromotionListPage')
)
const FiltersPage = lazy(async () => await import('#pages/FiltersPage'))
const PromotionDetailsPage = lazy(
async () => await import('#pages/PromotionDetailsPage')
)
const EditPromotionPage = lazy(
async () => await import('#pages/EditPromotionPage')
)
const NewSelectTypePage = lazy(
async () => await import('#pages/NewSelectTypePage')
)
const NewPromotionPage = lazy(
async () => await import('#pages/NewPromotionPage')
)
const NewPromotionRulesPage = lazy(
async () => await import('#pages/NewPromotionRulesPage')
const PromotionConditionsPage = lazy(
async () => await import('#pages/PromotionConditionsPage')
)
const NewPromotionRulesAddPage = lazy(
async () => await import('#pages/NewPromotionRulesAddPage')
const NewPromotionConditionPage = lazy(
async () => await import('#pages/NewPromotionConditionPage')
)

const isDev = Boolean(import.meta.env.DEV)
Expand Down Expand Up @@ -53,7 +63,26 @@ export function App(): JSX.Element {
<Suspense fallback={<LoadingPage />}>
<Router base={basePath}>
<Switch>
<Route path={appRoutes.home.path} component={HomePage} />
{/* <Route path={appRoutes.home.path} component={HomePage} /> */}
<Route path={appRoutes.home.path}>
<Redirect to={appRoutes.list.path} />
</Route>
<Route
path={appRoutes.list.path}
component={PromotionListPage}
/>
<Route
path={appRoutes.filters.path}
component={FiltersPage}
/>
<Route
path={appRoutes.promotionDetails.path}
component={PromotionDetailsPage}
/>
<Route
path={appRoutes.editPromotion.path}
component={EditPromotionPage}
/>
<Route
path={appRoutes.newSelectType.path}
component={NewSelectTypePage}
Expand All @@ -63,16 +92,12 @@ export function App(): JSX.Element {
component={NewPromotionPage}
/>
<Route
path={appRoutes.newPromotionEdit.path}
component={NewPromotionPage}
/>
<Route
path={appRoutes.newPromotionRules.path}
component={NewPromotionRulesPage}
path={appRoutes.promotionConditions.path}
component={PromotionConditionsPage}
/>
<Route
path={appRoutes.newPromotionRulesAdd.path}
component={NewPromotionRulesAddPage}
path={appRoutes.newPromotionCondition.path}
component={NewPromotionConditionPage}
/>
<Route component={ErrorNotFound} />
</Switch>
Expand Down
84 changes: 84 additions & 0 deletions packages/app/src/components/ListEmptyState.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import { A, EmptyState } from '@commercelayer/app-elements'

interface Props {
scope?: 'history' | 'userFiltered' | 'presetView' | 'noSKUs' | 'noBundles'
}

export function ListEmptyState({ scope = 'history' }: Props): JSX.Element {
if (scope === 'presetView') {
return (
<EmptyState
title='All good here'
description={
<div>
<p>There are no promotions for the current list.</p>
</div>
}
/>
)
}

if (scope === 'userFiltered') {
return (
<EmptyState
title='No promotions found!'
description={
<div>
<p>
We didn't find any promotions matching the current filters
selection.
</p>
</div>
}
/>
)
}

if (scope === 'noSKUs') {
return (
<EmptyState
title='No SKUs found!'
description={
<div>
<p>
We didn't find any SKU matching the current filters selection.
</p>
</div>
}
/>
)
}

if (scope === 'noBundles') {
return (
<EmptyState
title='No bundles found!'
description={
<div>
<p>
We didn't find any bundle matching the current filters selection.
</p>
</div>
}
/>
)
}

return (
<EmptyState
title='No orders yet!'
description={
<div>
<p>Add an order with the API, or use the CLI.</p>
<A
target='_blank'
href='https://docs.commercelayer.io/core/v/api-reference/orders'
rel='noreferrer'
>
View API reference.
</A>
</div>
}
/>
)
}
34 changes: 34 additions & 0 deletions packages/app/src/components/ListItemPromotion.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { makePercentageDiscountPromotion } from '#mocks'
import { ResourceListItem, navigateTo } from '@commercelayer/app-elements'
import type { Promotion } from '@commercelayer/sdk'
import { useLocation } from 'wouter'

interface Props {
resource?: Promotion
isLoading?: boolean
delayMs?: number
}

export function ListItemPromotion({
resource = makePercentageDiscountPromotion() as unknown as Promotion,
isLoading,
delayMs
}: Props): JSX.Element {
const [, setLocation] = useLocation()

return (
<ResourceListItem
resource={resource}
isLoading={isLoading}
delayMs={delayMs}
tag='a'
{...navigateTo({
setLocation,
destination: {
app: 'promotions',
resourceId: resource.id
}
})}
/>
)
}
5 changes: 2 additions & 3 deletions packages/app/src/components/PromotionForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,7 @@ export function PromotionForm({
}

setLocation(
appRoutes.newPromotionRules.makePath({
promotionSlug,
appRoutes.promotionDetails.makePath({
promotionId: promotion.id
})
)
Expand All @@ -94,7 +93,7 @@ export function PromotionForm({
</Spacer>
<Spacer top='8'>
<Button type='submit' fullWidth>
Continue to conditions
{promotionId != null ? 'Update promotion' : 'Create promotion'}
</Button>
</Spacer>
</HookedForm>
Expand Down
91 changes: 91 additions & 0 deletions packages/app/src/data/filters.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import type { FiltersInstructions } from '@commercelayer/app-elements'

export const instructions: FiltersInstructions = [
{
label: 'Status',
type: 'options',
sdk: {
predicate: 'status_in',
defaultOptions: ['prospect', 'acquired', 'repeat']
},
render: {
component: 'inputToggleButton',
props: {
mode: 'multi',
options: [
{ value: 'prospect', label: 'Prospect' },
{ value: 'acquired', label: 'Acquired' },
{ value: 'repeat', label: 'Repeat' }
]
}
}
},
{
label: 'Type',
type: 'options',
sdk: {
predicate: 'password_present',
parseFormValue: (value) =>
Array.isArray(value) && value.length === 1
? value[0] === 'registered'
: undefined
},
render: {
component: 'inputToggleButton',
props: {
mode: 'multi',
options: [
{ value: 'guest', label: 'Guest' },
{ value: 'registered', label: 'Registered' }
]
}
}
},
{
label: 'Groups',
type: 'options',
sdk: {
predicate: 'customer_group_id_in'
},
render: {
component: 'inputResourceGroup',
props: {
fieldForLabel: 'name',
fieldForValue: 'id',
resource: 'customer_groups',
searchBy: 'name_cont',
sortBy: { attribute: 'name', direction: 'asc' },
previewLimit: 5
}
}
},
{
label: 'Tags',
type: 'options',
sdk: {
predicate: 'tags_id_in'
},
render: {
component: 'inputResourceGroup',
props: {
fieldForLabel: 'name',
fieldForValue: 'id',
resource: 'tags',
searchBy: 'name_cont',
sortBy: { attribute: 'name', direction: 'asc' },
previewLimit: 5,
showCheckboxIcon: false
}
}
},
{
label: 'Search',
type: 'textSearch',
sdk: {
predicate: ['email', 'customer_group_name'].join('_or_') + '_cont'
},
render: {
component: 'searchBar'
}
}
]
11 changes: 11 additions & 0 deletions packages/app/src/data/lists.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import type { FormFullValues } from '@commercelayer/app-elements/dist/ui/resources/useResourceFilters/types'

export type ListType = 'all'

export const presets: Record<ListType, FormFullValues> = {
all: {
customerGroup: [],
status: [],
type: []
}
}
11 changes: 6 additions & 5 deletions packages/app/src/data/routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,12 @@ export type AppRoute = keyof typeof appRoutes
// and `makePath` method to be used to generate the path used in navigation and links
export const appRoutes = {
home: createRoute('/'),
list: createRoute('/list/'),
filters: createRoute('/filters/'),
promotionDetails: createRoute('/list/:promotionId/'),
editPromotion: createRoute('/list/:promotionId/edit/'),
newSelectType: createRoute('/new/'),
newPromotion: createRoute('/new/:promotionSlug/'),
newPromotionEdit: createRoute('/new/:promotionSlug/:promotionId/'),
newPromotionRules: createRoute('/new/:promotionSlug/:promotionId/rules/'),
newPromotionRulesAdd: createRoute(
'/new/:promotionSlug/:promotionId/rules/add/'
)
promotionConditions: createRoute('/list/:promotionId/conditions/'),
newPromotionCondition: createRoute('/list/:promotionId/conditions/new/')
}
Loading

0 comments on commit f676474

Please sign in to comment.