Skip to content

Commit 77a7ed9

Browse files
fnhipsterfnhipster
authored
Merge pull request #70 from PMET-public/develop
v1.1.4
2 parents 5e21e67 + 880c96e commit 77a7ed9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+981
-880
lines changed

‎components/App/App.tsx

+11-12
Original file line numberDiff line numberDiff line change
@@ -186,14 +186,8 @@ export const App: FunctionComponent<QueryResult> = ({ loading, error, data, chil
186186

187187
const { storeConfig, categories = [] } = data || {}
188188

189-
const categoryUrlSuffix = storeConfig?.categoryUrlSuffix ?? ''
190-
191189
return (
192190
<React.Fragment>
193-
<NextNprogress color={settings?.colorAccent || baseTheme.colors.accent} startPosition={0.4} stopDelayMs={200} height={3} options={{ showSpinner: false, easing: 'ease' }} />
194-
<UIBase />
195-
<ToastsStyles />
196-
197191
{/* Head Metadata */}
198192
{storeConfig && (
199193
<Head
@@ -207,6 +201,11 @@ export const App: FunctionComponent<QueryResult> = ({ loading, error, data, chil
207201
/>
208202
)}
209203

204+
<UIBase />
205+
<ToastsStyles />
206+
207+
<NextNprogress color={settings?.colorAccent || baseTheme.colors.accent} startPosition={0.4} stopDelayMs={200} height={3} options={{ showSpinner: false, easing: 'ease' }} />
208+
210209
<Root>
211210
<HeaderContainer as="header" $margin>
212211
<Header
@@ -221,8 +220,8 @@ export const App: FunctionComponent<QueryResult> = ({ loading, error, data, chil
221220
title: storeConfig?.logoAlt || 'StoryStore PWA',
222221
}}
223222
menu={{
224-
items: categories[0]?.children?.map(({ id, text, href: _href, mode }: any) => {
225-
const href = _href + categoryUrlSuffix
223+
items: categories[0]?.children?.map(({ id, title, href: _href, mode, urlSuffix = '' }: any) => {
224+
const href = _href + urlSuffix
226225

227226
return {
228227
active: isUrlActive('/' + href),
@@ -233,7 +232,7 @@ export const App: FunctionComponent<QueryResult> = ({ loading, error, data, chil
233232
mode,
234233
},
235234
href: '/' + href,
236-
text,
235+
text: title,
237236
}
238237
}),
239238
}}
@@ -331,8 +330,8 @@ export const App: FunctionComponent<QueryResult> = ({ loading, error, data, chil
331330
closeOnTouchOutside
332331
categories={{
333332
title: 'Shop by Category',
334-
items: categories[0]?.children?.map(({ id, text, href: _href, mode }: any) => {
335-
const href = _href + categoryUrlSuffix
333+
items: categories[0]?.children?.map(({ id, title, href: _href, mode, urlSuffix = '' }: any) => {
334+
const href = _href + urlSuffix
336335

337336
return {
338337
as: Link,
@@ -352,7 +351,7 @@ export const App: FunctionComponent<QueryResult> = ({ loading, error, data, chil
352351
// height: 40,
353352
// },
354353
href: '/' + href,
355-
text,
354+
text: title,
356355
}
357356
}),
358357
}}

‎components/App/graphql/App.graphql

+7-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ query AppQuery {
22
storeConfig {
33
id
44
baseMediaUrl: base_media_url
5-
categoryUrlSuffix: category_url_suffix
65
copyright
76
logoAlt: logo_alt
87
logoSrc: header_logo_src
@@ -43,10 +42,16 @@ query AppQuery {
4342
id
4443
children {
4544
id
46-
text: name
45+
title: name
4746
href: url_path
47+
urlSuffix: url_suffix
4848
image
4949
mode: display_mode
50+
description: description
51+
block: cms_block {
52+
id: identifier
53+
content
54+
}
5055
}
5156
}
5257
}

‎components/Cart/Cart.tsx

+11-5
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,22 @@ import CartList from '@storystore/ui/dist/components/CartList'
1313
import CartSummary from '@storystore/ui/dist/components/CartSummary'
1414
import EmptyCart from '@storystore/ui/dist/components/EmptyCart'
1515
import ViewLoader from '@storystore/ui/dist/components/ViewLoader'
16-
import { QueryResult } from '@apollo/client'
16+
import { useQuery } from '@apollo/client'
1717
import { useCart } from '~/hooks/useCart/useCart'
18+
import { CART_QUERY } from '.'
1819

1920
const Error = dynamic(() => import('../Error'))
2021

21-
export const Cart: FunctionComponent<QueryResult> = ({ loading, error, data }) => {
22+
export const Cart: FunctionComponent = () => {
2223
const { cartId } = useStoryStore()
2324

25+
const { loading, error, data } = useQuery(CART_QUERY, {
26+
variables: { cartId },
27+
skip: !cartId,
28+
fetchPolicy: 'cache-first',
29+
ssr: false,
30+
})
31+
2432
const history = useRouter()
2533

2634
const { updateCartItem, updatingCartItem, removeCartItem, removingCartItem, applyCoupon, applyingCoupon, removeCoupon, removingCoupon } = useCart({ cartId })
@@ -38,8 +46,6 @@ export const Cart: FunctionComponent<QueryResult> = ({ loading, error, data }) =
3846

3947
const { items = [], appliedCoupons, totalQuantity, prices, shippingAddresses } = data?.cart || {}
4048

41-
const productUrlSuffix = data?.store?.productUrlSuffix ?? ''
42-
4349
if (loading && !data) return <ViewLoader />
4450

4551
if ((!loading && totalQuantity < 1) || !data) {
@@ -77,7 +83,7 @@ export const Cart: FunctionComponent<QueryResult> = ({ loading, error, data }) =
7783
type: 'PRODUCT',
7884
urlKey: product.urlKey,
7985
},
80-
href: `/${product.urlKey}${productUrlSuffix}`,
86+
href: `/${product.urlKey}${product.urlSuffix ?? ''}`,
8187
text: product.name,
8288
},
8389
sku: `SKU. ${product.sku}`,

‎components/Cart/graphql/Cart.graphql

-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
#import "~/graphql/_cart.graphql"
22

33
query CartQuery($cartId: String!) {
4-
store: storeConfig {
5-
id
6-
productUrlSuffix: product_url_suffix
7-
}
8-
94
...cart
105
}

‎components/Category/Category.styled.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -48,5 +48,4 @@ export const TopBarFilterToggleButton = styled.button`
4848

4949
export const ProductsWrapper = styled.div`
5050
margin-bottom: 6rem;
51-
background: red;
5251
`

‎components/Category/Category.tsx

+31-29
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { FunctionComponent, useState, useCallback } from 'react'
1+
import React, { FunctionComponent, useState } from 'react'
22
import dynamic from 'next/dynamic'
33
import { Root, HeadingWrapper, Heading, Title, TopBarFilterToggleButton, ProductsWrapper } from './Category.styled'
44
import { useNetworkStatus } from '~/hooks/useNetworkStatus'
@@ -10,13 +10,12 @@ import { Skeleton } from '@storystore/ui/dist/components/Skeleton'
1010
import TopBar from '@storystore/ui/dist/components/TopBar'
1111
import FiltersIcon from 'remixicon/icons/System/list-settings-line.svg'
1212
import FiltersCloseIcon from 'remixicon/icons/System/list-settings-fill.svg'
13-
import { QueryResult, useQuery } from '@apollo/client'
14-
import Products, { PRODUCTS_QUERY } from '~/components/Products'
13+
import { useQuery } from '@apollo/client'
14+
import Products from '~/components/Products'
1515
import Icon from '@storystore/ui/dist/components/Icon'
16-
import Sidebar from '@storystore/ui/dist/components/Sidebar'
17-
import { Filters, FilterVariables, FilterSelected } from '~/components/Filters'
1816
import { PageSkeleton } from '~/components/Page/Page.skeleton'
1917
import PageBuilder from '~/components/PageBuilder'
18+
import { CATEGORY_QUERY } from '.'
2019

2120
const Error = dynamic(() => import('../Error'))
2221

@@ -28,28 +27,27 @@ const TitleSkeleton = ({ ...props }) => {
2827
)
2928
}
3029

31-
export const Category: FunctionComponent<QueryResult> = ({ loading, data }) => {
32-
const [panelOpen, setPanelOpen] = useState(false)
30+
export type CategoryProps = {
31+
id: string
32+
}
33+
34+
export const Category: FunctionComponent<CategoryProps> = ({ id }) => {
35+
const { loading, data } = useQuery(CATEGORY_QUERY, {
36+
variables: { id },
37+
fetchPolicy: 'cache-and-network',
38+
returnPartialData: true,
39+
})
3340

34-
const [filters, setFilters] = useState<{ selected: FilterSelected; variables: FilterVariables }>({ selected: {}, variables: {} })
41+
const [toggleFilters, setToggleFilters] = useState(false)
3542

36-
const categoryUrlSuffix = data?.storeConfig.categoryUrlSuffix
43+
const [hasFiltersSelected, setHasFiltersSelected] = useState(false)
3744

3845
const page = data?.categoryList && data.categoryList[0]
3946

4047
const mode = page?.mode || 'PRODUCTS'
4148

4249
const online = useNetworkStatus()
4350

44-
const products = useQuery(PRODUCTS_QUERY, {
45-
variables: { filters: { category_id: { eq: page?.id }, ...filters.variables } },
46-
skip: !page || !/PRODUCTS/.test(mode),
47-
})
48-
49-
const handleOnFiltersUpdate = useCallback(({ selected, variables }) => {
50-
setFilters({ selected, variables })
51-
}, [])
52-
5351
if (!online && !data?.categoryList) return <Error type="Offline" fullScreen />
5452

5553
if (!loading && !data?.categoryList) {
@@ -86,7 +84,7 @@ export const Category: FunctionComponent<QueryResult> = ({ loading, data }) => {
8684
},
8785
count,
8886
text,
89-
href: '/' + href + categoryUrlSuffix,
87+
href: '/' + href + (page.urlSuffix ?? ''),
9088
}))}
9189
/>
9290
)}
@@ -103,26 +101,30 @@ export const Category: FunctionComponent<QueryResult> = ({ loading, data }) => {
103101
id,
104102
mode,
105103
},
106-
href: '/' + href + categoryUrlSuffix,
104+
href: '/' + href + (page.urlSuffix ?? ''),
107105
text,
108106
}))}
109107
/>
110108
)}
111109
</Heading>
112110
</HeadingWrapper>
113111

114-
<TopBarFilterToggleButton onClick={() => setPanelOpen(!panelOpen)}>
115-
<Icon svg={panelOpen ? FiltersCloseIcon : FiltersIcon} aria-label="Filters" attention={Object.keys(filters.selected).length > 0} />
112+
<TopBarFilterToggleButton onClick={() => setToggleFilters(!toggleFilters)}>
113+
<Icon svg={toggleFilters ? FiltersCloseIcon : FiltersIcon} aria-label="Filters" attention={hasFiltersSelected} />
116114
</TopBarFilterToggleButton>
117115
</TopBar>
118116

119-
<ProductsWrapper>
120-
<Products {...products} loading={loading || products.loading} />
121-
</ProductsWrapper>
122-
123-
<Sidebar position="right" onClose={() => setPanelOpen(false)} button={{ text: 'Done', onClick: () => setPanelOpen(false) }}>
124-
{panelOpen && <Filters {...products} defaultSelected={{ ...filters.selected }} onUpdate={handleOnFiltersUpdate} />}
125-
</Sidebar>
117+
{/PRODUCTS/.test(mode) && (
118+
<ProductsWrapper>
119+
<Products
120+
loading={loading}
121+
filters={{ category_id: { eq: page?.id.toString() } }}
122+
openFilters={toggleFilters}
123+
onToggleFilters={state => setToggleFilters(state)}
124+
onUpdatedFilters={values => setHasFiltersSelected(!!values)}
125+
/>
126+
</ProductsWrapper>
127+
)}
126128
</React.Fragment>
127129
)}
128130
</Root>

‎components/Category/graphql/Category.graphql

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
query CategoryQuery($id: String!) {
2-
storeConfig {
3-
id
4-
categoryUrlSuffix: category_url_suffix
5-
}
6-
72
categoryList(filters: { ids: { eq: $id } }) {
83
id
9-
4+
urlSuffix: url_suffix
105
title: name
116
description: description
127
block: cms_block {

‎components/Checkout/Checkout.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,16 @@ import CartList from '@storystore/ui/dist/components/CartList'
1111
import CartSummary from '@storystore/ui/dist/components/CartSummary'
1212
import PlaceOrderForm from '@storystore/ui/dist/components/Checkout/PlaceOrderForm'
1313
import Breadcrumbs from '@storystore/ui/dist/components/Breadcrumbs'
14-
import { QueryResult } from '@apollo/client'
14+
import { useQuery } from '@apollo/client'
1515
import { useCart } from '~/hooks/useCart/useCart'
1616
import { ContactInfo } from './ContactInfo'
1717
import { ShippingMethod } from './ShippingMethod'
1818
import { PaymentMethod } from './PaymentMethod'
19+
import { CHECKOUT_QUERY } from '.'
1920

2021
const Error = dynamic(() => import('~/components/Error'))
2122

22-
export const Checkout: FunctionComponent<QueryResult> = ({ loading, data }) => {
23+
export const Checkout: FunctionComponent = () => {
2324
const contactInfoElem = useRef<HTMLDivElement>(null)
2425
const shippingMethodElem = useRef<HTMLDivElement>(null)
2526
const paymentMethodElem = useRef<HTMLDivElement>(null)
@@ -29,6 +30,11 @@ export const Checkout: FunctionComponent<QueryResult> = ({ loading, data }) => {
2930

3031
const { cartId, setCartId } = useStoryStore()
3132

33+
const { loading, data } = useQuery(CHECKOUT_QUERY, {
34+
variables: { cartId },
35+
skip: !cartId,
36+
})
37+
3238
const api = useCart({ cartId })
3339

3440
const { cart } = data ?? {}

‎components/Filters/Filters.tsx

+25-10
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React, { FunctionComponent, useMemo, useCallback, useState, useEffect } from 'react'
22
import { Root } from './Filters.styled'
3-
import { useQuery, QueryResult } from '@apollo/client'
3+
import { useQuery } from '@apollo/client'
44
import { FiltersGroupProps } from '@storystore/ui/dist/components/Filters'
55
import FiltersComponent from '@storystore/ui/dist/components/Filters'
66
import FILTERS_TYPES_QUERY from './graphql/filtersTypes.graphql'
7+
import Sidebar from '@storystore/ui/dist/components/Sidebar'
78

89
const TYPES = {
910
FilterEqualTypeInput: 'equal',
@@ -21,19 +22,22 @@ export type FilterVariables = {
2122
export type FilterSelected = { [key: string]: any[] }
2223

2324
export type FiltersProps = {
25+
open?: boolean
26+
loading?: boolean
2427
defaultSelected?: FilterSelected
28+
filters: any
2529
onUpdate?: (_: FilterVariables) => any
2630
onClose?: () => any
2731
}
2832

29-
export const Filters: FunctionComponent<QueryResult & FiltersProps> = ({ data, loading, defaultSelected = {}, onUpdate }) => {
33+
export const Filters: FunctionComponent<FiltersProps> = ({ filters, loading, open = false, defaultSelected = {}, onUpdate, onClose = () => {} }) => {
3034
const [selectedFilters, setSelectedFilters] = useState<FilterSelected>(defaultSelected)
3135

32-
const [cachedData, setCachedData] = useState<any>(null)
36+
const [cachedFilters, setCachedFilters] = useState<any>(null)
3337

3438
useEffect(() => {
35-
if (data) setCachedData(data)
36-
}, [data])
39+
if (filters) setCachedFilters(filters)
40+
}, [filters])
3741

3842
/**
3943
* Attribute Type is not part of the Filter Query. We need to query all types available first,
@@ -47,7 +51,7 @@ export const Filters: FunctionComponent<QueryResult & FiltersProps> = ({ data, l
4751
// Lets transform our groups
4852
const groups: FiltersGroupProps[] = useMemo(
4953
() => [
50-
...(cachedData?.products.filters.map((filter: any) => {
54+
...(cachedFilters?.map((filter: any) => {
5155
/** Fix some Labels */
5256
const items = filter.options.map((option: any) => {
5357
let label = option.label
@@ -82,7 +86,7 @@ export const Filters: FunctionComponent<QueryResult & FiltersProps> = ({ data, l
8286
}
8387
}) ?? []),
8488
],
85-
[cachedData, selectedFilters]
89+
[cachedFilters, selectedFilters]
8690
)
8791

8892
// Handle Updates on Filter
@@ -150,8 +154,19 @@ export const Filters: FunctionComponent<QueryResult & FiltersProps> = ({ data, l
150154
)
151155

152156
return (
153-
<Root>
154-
<FiltersComponent loading={loading && !cachedData} title="Filters" disabled={loading} options={{ defaultValues: selectedFilters }} groups={groups} onValues={handleOnFilterUpdate} />
155-
</Root>
157+
<Sidebar position="right" onClose={onClose} button={{ text: 'Done', onClick: onClose }}>
158+
{open && (
159+
<Root>
160+
<FiltersComponent
161+
loading={loading && !cachedFilters}
162+
title="Filters"
163+
disabled={loading}
164+
options={{ defaultValues: selectedFilters }}
165+
groups={groups}
166+
onValues={handleOnFilterUpdate}
167+
/>
168+
</Root>
169+
)}
170+
</Sidebar>
156171
)
157172
}

0 commit comments

Comments
 (0)