Changed mock image service

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-storefront",
-  "version": "8.17.3",
+  "version": "8.17.4",
   "description": "Build and deploy e-commerce progressive web apps (PWAs) in record time.",
   "module": "./index.js",
   "license": "Apache-2.0",

src/mock-connector/product.js

@@ -1,4 +1,4 @@
-import fulfillAPIRequest from '..//props/fulfillAPIRequest'
+import fulfillAPIRequest from '../props/fulfillAPIRequest'
 import createProduct from './utils/createProduct'
 import createAppData from './utils/createAppData'
 import getBase64ForImage from 'react-storefront/utils/getBase64ForImage'

src/mock-connector/searchSuggestions.js

@@ -34,31 +34,31 @@ export default async function searchSuggestions(q, req, res) {
             text: 'Product 1',
             href: '/p/[productId]',
             as: '/p/1?s=1&c=1',
-            thumbnail: { src: 'https://via.placeholder.com/120x120', alt: 'Product 1' },
+            thumbnail: { src: 'https://dummyimage.com/120x120', alt: 'Product 1' },
           },
           {
             text: 'Product 2',
             href: '/p/[productId]',
             as: '/p/2?s=1&c=1',
-            thumbnail: { src: 'https://via.placeholder.com/120x120', alt: 'Product 1' },
+            thumbnail: { src: 'https://dummyimage.com/120x120', alt: 'Product 1' },
           },
           {
             text: 'Product 3',
             href: '/p/[productId]',
             as: '/p/3?s=1&c=1',
-            thumbnail: { src: 'https://via.placeholder.com/120x120', alt: 'Product 1' },
+            thumbnail: { src: 'https://dummyimage.com/120x120', alt: 'Product 1' },
           },
           {
             text: 'Product 4',
             href: '/p/[productId]',
             as: '/p/3?s=1&c=1',
-            thumbnail: { src: 'https://via.placeholder.com/120x120', alt: 'Product 1' },
+            thumbnail: { src: 'https://dummyimage.com/120x120', alt: 'Product 1' },
           },
           {
             text: 'Product 5',
             href: '/p/[productId]',
             as: '/p/5?s=1&c=1',
-            thumbnail: { src: 'https://via.placeholder.com/120x120', alt: 'Product 1' },
+            thumbnail: { src: 'https://dummyimage.com/120x120', alt: 'Product 1' },
           },
         ],
       },

src/mock-connector/utils/createFacets.js

@@ -10,9 +10,9 @@ export default function createFacets() {
         name: capitalize(name),
         code: `color:${name}`,
         image: {
-          src: `https://via.placeholder.com/48x48/${
-            colors[name].background
-          }?text=${encodeURIComponent(' ')}`,
+          src: `https://dummyimage.com/48x48/${colors[name].background}?text=${encodeURIComponent(
+            ' ',
+          )}`,
           alt: name,
         },
       })),

src/mock-connector/utils/createMedia.js

@@ -3,20 +3,20 @@ import colors from './colors'
 export default function createMedia(id, color) {
   return {
     full: [color].map((key, i) => ({
-      src: `https://via.placeholder.com/${i === 2 ? 400 : 600}x${i === 1 ? 400 : 600}/${
+      src: `https://dummyimage.com/${i === 2 ? 400 : 600}x${i === 1 ? 400 : 600}/${
         colors[key].background
       }/${colors[key].foreground}?text=${encodeURIComponent('Product ' + id)}`,
       alt: `Product ${id}`,
       magnify: {
         height: i === 1 ? 800 : 1200,
         width: i === 2 ? 800 : 1200,
-        src: `https://via.placeholder.com/${i === 2 ? 800 : 1200}x${i === 1 ? 800 : 1200}/${
+        src: `https://dummyimage.com/${i === 2 ? 800 : 1200}x${i === 1 ? 800 : 1200}/${
           colors[key].background
         }/${colors[key].foreground}?text=${encodeURIComponent('Product ' + id)}`,
       },
     })),
     thumbnails: [color].map((key, i) => ({
-      src: `https://via.placeholder.com/${i === 2 ? 300 : 400}x${i === 1 ? 300 : 400}/${
+      src: `https://dummyimage.com/${i === 2 ? 300 : 400}x${i === 1 ? 300 : 400}/${
         colors[key].background
       }?text=${encodeURIComponent(`Product ${id}`)}`,
       alt: key,

src/mock-connector/utils/createProduct.js

@@ -15,27 +15,27 @@ export default function createProduct(id, numColors = 4) {
     priceText: `$${price}`,
     rating: (10 - (id % 10)) / 2.0,
     thumbnail: {
-      src: `https://via.placeholder.com/400x400/${colors[color].background}/${
+      src: `https://dummyimage.com/400x400/${colors[color].background}/${
         colors[color].foreground
       }?text=${encodeURIComponent('Product ' + id)}`,
       alt: `Product ${id}`,
     },
     media: {
       full: variants.map((key, i) => ({
-        src: `https://via.placeholder.com/${i === 2 ? 400 : 600}x${i === 1 ? 400 : 600}/${
+        src: `https://dummyimage.com/${i === 2 ? 400 : 600}x${i === 1 ? 400 : 600}/${
           colors[key].background
         }/${colors[key].foreground}?text=${encodeURIComponent('Product ' + id)}`,
         alt: `Product ${id}`,
         magnify: {
           height: i === 1 ? 800 : 1200,
           width: i === 2 ? 800 : 1200,
-          src: `https://via.placeholder.com/${i === 2 ? 800 : 1200}x${i === 1 ? 800 : 1200}/${
+          src: `https://dummyimage.com/${i === 2 ? 800 : 1200}x${i === 1 ? 800 : 1200}/${
             colors[key].background
           }/${colors[key].foreground}?text=${encodeURIComponent('Product ' + id)}`,
         },
       })),
       thumbnails: variants.map((key, i) => ({
-        src: `https://via.placeholder.com/${i === 2 ? 233 : 300}x${i === 1 ? 233 : 300}/${
+        src: `https://dummyimage.com/${i === 2 ? 233 : 300}x${i === 1 ? 233 : 300}/${
           colors[key].background
         }/${colors[key].foreground}?text=${encodeURIComponent('Product ' + id)}`,
         alt: `Product ${id}`,
@@ -57,33 +57,33 @@ export default function createProduct(id, numColors = 4) {
         id: name,
         disabled: idx === 2,
         image: {
-          src: `https://via.placeholder.com/48x48/${
-            colors[name].background
-          }?text=${encodeURIComponent(' ')}`,
+          src: `https://dummyimage.com/48x48/${colors[name].background}?text=${encodeURIComponent(
+            ' ',
+          )}`,
           alt: name,
         },
         media: {
           full: [name, name, name].map((key, i) => ({
-            src: `https://via.placeholder.com/${i === 2 ? 400 : 600}x${i === 1 ? 400 : 600}/${
+            src: `https://dummyimage.com/${i === 2 ? 400 : 600}x${i === 1 ? 400 : 600}/${
               colors[key].background
             }/${colors[key].foreground}?text=${encodeURIComponent('Product ' + id)}`,
             alt: `Product ${id}`,
             magnify: {
               height: i === 1 ? 800 : 1200,
               width: i === 2 ? 800 : 1200,
-              src: `https://via.placeholder.com/${i === 2 ? 800 : 1200}x${i === 1 ? 800 : 1200}/${
+              src: `https://dummyimage.com/${i === 2 ? 800 : 1200}x${i === 1 ? 800 : 1200}/${
                 colors[key].background
               }/${colors[key].foreground}?text=${encodeURIComponent('Product ' + id)}`,
             },
           })),
           thumbnails: [name, name, name].map((key, i) => ({
-            src: `https://via.placeholder.com/${i === 2 ? 300 : 400}x${i === 1 ? 300 : 400}/${
+            src: `https://dummyimage.com/${i === 2 ? 300 : 400}x${i === 1 ? 300 : 400}/${
               colors[key].background
             }/${colors[key].foreground}?text=${encodeURIComponent(`Product ${id}`)}`,
             alt: key,
           })),
           thumbnail: [name].map(key => ({
-            src: `https://via.placeholder.com/400x400/${colors[key].background}/${
+            src: `https://dummyimage.com/400x400/${colors[key].background}/${
               colors[key].foreground
             }?text=${encodeURIComponent('Product ' + id)}`,
             alt: `Product ${id}`,

src/utils/getBase64ForImage.js

@@ -1,7 +1,7 @@
 import fetch from '../fetch'
 
-export default async function getBase64ForImage(src) {
-  const res = await fetch(src)
+export default async function getBase64ForImage(...args) {
+  const res = await fetch(...args)
   const contentType = res.headers.get('content-type')
   const buffer = await res.buffer()
   return `data:${contentType};base64,${buffer.toString('base64')}`