Skip to content

Commit

Permalink
Merge branch 'develop' into tommy/lighthouse-render-time
Browse files Browse the repository at this point in the history
  • Loading branch information
@dpatil-magento
dpatil-magento authored Jan 28, 2021
2 parents 8557107 + cf11495 commit aca1523
Show file tree
Hide file tree
Showing 47 changed files with 1,431 additions and 336 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
[![Coverage Status](https://coveralls.io/repos/github/magento/pwa-studio/badge.svg?branch=develop)](https://coveralls.io/github/magento/pwa-studio?branch=develop)

# PWA Studio

Magento PWA Studio is a collection of tools that lets developers build complex Progressive Web Applications on top of Magento 2 stores.
Expand Down
109 changes: 109 additions & 0 deletions packages/peregrine/lib/talons/Header/__tests__/__snapshots__/useStoreSwitcher.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,62 +5,171 @@ Object {
"availableStores": Map {
"store1" => Object {
"category_url_suffix": null,
"code": "store1",
"currency": "USD",
"isCurrent": false,
"locale": "locale1",
"product_url_suffix": null,
"secure_base_media_url": "https://example.com/media/",
"sortOrder": 0,
"storeGroupCode": "group1",
"storeGroupName": "Group 1",
"storeName": "Store 1",
},
"store2" => Object {
"category_url_suffix": ".html",
"code": "store2",
"currency": "EUR",
"isCurrent": true,
"locale": "locale2",
"product_url_suffix": ".html",
"secure_base_media_url": "https://cdn.origin:9000/media/custom/",
"sortOrder": 1,
"storeGroupCode": "group1",
"storeGroupName": "Group 1",
"storeName": "Store 2",
},
"store3" => Object {
"category_url_suffix": null,
"code": "store3",
"currency": "EUR",
"isCurrent": false,
"locale": "locale3",
"product_url_suffix": ".htm",
"secure_base_media_url": "https://example.com/media/",
"sortOrder": 2,
"storeGroupCode": "group1",
"storeGroupName": "Group 1",
"storeName": "Store 3",
},
"store4" => Object {
"category_url_suffix": ".htm",
"code": "store4",
"currency": "EUR",
"isCurrent": false,
"locale": "locale4",
"product_url_suffix": null,
"secure_base_media_url": "https://example.com/media/",
"sortOrder": 0,
"storeGroupCode": "group2",
"storeGroupName": "Group 2",
"storeName": "Store 4",
},
"store5" => Object {
"category_url_suffix": "-abc1",
"code": "store5",
"currency": "EUR",
"isCurrent": false,
"locale": "locale5",
"product_url_suffix": ".htm.htm",
"secure_base_media_url": "https://example.com/media/",
"sortOrder": 1,
"storeGroupCode": "group2",
"storeGroupName": "Group 2",
"storeName": "Store 5",
},
"store6" => Object {
"category_url_suffix": ".some.some",
"code": "store6",
"currency": "EUR",
"isCurrent": false,
"locale": "locale6",
"product_url_suffix": "-123abc",
"secure_base_media_url": "https://example.com/media/",
"sortOrder": 2,
"storeGroupCode": "group2",
"storeGroupName": "Group 2",
"storeName": "Store 6",
},
},
"currentGroupName": "Group 1",
"currentStoreName": "Store 2",
"handleSwitchStore": [Function],
"handleTriggerClick": [Function],
"storeGroups": Map {
"group1" => Array [
Object {
"category_url_suffix": null,
"code": "store1",
"currency": "USD",
"isCurrent": false,
"locale": "locale1",
"product_url_suffix": null,
"secure_base_media_url": "https://example.com/media/",
"sortOrder": 0,
"storeGroupCode": "group1",
"storeGroupName": "Group 1",
"storeName": "Store 1",
},
Object {
"category_url_suffix": ".html",
"code": "store2",
"currency": "EUR",
"isCurrent": true,
"locale": "locale2",
"product_url_suffix": ".html",
"secure_base_media_url": "https://cdn.origin:9000/media/custom/",
"sortOrder": 1,
"storeGroupCode": "group1",
"storeGroupName": "Group 1",
"storeName": "Store 2",
},
Object {
"category_url_suffix": null,
"code": "store3",
"currency": "EUR",
"isCurrent": false,
"locale": "locale3",
"product_url_suffix": ".htm",
"secure_base_media_url": "https://example.com/media/",
"sortOrder": 2,
"storeGroupCode": "group1",
"storeGroupName": "Group 1",
"storeName": "Store 3",
},
],
"group2" => Array [
Object {
"category_url_suffix": ".htm",
"code": "store4",
"currency": "EUR",
"isCurrent": false,
"locale": "locale4",
"product_url_suffix": null,
"secure_base_media_url": "https://example.com/media/",
"sortOrder": 0,
"storeGroupCode": "group2",
"storeGroupName": "Group 2",
"storeName": "Store 4",
},
Object {
"category_url_suffix": "-abc1",
"code": "store5",
"currency": "EUR",
"isCurrent": false,
"locale": "locale5",
"product_url_suffix": ".htm.htm",
"secure_base_media_url": "https://example.com/media/",
"sortOrder": 1,
"storeGroupCode": "group2",
"storeGroupName": "Group 2",
"storeName": "Store 5",
},
Object {
"category_url_suffix": ".some.some",
"code": "store6",
"currency": "EUR",
"isCurrent": false,
"locale": "locale6",
"product_url_suffix": "-123abc",
"secure_base_media_url": "https://example.com/media/",
"sortOrder": 2,
"storeGroupCode": "group2",
"storeGroupName": "Group 2",
"storeName": "Store 6",
},
],
},
"storeMenuIsOpen": false,
"storeMenuRef": "elementRef",
"storeMenuTriggerRef": [MockFunction],
Expand Down
28 changes: 28 additions & 0 deletions packages/peregrine/lib/talons/Header/__tests__/useStoreSwitcher.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ const getTalonProps = props => {

const storeConfigResponse = {
code: 'store2',
store_group_name: 'Group 1',
store_name: 'Store 2'
};

Expand All @@ -87,6 +88,9 @@ const availableStoresResponse = [
{
code: 'store1',
locale: 'locale1',
store_group_code: 'group1',
store_group_name: 'Group 1',
store_sort_order: 0,
store_name: 'Store 1',
default_display_currency_code: 'USD',
category_url_suffix: null,
Expand All @@ -96,6 +100,9 @@ const availableStoresResponse = [
{
code: 'store2',
locale: 'locale2',
store_group_code: 'group1',
store_group_name: 'Group 1',
store_sort_order: 1,
store_name: 'Store 2',
default_display_currency_code: 'EUR',
category_url_suffix: '.html',
Expand All @@ -105,6 +112,9 @@ const availableStoresResponse = [
{
code: 'store3',
locale: 'locale3',
store_group_code: 'group1',
store_group_name: 'Group 1',
store_sort_order: 2,
store_name: 'Store 3',
default_display_currency_code: 'EUR',
category_url_suffix: null,
Expand All @@ -114,6 +124,9 @@ const availableStoresResponse = [
{
code: 'store4',
locale: 'locale4',
store_group_code: 'group2',
store_group_name: 'Group 2',
store_sort_order: 0,
store_name: 'Store 4',
default_display_currency_code: 'EUR',
category_url_suffix: '.htm',
Expand All @@ -123,6 +136,9 @@ const availableStoresResponse = [
{
code: 'store5',
locale: 'locale5',
store_group_code: 'group2',
store_group_name: 'Group 2',
store_sort_order: 1,
store_name: 'Store 5',
default_display_currency_code: 'EUR',
category_url_suffix: '-abc1',
Expand All @@ -132,6 +148,9 @@ const availableStoresResponse = [
{
code: 'store6',
locale: 'locale6',
store_group_code: 'group2',
store_group_name: 'Group 2',
store_sort_order: 2,
store_name: 'Store 6',
default_display_currency_code: 'EUR',
category_url_suffix: '.some.some',
Expand Down Expand Up @@ -159,6 +178,15 @@ test('should return correct shape', () => {
const { talonProps } = getTalonProps(defaultProps);

expect(talonProps).toMatchSnapshot();

expect(talonProps.currentGroupName).toEqual(
storeConfigResponse.store_group_name
);

// storeGroups should be a map of the "groups", sorted in sort order.
expect(talonProps.storeGroups.size).toEqual(2);
expect(talonProps.storeGroups.get('group1').length).toEqual(3);
expect(talonProps.storeGroups.get('group2').length).toEqual(3);
});

describe('event handlers', () => {
Expand Down
4 changes: 4 additions & 0 deletions packages/peregrine/lib/talons/Header/storeSwitcher.gql.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export const GET_STORE_CONFIG_DATA = gql`
id
code
store_name
store_group_name
}
}
`;
Expand All @@ -29,7 +30,10 @@ export const GET_AVAILABLE_STORES_DATA = gql`
locale
product_url_suffix
secure_base_media_url
store_group_code
store_group_name
store_name
store_sort_order
}
}
`;
Expand Down
52 changes: 44 additions & 8 deletions packages/peregrine/lib/talons/Header/useStoreSwitcher.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,24 @@ const mapAvailableOptions = (config, stores) => {
locale,
product_url_suffix,
secure_base_media_url,
store_name: storeName
store_group_code: storeGroupCode,
store_group_name: storeGroupName,
store_name: storeName,
store_sort_order: sortOrder
} = store;

const isCurrent = code === configCode;
const option = {
category_url_suffix,
code,
currency,
isCurrent,
locale,
product_url_suffix,
secure_base_media_url,
sortOrder,
storeGroupCode,
storeGroupName,
storeName
};

Expand Down Expand Up @@ -87,6 +94,12 @@ export const useStoreSwitcher = (props = {}) => {
}
}, [storeConfigData]);

const currentGroupName = useMemo(() => {
if (storeConfigData) {
return storeConfigData.storeConfig.store_group_name;
}
}, [storeConfigData]);

const currentStoreCode = useMemo(() => {
if (storeConfigData) {
return storeConfigData.storeConfig.code;
Expand All @@ -99,17 +112,38 @@ export const useStoreSwitcher = (props = {}) => {
}
}, [urlResolverData]);

// availableStores => mapped options or empty map if undefined.
const availableStores = useMemo(() => {
return (
storeConfigData &&
availableStoresData &&
mapAvailableOptions(
storeConfigData.storeConfig,
availableStoresData.availableStores
)
(storeConfigData &&
availableStoresData &&
mapAvailableOptions(
storeConfigData.storeConfig,
availableStoresData.availableStores
)) ||
new Map()
);
}, [storeConfigData, availableStoresData]);

// Create a map of sorted store views for each group.
const storeGroups = useMemo(() => {
const groups = new Map();

availableStores.forEach(store => {
const groupCode = store.storeGroupCode;
if (!groups.has(groupCode)) {
const groupViews = [store];
groups.set(groupCode, groupViews);
} else {
const groupViews = groups.get(groupCode);
// Insert store at configured position
groupViews.splice(store.sortOrder, 0, store);
}
});

return groups;
}, [availableStores]);

// Get pathname with suffix based on page type
const getPathname = useCallback(
storeCode => {
Expand Down Expand Up @@ -209,8 +243,10 @@ export const useStoreSwitcher = (props = {}) => {
}, [setStoreMenuIsOpen]);

return {
currentStoreName,
availableStores,
currentGroupName,
currentStoreName,
storeGroups,
storeMenuRef,
storeMenuTriggerRef,
storeMenuIsOpen,
Expand Down
Loading

0 comments on commit aca1523

Please sign in to comment.