-
Notifications
You must be signed in to change notification settings - Fork 124
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.
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
@W-15621253 Initial Store Locator Implementation #1827
Changes from 5 commits
3eef96c
69f6d36
e72d90a
4587460
82954ee
a5c5ca5
67d8073
147efc7
d6ba3ac
e63fbe8
170de81
028e3d5
87e7a1f
f23966b
cc70d9c
6344342
f746054
d782625
9fc8b66
b9112d9
23e7897
b62f8f6
a8447b5
c9247b8
9aac80d
d922ab4
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
/* | ||
* Copyright (c) 2021, salesforce.com, inc. | ||
* All rights reserved. | ||
* SPDX-License-Identifier: BSD-3-Clause | ||
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause | ||
*/ | ||
|
||
import React from 'react' | ||
import PropTypes from 'prop-types' | ||
import { | ||
Modal, | ||
ModalBody, | ||
ModalCloseButton, | ||
ModalContent, | ||
useBreakpointValue | ||
} from '@salesforce/retail-react-app/app/components/shared/ui' | ||
import StoreLocatorContent from '@salesforce/retail-react-app/app/components/store-locator/store-locator-content' | ||
|
||
const StoreLocatorModal = (props) => { | ||
const {isOpen, setIsOpen} = props | ||
|
||
const isDesktopView = useBreakpointValue({base: false, lg: true}) | ||
|
||
return ( | ||
<> | ||
{isDesktopView ? ( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Using a breakpoint value boolean instead of the
|
||
<Modal size="4xl" isOpen={isOpen}> | ||
<ModalContent | ||
display={{base: 'none', lg: 'block'}} | ||
position="absolute" | ||
top="0" | ||
right="0" | ||
width="33.33%" | ||
height="100vh" | ||
borderLeft="1px solid" | ||
borderColor="gray.200" | ||
marginTop="0px" | ||
> | ||
<ModalCloseButton | ||
onClick={() => { | ||
setIsOpen(false) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I believe there is a current pattern of calling this prop "onClose". Please check the _app component for the DrawerMenu usage. |
||
}} | ||
/> | ||
<ModalBody pb={8} bg="white" paddingBottom={6} marginTop={6}> | ||
<StoreLocatorContent></StoreLocatorContent> | ||
</ModalBody> | ||
</ModalContent> | ||
</Modal> | ||
) : ( | ||
<Modal size="4xl" isOpen={isOpen}> | ||
<ModalContent | ||
position="absolute" | ||
top="0" | ||
right="0" | ||
height="100vh" | ||
borderLeft="1px solid" | ||
borderColor="gray.200" | ||
marginTop="0px" | ||
> | ||
<ModalCloseButton | ||
onClick={() => { | ||
setIsOpen(false) | ||
}} | ||
/> | ||
<ModalBody pb={8} bg="white" paddingBottom={6} marginTop={6}> | ||
<StoreLocatorContent></StoreLocatorContent> | ||
</ModalBody> | ||
</ModalContent> | ||
</Modal> | ||
)} | ||
</> | ||
) | ||
} | ||
|
||
StoreLocatorModal.propTypes = { | ||
isOpen: PropTypes.bool.isRequired, | ||
setIsOpen: PropTypes.func.isRequired | ||
} | ||
|
||
export default StoreLocatorModal | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let's also rename the folder to "components/store-locator-modal/" to be consistent. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,110 @@ | ||
/* | ||
* Copyright (c) 2021, salesforce.com, inc. | ||
* All rights reserved. | ||
* SPDX-License-Identifier: BSD-3-Clause | ||
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause | ||
*/ | ||
|
||
import React from 'react' | ||
import StoreLocatorModal from '@salesforce/retail-react-app/app/components/store-locator/store-locator-content' | ||
import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils' | ||
import {prependHandlersToServer} from '@salesforce/retail-react-app/jest-setup' | ||
|
||
const mockStores = { | ||
limit: 4, | ||
data: [ | ||
{ | ||
address1: 'Kirchgasse 12', | ||
city: 'Wiesbaden', | ||
countryCode: 'DE', | ||
distance: 0.74, | ||
distanceUnit: 'km', | ||
id: '00019', | ||
inventoryId: 'inventory_m_store_store11', | ||
latitude: 50.0826, | ||
longitude: 8.24, | ||
name: 'Wiesbaden Tech Depot', | ||
phone: '+49 611 876543', | ||
posEnabled: false, | ||
postalCode: '65185', | ||
storeHours: | ||
'Monday 9 AM–7 PM\nTuesday 9 AM–7 PM\nWednesday 9 AM–7 PM\nThursday 9 AM–8 PM\nFriday 9 AM–7 PM\nSaturday 9 AM–6 PM\nSunday Closed', | ||
storeLocatorEnabled: true | ||
}, | ||
{ | ||
address1: 'Schaumainkai 63', | ||
city: 'Frankfurt am Main', | ||
countryCode: 'DE', | ||
distance: 30.78, | ||
distanceUnit: 'km', | ||
id: '00002', | ||
inventoryId: 'inventory_m_store_store4', | ||
latitude: 50.097416, | ||
longitude: 8.669059, | ||
name: 'Frankfurt Electronics Store', | ||
phone: '+49 69 111111111', | ||
posEnabled: false, | ||
postalCode: '60596', | ||
storeHours: | ||
'Monday 10 AM–6 PM\nTuesday 10 AM–6 PM\nWednesday 10 AM–6 PM\nThursday 10 AM–9 PM\nFriday 10 AM–6 PM\nSaturday 10 AM–6 PM\nSunday 10 AM–6 PM', | ||
storeLocatorEnabled: true | ||
}, | ||
{ | ||
address1: 'Löhrstraße 87', | ||
city: 'Koblenz', | ||
countryCode: 'DE', | ||
distance: 55.25, | ||
distanceUnit: 'km', | ||
id: '00035', | ||
inventoryId: 'inventory_m_store_store27', | ||
latitude: 50.3533, | ||
longitude: 7.5946, | ||
name: 'Koblenz Electronics Store', | ||
phone: '+49 261 123456', | ||
posEnabled: false, | ||
postalCode: '56068', | ||
storeHours: | ||
'Monday 9 AM–7 PM\nTuesday 9 AM–7 PM\nWednesday 9 AM–7 PM\nThursday 9 AM–8 PM\nFriday 9 AM–7 PM\nSaturday 9 AM–6 PM\nSunday Closed', | ||
storeLocatorEnabled: true | ||
}, | ||
{ | ||
address1: 'Hauptstraße 47', | ||
city: 'Heidelberg', | ||
countryCode: 'DE', | ||
distance: 81.1, | ||
distanceUnit: 'km', | ||
id: '00021', | ||
inventoryId: 'inventory_m_store_store13', | ||
latitude: 49.4077, | ||
longitude: 8.6908, | ||
name: 'Heidelberg Tech Mart', | ||
phone: '+49 6221 123456', | ||
posEnabled: false, | ||
postalCode: '69117', | ||
storeHours: | ||
'Monday 10 AM–7 PM\nTuesday 10 AM–7 PM\nWednesday 10 AM–7 PM\nThursday 10 AM–8 PM\nFriday 10 AM–7 PM\nSaturday 10 AM–6 PM\nSunday Closed', | ||
storeLocatorEnabled: true | ||
} | ||
], | ||
offset: 0, | ||
total: 4 | ||
} | ||
|
||
describe('StoreLocatorModal', () => { | ||
beforeEach(() => { | ||
prependHandlersToServer([ | ||
{ | ||
path: '*/shopper-stores/v1/organizations/*', | ||
res: () => { | ||
return mockStores | ||
} | ||
} | ||
]) | ||
}) | ||
test('renders without crashing', () => { | ||
const setIsOpen = jest.fn() | ||
expect(() => { | ||
renderWithProviders(<StoreLocatorModal isOpen={false} setIsOpen={setIsOpen} />) | ||
}).not.toThrow() | ||
}) | ||
}) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Rather than implementing this logic ourselves, let's use the one provided by Chakra:
useDisclosure
So we can convert the existing:
setIsOpen(true)
toonOpen()
setIsOpen(false)
toonClose()