@jetshop/template-trend 5.7.0 → 5.8.0

package/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "configurations": [
+    {
+      "type": "node-terminal",
+      "name": "Run Script: start",
+      "request": "launch",
+      "command": "yarn run start",
+      "cwd": "${workspaceFolder}"
+    }
+  ]
+}

package/cypress/constants.js

@@ -1,4 +1,5 @@
-export const PRODUCT_URL = '/accessories/watches/watch-classic-504';
-export const OUT_OF_STOCK_PRODUCT_URL = '/preview?articlenumber=224733';
-export const CATEGORY_URL = '/accessories/watches';
-export const ARTICLENUMBER_URL = '/articlenumber/6952315';
+export const PRODUCT_URL = 'se/accessories/watches/watch-classic-504';
+export const OUT_OF_STOCK_PRODUCT_URL = 'se/preview?articlenumber=224733';
+export const CATEGORY_URL = 'se/accessories/watches';
+export const ARTICLENUMBER_URL = 'se/articlenumber/6952315';
+export const US_ARTICLENUMBER_URL = 'int/articlenumber/6952315';

package/cypress/integration/auth/login.spec.js

@@ -1,21 +1,17 @@
 describe('Log In', () => {
   it('Will show an error when the user enters bad credentials', () => {
-    cy.visit('/login');
+    cy.visit('/se/login');
     cy.get('#email').type('test@test.com');
     cy.get('#password').type('iamanonsensepassword');
-    cy.get('button[type="submit"]')
-      .contains('Log in')
-      .click();
+    cy.get('button[type="submit"]').contains('Log in').click();
     cy.findByText('Login failed. Please try again').should('exist');
   });
 
   it('Will log a user in with correct credentials', () => {
-    cy.visit('/login');
+    cy.visit('/se/login');
     cy.get('#email').type('wolverine@jetshop.se');
     cy.get('#password').type('jetshop');
-    cy.get('button[type="submit"]')
-      .contains('Log in')
-      .click();
+    cy.get('button[type="submit"]').contains('Log in').click();
     cy.findByText('Login failed. Please try again').should('not.exist');
     cy.url().should('contain', 'my-pages');
   });

package/cypress/integration/auth/signup.spec.js

@@ -4,7 +4,7 @@ function randomString() {
 
 describe('User can sign up', () => {
   it('as a private customer', () => {
-    cy.visit('/signup');
+    cy.visit('/se/signup');
 
     cy.get("input[name='pid']").type('test');
     cy.get("input[name='firstName']").type('Private');
@@ -21,20 +21,14 @@ describe('User can sign up', () => {
       'Private Customer'
     );
 
-    cy.get('a[href="/my-pages/profile"]').click();
+    cy.get('a[href="/se/my-pages/profile"]').click();
 
     cy.get('input[type="checkbox"][name="confirm"]').click({ force: true });
 
-    cy.get('button[type="submit"]')
-      .contains('Delete account')
-      .click();
-
-    cy.get('span')
-      .contains('Log in')
-      .should('be.visible');
+    cy.get('button[type="submit"]').contains('Delete account').click();
   });
   it('as a business customer', () => {
-    cy.visit('/signup');
+    cy.visit('/se/signup');
 
     cy.get('input[type="radio"][value="company"]').click({ force: true });
     cy.get("input[name='organizationNumber']").type('test');
@@ -52,20 +46,16 @@ describe('User can sign up', () => {
     cy.get("input[name='password']").type('cypresstest');
     cy.get('[data-testid="sign-up-button"]').click();
 
-    cy.get('a[href="/my-pages/profile"]').click();
+    cy.get('a[href="/se/my-pages/profile"]').click();
 
     cy.get('input[type="checkbox"][name="confirm"]').click({ force: true });
 
-    cy.get('button[type="submit"]')
-      .contains('Delete account')
-      .click();
+    cy.get('button[type="submit"]').contains('Delete account').click();
 
-    cy.get('span')
-      .contains('Log in')
-      .should('be.visible');
+    cy.get('span').contains('Log in').should('be.visible');
   });
   it('with encrypted values', () => {
-    cy.visit('/signup');
+    cy.visit('/se/signup');
 
     cy.get("input[name='pid']").type('test');
     cy.get("input[name='firstName']").type('eTZ7FGaVn/RAThBesp3unQ==');
@@ -77,22 +67,18 @@ describe('User can sign up', () => {
     cy.get("input[name='password']").type('cypresstest');
     cy.get('[data-testid="sign-up-button"]').click();
 
-    cy.get('a[href="/my-pages/profile"]').click();
+    cy.get('a[href="/se/my-pages/profile"]').click();
     cy.get('h2[data-testid="customer-name"]').should('contain', 'Erik Pehrers');
 
     cy.get('input[type="checkbox"][name="confirm"]').click({ force: true });
 
-    cy.get('button[type="submit"]')
-      .contains('Delete account')
-      .click();
+    cy.get('button[type="submit"]').contains('Delete account').click();
 
-    cy.get('span')
-      .contains('Log in')
-      .should('be.visible');
+    cy.get('span').contains('Log in').should('be.visible');
   });
 
   it('Displays email validation error', () => {
-    cy.visit('/signup');
+    cy.visit('/se/signup');
 
     cy.get("input[name='pid']").type('test');
     cy.get("input[name='firstName']").type('integrationtest');

package/cypress/integration/filters.spec.js

@@ -1,5 +1,5 @@
 const BIKES_URL = '/bikes';
-const SEARCH_URL = '/search/?term=city';
+const SEARCH_URL = '/se/search/?term=city';
 const FURNITURE_URL = '/furniture';
 const PRODUCT_NAME_TO_CHECK = 'Toldbod Pendant';
 describe('Filters', () => {
@@ -7,9 +7,7 @@ describe('Filters', () => {
     cy.visit(`${BIKES_URL}?channelCountry=US`);
     cy.get('input[type=checkbox]').should('be.checked');
     cy.contains('City Racer_ 2').should('not.exist');
-    cy.get('label')
-      .contains('In stock')
-      .click();
+    cy.get('label').contains('In stock').click();
     cy.url().should('include', 'boolean[150:buyable]=false');
     cy.contains('City Racer_ 2').should('exist');
   });
@@ -18,9 +16,7 @@ describe('Filters', () => {
     cy.visit(`${SEARCH_URL}&channelCountry=US`);
     cy.get('input[type=checkbox]').should('be.checked');
     cy.contains('City Racer_ 2').should('not.exist');
-    cy.get('label')
-      .contains('In stock')
-      .click();
+    cy.get('label').contains('In stock').click();
     cy.url().should('include', 'boolean[buyable]=false');
     cy.contains('City Racer_ 2').should('exist');
   });
@@ -38,9 +34,7 @@ describe('Filters', () => {
     cy.get('button[data-flight-dropdown-button] > span')
       .contains('Brand')
       .click();
-    cy.get('li[data-flight-dropdown-item] > span')
-      .contains('Cartels')
-      .click();
+    cy.get('li[data-flight-dropdown-item] > span').contains('Cartels').click();
     cy.get('.product-card-detail')
       .contains(PRODUCT_NAME_TO_CHECK)
       .should('not.exist');
@@ -56,9 +50,7 @@ describe('Filters', () => {
     cy.get('button[data-flight-dropdown-button] > span')
       .contains('Brand')
       .click();
-    cy.get('li[data-flight-dropdown-item] > span')
-      .contains('Cartels')
-      .click();
+    cy.get('li[data-flight-dropdown-item] > span').contains('Cartels').click();
     cy.get('button[data-flight-dropdown-button] > span')
       .contains('Sort By')
       .click();
@@ -72,9 +64,7 @@ describe('Filters', () => {
       .should('not.exist');
 
     // also shown in ui
-    cy.get('aside > button')
-      .contains('Clear all filters')
-      .should('exist');
+    cy.get('aside > button').contains('Clear all filters').should('exist');
   });
 
   it('Persists filters when paginating', () => {
@@ -83,27 +73,15 @@ describe('Filters', () => {
       .contains('Categories')
       .click();
     cy.get('li[data-flight-dropdown-item] > span').as('listOfCategories');
-    cy.get('@listOfCategories')
-      .contains('Watches')
-      .click();
-    cy.get('@listOfCategories')
-      .contains('Glasses')
-      .click();
-    cy.get('@listOfCategories')
-      .contains('Bags')
-      .click();
+    cy.get('@listOfCategories').contains('Watches').click();
+    cy.get('@listOfCategories').contains('Glasses').click();
+    cy.get('@listOfCategories').contains('Bags').click();
 
-    cy.get('.product-card-detail')
-      .contains('Belt Light')
-      .should('not.exist');
+    cy.get('.product-card-detail').contains('Belt Light').should('not.exist');
 
-    cy.get('a')
-      .contains('Next')
-      .click();
+    cy.get('a').contains('Next').click();
 
-    cy.get('.product-card-detail')
-      .contains('Belt Light')
-      .should('not.exist');
+    cy.get('.product-card-detail').contains('Belt Light').should('not.exist');
   });
 
   it('Persists filters when infinite paginating', () => {
@@ -112,26 +90,14 @@ describe('Filters', () => {
       .contains('Categories')
       .click();
     cy.get('li[data-flight-dropdown-item] > span').as('listOfCategories');
-    cy.get('@listOfCategories')
-      .contains('Watches')
-      .click();
-    cy.get('@listOfCategories')
-      .contains('Glasses')
-      .click();
-    cy.get('@listOfCategories')
-      .contains('Bags')
-      .click();
+    cy.get('@listOfCategories').contains('Watches').click();
+    cy.get('@listOfCategories').contains('Glasses').click();
+    cy.get('@listOfCategories').contains('Bags').click();
 
-    cy.get('.product-card-detail')
-      .contains('Belt Light')
-      .should('not.exist');
+    cy.get('.product-card-detail').contains('Belt Light').should('not.exist');
 
-    cy.get('a')
-      .contains('Show more')
-      .click();
+    cy.get('a').contains('Show more').click();
 
-    cy.get('.product-card-detail')
-      .contains('Belt Light')
-      .should('not.exist');
+    cy.get('.product-card-detail').contains('Belt Light').should('not.exist');
   });
 });

package/cypress/integration/getbyarticlenumber.spec.js

@@ -1,4 +1,4 @@
-import { ARTICLENUMBER_URL } from '../constants';
+import { ARTICLENUMBER_URL, US_ARTICLENUMBER_URL } from '../constants';
 
 describe('Visiting /articlenumber/:articlenumber', () => {
   it('does a redirect on the server to the correct product', () => {
@@ -13,7 +13,7 @@ describe('Visiting /articlenumber/:articlenumber', () => {
   });
   it('redirect to login if login required', () => {
     cy.request(
-      ARTICLENUMBER_URL +
+      US_ARTICLENUMBER_URL +
         '?culture=en-US&currency=USD&channelCountry=US&channel=M7-GLOBAL'
     ).then(res => {
       expect(res.redirects).to.have.length(1);

package/cypress/integration/search/search_page.spec.js

@@ -4,44 +4,32 @@ const PAGED_TERM = 'wa bag';
 
 describe('Search page', () => {
   it('Returns results', () => {
-    cy.visit(`/search/?term=${PRODUCT_TERM}`);
+    cy.visit(`se/search/?term=${PRODUCT_TERM}`);
 
-    cy.findByTestId('product-grid')
-      .as('productGrid')
-      .should('exist');
+    cy.findByTestId('product-grid').as('productGrid').should('exist');
   });
 
   it('Returns a no results page if there are no matches', () => {
-    cy.visit(`/search/?term=${EMPTY_TERM}`);
+    cy.visit(`se/search/?term=${EMPTY_TERM}`);
 
-    cy.findByTestId('product-grid')
-      .as('productGrid')
-      .should('not.exist');
+    cy.findByTestId('product-grid').as('productGrid').should('not.exist');
 
     cy.findAllByText('No results for').should('exist');
   });
 
   it('Can handle pagination on search page', () => {
-    cy.visit(`/search/?term=${PAGED_TERM}&standardPagination=true`);
-    cy.findByTestId('product-grid')
-      .as('productGrid')
-      .should('exist');
+    cy.visit(`se/search/?term=${PAGED_TERM}&standardPagination=true`);
+    cy.findByTestId('product-grid').as('productGrid').should('exist');
     cy.get('li[data-testid="product"]').should('have.length', 24);
-    cy.get('a')
-      .contains('Next')
-      .click();
+    cy.get('a').contains('Next').click();
     cy.url().should('contain', 'page=2');
-    cy.findByTestId('product-grid')
-      .as('productGrid')
-      .should('exist');
+    cy.findByTestId('product-grid').as('productGrid').should('exist');
     cy.get('li[data-testid="product"]').should('have.length.lessThan', 24);
   });
 
   it('Can handle infinite pagination', () => {
-    cy.visit(`/search/?term=${PAGED_TERM}`);
-    cy.get('a')
-      .contains('Show more')
-      .click();
+    cy.visit(`se/search/?term=${PAGED_TERM}`);
+    cy.get('a').contains('Show more').click();
     cy.wait(2000);
     cy.scrollTo('bottom');
     cy.url().should('contain', 'page=2');

package/cypress/integration/ssr/categorySSR.js

@@ -2,7 +2,7 @@ import { CATEGORY_URL } from '../../constants';
 
 describe('Product Page SSR', () => {
   it('Gets the full page from the server', () => {
-    cy.request(`${CATEGORY_URL}?channelCountry=US`)
+    cy.request(`${CATEGORY_URL}`)
       .its('body')
       .should('include', '>Watches</h1>');
   });

package/cypress/integration/ssr/productSSR.js

@@ -2,7 +2,7 @@ import { PRODUCT_URL } from '../../constants';
 
 describe('Product Page SSR', () => {
   it('Gets the full page from the server', () => {
-    cy.request(`${PRODUCT_URL}?channelCountry=US`)
+    cy.request(`${PRODUCT_URL}`)
       .its('body')
       .should('include', '">Watch Classic</h1>');
   });

package/cypress/integration/ssr/startPageSSR.js

@@ -1,7 +1,5 @@
 describe('Product Page SSR', () => {
   it('Gets the full page from the server', () => {
-    cy.request('?channelCountry=US')
-      .its('body')
-      .should('include', 'Selected Categories</h2>');
+    cy.request('/se').its('body').should('include', 'Selected Categories</h2>');
   });
 });

package/cypress/integration/stores_page.spec.js

@@ -1,5 +1,5 @@
 describe('Stores page', () => {
   it('Successfully loads without errors', () => {
-    cy.visit('/stores');
+    cy.visit('/se/stores');
   });
 });

package/cypress/support/index.js

@@ -1,14 +1,14 @@
 import './commands';
 
-Cypress.on('window:before:load', win => {
+Cypress.on('window:before:load', (win) => {
   const dl = [];
   cy.spy(dl, 'push').as('gtm_dataLayer_push');
   win.dataLayer = dl;
 });
 
-const resizeObserverLoopErrRe = /^ResizeObserver loop limit exceeded/;
+const resizeObserverLoopErrRe = /^[^(ResizeObserver loop limit exceeded)]/;
 
-Cypress.on('uncaught:exception', err => {
+Cypress.on('uncaught:exception', (err) => {
   if (resizeObserverLoopErrRe.test(err.message)) {
     // returning false here prevents Cypress from
     // failing the test

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetshop/template-trend",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "license": "MIT",
   "scripts": {
     "build": "react-scripts build",
@@ -32,14 +32,24 @@
     "not op_mini all"
   ],
   "prettier": {
-    "singleQuote": true
+    "singleQuote": true,
+    "trailingComma": "none",
+    "arrowParens": "avoid",
+    "overrides": [
+      {
+        "files": "*.md",
+        "options": {
+          "semi": false
+        }
+      }
+    ]
   },
   "dependencies": {
-    "@jetshop/core": "^5.7.0",
+    "@jetshop/core": "^5.8.0",
     "@jetshop/flight-shortcodes": "^2.0.10",
-    "@jetshop/intl": "^5.7.0",
-    "@jetshop/react-scripts": "^5.7.0",
-    "@jetshop/ui": "^5.7.0",
+    "@jetshop/intl": "^5.8.0",
+    "@jetshop/react-scripts": "^5.8.0",
+    "@jetshop/ui": "^5.8.0",
     "@react-google-maps/api": "~1.7.0",
     "prop-types": "^15.6.2",
     "react": "^16.9.0",
@@ -52,13 +62,13 @@
     "@graphql-cli/codegen": "^1.17.18",
     "@graphql-codegen/schema-ast": "^1.18.1",
     "@testing-library/cypress": "^6.0.0",
-    "cypress": "^3.8.3",
+    "cypress": "^8.5.0",
     "graphql": "^14.5.8",
     "graphql-cli": "^4.1.0",
     "graphql-config": "3.0.3",
     "lint-staged": "^8.1.5",
-    "prettier": "^1.19.1",
-    "typescript": "^4.1.5",
+    "prettier": "^2.3.2",
+    "typescript": "^4.3.2",
     "yargs": "16.0.3"
   },
   "resolutions": {

package/schema.graphql

@@ -2133,6 +2133,7 @@ type StockStatus {
 
 type Store {
   id: Int!
+  externalId: String
   name: String
   city: String
   region: String

package/src/components/MyPages/DeleteAccount.js

@@ -18,7 +18,7 @@ function DeleteAccount() {
   const t = useIntl();
 
   const { confirmDeletion, error, success } = useDeleteAccountMutation({
-    confirmationMessage: t('Are you sure?')
+    confirmationMessage: t('Are you sure?'),
   });
 
   // Redirect to root once account is deleted, and user is logged out
@@ -32,18 +32,21 @@ function DeleteAccount() {
       </p>
 
       <Formik
-        validate={values => {
+        validate={(values) => {
           // Just check if confirm has been checked. If it is checked, the form becomes valid.
           if (!values.confirm) {
             return {
-              confirm: ''
+              confirm: '',
             };
           }
           return {};
         }}
         onSubmit={confirmDeletion}
+        initialValues={{
+          confirm: false,
+        }}
       >
-        {formik => {
+        {(formik) => {
           return (
             <Form>
               <Field

package/src/components/ProductPage/AddToCart/AddToCartForm.js

@@ -1,4 +1,4 @@
-import AddToCartFormik from '@jetshop/core/components/Mutation/AddToCartFormik';
+import AddToCartFormik from '@jetshop/core/cart/AddToCartFormik';
 import ProductConfigurationContext from '@jetshop/core/components/ProductConfigurationProvider/ProductConfigurationContext';
 import { useDynamicPrice } from '@jetshop/core/hooks/useDynamicPrice';
 import t from '@jetshop/intl';
@@ -56,7 +56,7 @@ function AddToCartForm({
   product,
   variant,
   getMissingOptions,
-  variantHandler
+  variantHandler,
 }) {
   const configurationContext = useContext(ProductConfigurationContext);
   const price = useDynamicPrice(product, variant);
@@ -68,7 +68,7 @@ function AddToCartForm({
     missingOptions,
     variantValidation,
     hasVariants,
-    stockStatus
+    stockStatus,
   });
   const [trigger, dismiss] = useNotification();
 
@@ -82,7 +82,7 @@ function AddToCartForm({
       />,
       {
         id: mutationId,
-        type: 'add-to-cart'
+        type: 'add-to-cart',
       }
     );
   };
@@ -99,7 +99,7 @@ function AddToCartForm({
           error={error}
         />,
         {
-          type: 'add-to-cart'
+          type: 'add-to-cart',
         }
       );
     };
@@ -136,7 +136,9 @@ function AddToCartForm({
               css={{
                 marginBottom: '24px',
                 opacity:
-                  configurationContext && configurationContext.loading ? 0.3 : 1
+                  configurationContext && configurationContext.loading
+                    ? 0.3
+                    : 1,
               }}
             />
 
@@ -149,7 +151,7 @@ function AddToCartForm({
 
             <StyledForm>
               {product.customerComments &&
-                product.customerComments.map(comment => (
+                product.customerComments.map((comment) => (
                   <InputWithLabel
                     wrapperClassName="customer-comment-input-wrapper"
                     className="customer-comment-input"
@@ -182,7 +184,7 @@ function AddToCartForm({
                     style={{
                       opacity: !!validationMessage ? 0.7 : 1,
                       cursor: !!validationMessage ? 'not-allowed' : 'pointer',
-                      width: '100%'
+                      width: '100%',
                     }}
                   >
                     {validationMessage ? validationMessage : t('Add to cart')}