[PWA-1065] Media Url generation should use store code header but have fallback to default like other store config queries

packages/peregrine/lib/talons/Header/__tests__/__snapshots__/useStoreSwitcher.spec.js.snap

@@ -9,6 +9,7 @@ Object {
       "isCurrent": false,
       "locale": "locale1",
       "product_url_suffix": null,
+      "secure_base_media_url": "https://example.com/media/",
       "storeName": "Store 1",
     },
     "store2" => Object {
@@ -17,6 +18,7 @@ Object {
       "isCurrent": true,
       "locale": "locale2",
       "product_url_suffix": ".html",
+      "secure_base_media_url": "https://cdn.origin:9000/media/custom/",
       "storeName": "Store 2",
     },
     "store3" => Object {
@@ -25,6 +27,7 @@ Object {
       "isCurrent": false,
       "locale": "locale3",
       "product_url_suffix": ".htm",
+      "secure_base_media_url": "https://example.com/media/",
       "storeName": "Store 3",
     },
     "store4" => Object {
@@ -33,6 +36,7 @@ Object {
       "isCurrent": false,
       "locale": "locale4",
       "product_url_suffix": null,
+      "secure_base_media_url": "https://example.com/media/",
       "storeName": "Store 4",
     },
     "store5" => Object {
@@ -41,6 +45,7 @@ Object {
       "isCurrent": false,
       "locale": "locale5",
       "product_url_suffix": ".htm.htm",
+      "secure_base_media_url": "https://example.com/media/",
       "storeName": "Store 5",
     },
     "store6" => Object {
@@ -49,6 +54,7 @@ Object {
       "isCurrent": false,
       "locale": "locale6",
       "product_url_suffix": "-123abc",
+      "secure_base_media_url": "https://example.com/media/",
       "storeName": "Store 6",
     },
   },

packages/peregrine/lib/talons/Header/__tests__/useStoreSwitcher.spec.js

@@ -90,47 +90,53 @@ const availableStoresResponse = [
         store_name: 'Store 1',
         default_display_currency_code: 'USD',
         category_url_suffix: null,
-        product_url_suffix: null
+        product_url_suffix: null,
+        secure_base_media_url: 'https://example.com/media/'
     },
     {
         code: 'store2',
         locale: 'locale2',
         store_name: 'Store 2',
         default_display_currency_code: 'EUR',
         category_url_suffix: '.html',
-        product_url_suffix: '.html'
+        product_url_suffix: '.html',
+        secure_base_media_url: 'https://cdn.origin:9000/media/custom/'
     },
     {
         code: 'store3',
         locale: 'locale3',
         store_name: 'Store 3',
         default_display_currency_code: 'EUR',
         category_url_suffix: null,
-        product_url_suffix: '.htm'
+        product_url_suffix: '.htm',
+        secure_base_media_url: 'https://example.com/media/'
     },
     {
         code: 'store4',
         locale: 'locale4',
         store_name: 'Store 4',
         default_display_currency_code: 'EUR',
         category_url_suffix: '.htm',
-        product_url_suffix: null
+        product_url_suffix: null,
+        secure_base_media_url: 'https://example.com/media/'
     },
     {
         code: 'store5',
         locale: 'locale5',
         store_name: 'Store 5',
         default_display_currency_code: 'EUR',
         category_url_suffix: '-abc1',
-        product_url_suffix: '.htm.htm'
+        product_url_suffix: '.htm.htm',
+        secure_base_media_url: 'https://example.com/media/'
     },
     {
         code: 'store6',
         locale: 'locale6',
         store_name: 'Store 6',
         default_display_currency_code: 'EUR',
         category_url_suffix: '.some.some',
-        product_url_suffix: '-123abc'
+        product_url_suffix: '-123abc',
+        secure_base_media_url: 'https://example.com/media/'
     }
 ];
 
@@ -165,13 +171,16 @@ describe('event handlers', () => {
                         code: 'store1',
                         locale: 'locale1',
                         store_name: 'Store 1',
-                        default_display_currency_code: 'USD'
+                        default_display_currency_code: 'USD',
+                        secure_base_media_url: 'https://example.com/media/'
                     },
                     {
                         code: 'store2',
                         locale: 'locale2',
                         store_name: 'Store 2',
-                        default_display_currency_code: 'EUR'
+                        default_display_currency_code: 'EUR',
+                        secure_base_media_url:
+                            'https://example.com/media/abcdef'
                     }
                 ]
             },
@@ -187,7 +196,8 @@ describe('event handlers', () => {
 
         expect(mockSetItem.mock.calls).toEqual([
             ['store_view_code', 'store1'],
-            ['store_view_currency', 'USD']
+            ['store_view_currency', 'USD'],
+            ['store_view_secure_base_media_url', 'https://example.com/media/']
         ]);
     });
 

packages/peregrine/lib/talons/Header/storeSwitcher.gql.js

@@ -28,6 +28,7 @@ export const GET_AVAILABLE_STORES_DATA = gql`
             id
             locale
             product_url_suffix
+            secure_base_media_url
             store_name
         }
     }

packages/peregrine/lib/talons/Header/useStoreSwitcher.js

@@ -18,6 +18,7 @@ const mapAvailableOptions = (config, stores) => {
             default_display_currency_code: currency,
             locale,
             product_url_suffix,
+            secure_base_media_url,
             store_name: storeName
         } = store;
 
@@ -28,6 +29,7 @@ const mapAvailableOptions = (config, stores) => {
             isCurrent,
             locale,
             product_url_suffix,
+            secure_base_media_url,
             storeName
         };
 
@@ -158,6 +160,10 @@ export const useStoreSwitcher = (props = {}) => {
                 'store_view_currency',
                 availableStores.get(storeCode).currency
             );
+            storage.setItem(
+                'store_view_secure_base_media_url',
+                availableStores.get(storeCode).secure_base_media_url
+            );
 
             // Handle updating the URL if the store code should be present.
             // In this block we use `window.location.assign` to work around the

packages/pwa-buildpack/lib/queries/getAvailableStoresConfigData.graphql

@@ -2,6 +2,7 @@ query availableStoresConfigData {
     availableStores {
         code
         id
+        secure_base_media_url
         store_name
         default_display_currency_code
     }

packages/venia-ui/lib/components/StoreCodeRoute/__tests__/storeCodeRoute.spec.js

@@ -22,6 +22,7 @@ beforeEach(() => {
             default_display_currency_code: 'USD',
             id: 1,
             locale: 'en_US',
+            secure_base_media_url: 'https://example.com/media/',
             store_name: 'Default Store View'
         },
         {
@@ -30,6 +31,7 @@ beforeEach(() => {
             default_display_currency_code: 'EUR',
             id: 2,
             locale: 'fr_FR',
+            secure_base_media_url: 'https://example.com/media/abcdef/',
             store_name: 'French'
         }
     ];
@@ -57,7 +59,11 @@ test('StoreCodeRoute handler updates storage when store code in url is not curre
 
     expect(mockSetItem.mock.calls).toEqual([
         ['store_view_code', 'french'],
-        ['store_view_currency', 'EUR']
+        ['store_view_currency', 'EUR'],
+        [
+            'store_view_secure_base_media_url',
+            'https://example.com/media/abcdef/'
+        ]
     ]);
     expect(goMock).toHaveBeenCalled();
 

packages/venia-ui/lib/components/StoreCodeRoute/storeCodeRoute.js

@@ -14,10 +14,12 @@ const StoreCodeRoute = () => {
 
     const storeCodes = [];
     const storeCurrencies = {};
+    const storeSecureBaseMediaUrl = {};
 
     AVAILABLE_STORE_VIEWS.forEach(store => {
         storeCodes.push(store.code);
         storeCurrencies[store.code] = store.default_display_currency_code;
+        storeSecureBaseMediaUrl[store.code] = store.secure_base_media_url;
     });
 
     // Sort by length (longest first) to avoid false hits ie "en" matching just
@@ -43,12 +45,22 @@ const StoreCodeRoute = () => {
                 'store_view_currency',
                 storeCurrencies[storeCodeInUrl]
             );
+            storage.setItem(
+                'store_view_secure_base_media_url',
+                storeSecureBaseMediaUrl[storeCodeInUrl]
+            );
 
             // We're required to reload the page as the basename doesn't
             // change entirely without a full page reload.
             history.go(0);
         }
-    }, [currentStoreCode, history, storeCodeInUrl, storeCurrencies]);
+    }, [
+        currentStoreCode,
+        history,
+        storeCodeInUrl,
+        storeCurrencies,
+        storeSecureBaseMediaUrl
+    ]);
 
     return null;
 };

packages/venia-ui/lib/util/__tests__/makeUrl.spec.js

@@ -12,6 +12,20 @@ const absoluteUrls = [
     'https://example.com/baz.png'
 ];
 
+beforeEach(() => {
+    global.AVAILABLE_STORE_VIEWS = [
+        {
+            base_currency_code: 'USD',
+            code: 'default',
+            default_display_currency_code: 'USD',
+            id: 1,
+            locale: 'en_US',
+            secure_base_media_url: 'https://cdn.origin:9000/media/',
+            store_name: 'Default Store View'
+        }
+    ];
+});
+
 test('returns absolute url unmodified when called with no options', () => {
     absoluteUrls.forEach(url => {
         expect(makeUrl(url)).toBe(url);
@@ -108,10 +122,6 @@ test('removes absolute origin if configured to', () => {
     const width = 100;
     process.env.MAGENTO_BACKEND_URL = 'https://cdn.origin:8000/';
     const htmlTag = document.querySelector('html');
-    htmlTag.setAttribute(
-        'data-media-backend',
-        `https://cdn.origin:8000${mediaPath}`
-    );
     htmlTag.setAttribute('data-image-optimizing-origin', 'onboard');
     const makeUrlAbs = require('../makeUrl').default;
     expect(
@@ -129,10 +139,6 @@ test('removes absolute origin if configured to - with path', () => {
     const width = 100;
     process.env.MAGENTO_BACKEND_URL = 'https://cdn.origin:8000/venia/';
     const htmlTag = document.querySelector('html');
-    htmlTag.setAttribute(
-        'data-media-backend',
-        `https://cdn.origin:8000/venia${mediaPath}`
-    );
     htmlTag.setAttribute('data-image-optimizing-origin', 'onboard');
     const makeUrlAbs = require('../makeUrl').default;
     expect(
@@ -149,10 +155,6 @@ test('prepends absolute origin if configured to', () => {
     jest.resetModules();
     const width = 100;
     const htmlTag = document.querySelector('html');
-    htmlTag.setAttribute(
-        'data-media-backend',
-        `https://cdn.origin:9000${mediaPath}`
-    );
     htmlTag.setAttribute('data-image-optimizing-origin', 'backend');
     const makeUrlAbs = require('../makeUrl').default;
     expect(

packages/venia-ui/lib/util/makeUrl.js

@@ -1,8 +1,22 @@
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+
+const storage = new BrowserPersistence();
+
 // If the root template supplies the backend URL at runtime, use it directly
 const htmlDataset = document.querySelector('html').dataset;
 const { imageOptimizingOrigin } = htmlDataset;
 // Protect against potential falsy values for `mediaBackend`.
-let mediaBackend = htmlDataset.mediaBackend;
+const storeCode = storage.getItem('store_view_code') || STORE_VIEW_CODE;
+const storeSecureBaseMediaUrl = {};
+
+// Fallback to global secure_base_media_url set at build time
+AVAILABLE_STORE_VIEWS.forEach(store => {
+    storeSecureBaseMediaUrl[store.code] = store.secure_base_media_url;
+});
+
+let mediaBackend =
+    storage.getItem('store_view_secure_base_media_url') ||
+    storeSecureBaseMediaUrl[storeCode];
 if (!mediaBackend) {
     console.warn('A media backend URL should be defined in your config.');
     mediaBackend = 'https://backend.test/media/';