@things-factory/integration-marketplace 7.0.0-y.0 → 7.0.0

package/client/pages/create-store-popup.js

@@ -1,7 +1,7 @@
 import { SingleColumnFormStyles } from '@things-factory/form-ui'
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { client } from '@things-factory/shell'
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 
@@ -19,11 +19,11 @@ class CreateStorePopup extends localize(i18next)(LitElement) {
       SingleColumnFormStyles,
       css`
         :host {
-          padding: var(--padding-narrow) var(--padding-wide);
+          padding: var(--spacing-small) var(--spacing-large);
           display: flex;
           flex-direction: column;
           overflow: hidden;
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
         }
         .button-container {
           padding: var(--button-container-padding);
@@ -36,7 +36,7 @@ class CreateStorePopup extends localize(i18next)(LitElement) {
           .button-container {
             background-color: transparent;
             margin: initial;
-            padding: var(--padding-default) var(--padding-default) var(--padding-default) 0;
+            padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-medium) 0;
             height: initial;
             text-align: center;
           }
@@ -63,8 +63,9 @@ class CreateStorePopup extends localize(i18next)(LitElement) {
           >
             <option value="">--${i18next.t('label.please_select_a_platform')}--</option>
             ${(this._platforms || []).map(
-              platform =>
-                html` <option value="${platform && platform.name}">${platform && platform.description}</option> `
+              platform => html`
+                <option value="${platform && platform.name}">${platform && platform.description}</option>
+              `
             )}
           </select>
 

package/client/pages/marketplace-store-lazada.js

@@ -1,7 +1,7 @@
 import { html, css } from 'lit'
 import gql from 'graphql-tag'
 import { connect } from 'pwa-helpers/connect-mixin.js'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, store, PageView } from '@things-factory/shell'
 import LOGO from '../../assets/images/lazada-logo.jpeg'
 
@@ -18,14 +18,14 @@ class MarketplaceStoreLazada extends connect(store)(localize(i18next)(PageView))
   static get styles() {
     return css`
       :host {
-        padding: var(--padding-wide);
-        background-color: var(--main-section-background-color);
+        padding: var(--spacing-large);
+        background-color: var(--md-sys-color-background);
       }
       [overview] {
-        background-color: var(--theme-white-color, #fff);
+        background-color: var(--md-sys-color-on-primary, #fff);
         border-radius: var(--border-radius);
-        margin-bottom: var(--margin-wide, 15px);
-        padding: var(--padding-wide, 15px);
+        margin-bottom: var(--spacing-large, 15px);
+        padding: var(--spacing-large, 15px);
         box-shadow: var(--box-shadow);
         overflow: hidden;
       }
@@ -38,16 +38,16 @@ class MarketplaceStoreLazada extends connect(store)(localize(i18next)(PageView))
       [overview] h2 {
         margin: 0;
         padding: 0;
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
       }
       [overview] span {
         display: block;
-        padding-top: var(--padding-narrow, 4px);
-        color: var(--secondary-color);
+        padding-top: var(--spacing-small, 4px);
+        color: var(--md-sys-color-secondary);
       }
       [overview] span::before {
         content: '⋅';
-        margin-right: var(--padding-narrow);
+        margin-right: var(--spacing-small);
       }
       textarea:focus,
       input:focus,
@@ -57,8 +57,8 @@ class MarketplaceStoreLazada extends connect(store)(localize(i18next)(PageView))
       textarea {
         width: 800px;
         height: 250px;
-        border: var(--border-dark-color);
-        background-color: var(--theme-white-color, #fff);
+        border: var(--border-dim-color);
+        background-color: var(--md-sys-color-on-primary, #fff);
       }
       [field-2column] {
         display: grid;
@@ -71,13 +71,13 @@ class MarketplaceStoreLazada extends connect(store)(localize(i18next)(PageView))
         position: relative;
       }
       label {
-        margin-bottom: var(--margin-narrow);
+        margin-bottom: var(--spacing-small);
         font: var(--label-font);
-        color: var(--label-color);
+        color: var(--label-color, var(--md-sys-color-on-surface));
         text-transform: var(--label-text-transform);
       }
       input {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding, 4px);
@@ -94,21 +94,21 @@ class MarketplaceStoreLazada extends connect(store)(localize(i18next)(PageView))
       }
       a {
         display: inline-block;
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
-        background-color: var(--theme-white-color, #fff);
+        background-color: var(--md-sys-color-on-primary, #fff);
         margin: 9px 0;
         padding: var(--button-padding, 9px);
         font-size: 14px;
         text-decoration: none;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
       }
       a mwc-icon {
         vertical-align: middle;
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
       }
       a:hover {
-        border-color: var(--primary-color);
+        border-color: var(--md-sys-color-primary);
       }
     `
   }

package/client/pages/marketplace-store-magento.js

@@ -3,7 +3,7 @@ import { client, PageView, store } from '@things-factory/shell'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin.js'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import LOGO from '../../assets/images/magento-logo.png'
 import '../../components/add-distributor'
 import '../../components/distributor-editor'
@@ -23,14 +23,14 @@ class MarketplaceStoreMagento extends connect(store)(localize(i18next)(PageView)
   static get styles() {
     return css`
       :host {
-        padding: var(--padding-wide);
-        background-color: var(--main-section-background-color);
+        padding: var(--spacing-large);
+        background-color: var(--md-sys-color-background);
       }
       [overview] {
-        background-color: var(--theme-white-color, #fff);
+        background-color: var(--md-sys-color-on-primary, #fff);
         border-radius: var(--border-radius);
-        margin-bottom: var(--margin-wide, 15px);
-        padding: var(--padding-wide, 15px);
+        margin-bottom: var(--spacing-large, 15px);
+        padding: var(--spacing-large, 15px);
         box-shadow: var(--box-shadow);
         overflow: hidden;
       }
@@ -43,16 +43,16 @@ class MarketplaceStoreMagento extends connect(store)(localize(i18next)(PageView)
       [overview] h2 {
         margin: 0;
         padding: 0;
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
       }
       [overview] span {
         display: block;
-        padding-top: var(--padding-narrow, 4px);
-        color: var(--secondary-color);
+        padding-top: var(--spacing-small, 4px);
+        color: var(--md-sys-color-secondary);
       }
       [overview] span::before {
         content: '⋅';
-        margin-right: var(--padding-narrow);
+        margin-right: var(--spacing-small);
       }
       textarea:focus,
       input:focus,
@@ -62,8 +62,8 @@ class MarketplaceStoreMagento extends connect(store)(localize(i18next)(PageView)
       textarea {
         width: 800px;
         height: 250px;
-        border: var(--border-dark-color);
-        background-color: var(--theme-white-color, #fff);
+        border: var(--border-dim-color);
+        background-color: var(--md-sys-color-on-primary, #fff);
       }
       [field-2column] {
         display: grid;
@@ -81,13 +81,13 @@ class MarketplaceStoreMagento extends connect(store)(localize(i18next)(PageView)
         color: var(--subtitle-text-color);
       }
       label {
-        margin-bottom: var(--margin-narrow);
+        margin-bottom: var(--spacing-small);
         font: var(--label-font);
-        color: var(--label-color);
+        color: var(--label-color, var(--md-sys-color-on-surface));
         text-transform: var(--label-text-transform);
       }
       input {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding, 4px);
@@ -95,7 +95,7 @@ class MarketplaceStoreMagento extends connect(store)(localize(i18next)(PageView)
         flex: 1;
       }
       select {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding, 4px);
@@ -111,21 +111,21 @@ class MarketplaceStoreMagento extends connect(store)(localize(i18next)(PageView)
       }
       a {
         display: inline-block;
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
-        background-color: var(--theme-white-color, #fff);
+        background-color: var(--md-sys-color-on-primary, #fff);
         margin: 9px 0;
         padding: var(--button-padding, 9px);
         font-size: 14px;
         text-decoration: none;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
       }
       a mwc-icon {
         vertical-align: middle;
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
       }
       a:hover {
-        border-color: var(--primary-color);
+        border-color: var(--md-sys-color-primary);
       }
     `
   }
@@ -190,10 +190,9 @@ class MarketplaceStoreMagento extends connect(store)(localize(i18next)(PageView)
                 <select name="deliveryTransporter">
                   <option value="">--${i18next.t('label.please_select_a_delivery_transporter')}--</option>
                   ${(this.transporters || []).map(
-                    transporter =>
-                      html`
-                        <option value="${transporter && transporter.id}">${transporter && transporter.name}</option>
-                      `
+                    transporter => html`
+                      <option value="${transporter && transporter.id}">${transporter && transporter.name}</option>
+                    `
                   )}
                 </select>
               </div>
@@ -203,17 +202,16 @@ class MarketplaceStoreMagento extends connect(store)(localize(i18next)(PageView)
       ${status == 'ACTIVE'
         ? html`
               <add-distributor .marketplaceStore="${this.marketplaceStore}" @fetch-distributors="${async () =>
-            (this.distributors = await this.fetchDistributors())}"></add-distributor>
+                (this.distributors = await this.fetchDistributors())}"></add-distributor>
       <div subtitle>${i18next.t('text.registered_distributors')}</div>
         <div id="distributors">
-          <quick-find-list .data="${data}" .openHeaderRenderer=${distributor =>
-            html`
-              <distributor-editor
-                .distributor="${distributor}"
-                @distributorChanged="${e => (this.updateDistributorObj = e.detail)}"
-                @fetch-distributors="${async () => (this.distributors = await this.fetchDistributors())}"
-              ></distributor-editor>
-            `}></quick-find-list>
+          <quick-find-list .data="${data}" .openHeaderRenderer=${distributor => html`
+            <distributor-editor
+              .distributor="${distributor}"
+              @distributorChanged="${e => (this.updateDistributorObj = e.detail)}"
+              @fetch-distributors="${async () => (this.distributors = await this.fetchDistributors())}"
+            ></distributor-editor>
+          `}></quick-find-list>
         </div>
       </div>
               ${
@@ -250,17 +248,16 @@ class MarketplaceStoreMagento extends connect(store)(localize(i18next)(PageView)
               </div>
             </div>
             <add-distributor .marketplaceStore="${this.marketplaceStore}" @fetch-distributors="${async () =>
-            (this.distributors = await this.fetchDistributors())}"></add-distributor>
+              (this.distributors = await this.fetchDistributors())}"></add-distributor>
       <div subtitle>${i18next.t('text.registered_distributors')}</div>
         <div id="distributors">
-          <quick-find-list .data="${data}" .openHeaderRenderer=${distributor =>
-            html`
-              <distributor-editor
-                .distributor="${distributor}"
-                @distributorChanged="${e => (this.updateDistributorObj = e.detail)}"
-                @fetch-distributors="${async () => (this.distributors = await this.fetchDistributors())}"
-              ></distributor-editor>
-            `}></quick-find-list>
+          <quick-find-list .data="${data}" .openHeaderRenderer=${distributor => html`
+            <distributor-editor
+              .distributor="${distributor}"
+              @distributorChanged="${e => (this.updateDistributorObj = e.detail)}"
+              @fetch-distributors="${async () => (this.distributors = await this.fetchDistributors())}"
+            ></distributor-editor>
+          `}></quick-find-list>
         </div>
       </div>
             ${

package/client/pages/marketplace-store-shopee.js

@@ -2,7 +2,7 @@ import { html, css } from 'lit'
 import gql from 'graphql-tag'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { client, store, PageView } from '@things-factory/shell'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import LOGO from '../../assets/images/shopee-logo.png'
 
 const MARKETPLACE_STORE_RESULT = `{
@@ -18,14 +18,14 @@ class MarketplaceStoreShopee extends connect(store)(localize(i18next)(PageView))
   static get styles() {
     return css`
       :host {
-        padding: var(--padding-wide, 15px);
-        background-color: var(--main-section-background-color);
+        padding: var(--spacing-large, 15px);
+        background-color: var(--md-sys-color-background);
       }
       [overview] {
-        background-color: var(--theme-white-color, #fff);
+        background-color: var(--md-sys-color-on-primary, #fff);
         border-radius: var(--border-radius);
-        margin-bottom: var(--margin-wide, 15px);
-        padding: var(--padding-wide, 15px);
+        margin-bottom: var(--spacing-large, 15px);
+        padding: var(--spacing-large, 15px);
         box-shadow: var(--box-shadow);
         overflow: hidden;
       }
@@ -33,29 +33,29 @@ class MarketplaceStoreShopee extends connect(store)(localize(i18next)(PageView))
         float: left;
         max-width: 100px;
         max-height: 125px;
-        margin-right: var(--margin-wide, 15px);
+        margin-right: var(--spacing-large, 15px);
       }
       [overview] h2 {
         margin: 0;
         padding: 0;
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
       }
       [overview] span {
         display: block;
-        padding-top: var(--padding-narrow, 4px);
-        color: var(--secondary-color);
+        padding-top: var(--spacing-small, 4px);
+        color: var(--md-sys-color-secondary);
       }
       [overview] span::before {
         content: '⋅';
-        margin-right: var(--padding-narrow, 4px);
+        margin-right: var(--spacing-small, 4px);
       }
       textarea:focus,
       input:focus,
       textarea {
         width: 800px;
         height: 250px;
-        border: var(--border-dark-color);
-        background-color: var(--theme-white-color, #fff);
+        border: var(--border-dim-color);
+        background-color: var(--md-sys-color-on-primary, #fff);
       }
       [field-2column] {
         display: grid;
@@ -68,13 +68,13 @@ class MarketplaceStoreShopee extends connect(store)(localize(i18next)(PageView))
         position: relative;
       }
       label {
-        margin-bottom: var(--margin-narrow);
+        margin-bottom: var(--spacing-small);
         font: var(--label-font);
-        color: var(--label-color);
+        color: var(--label-color, var(--md-sys-color-on-surface));
         text-transform: var(--label-text-transform);
       }
       input {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding, 4px);
@@ -91,21 +91,21 @@ class MarketplaceStoreShopee extends connect(store)(localize(i18next)(PageView))
       }
       a {
         display: inline-block;
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
-        background-color: var(--theme-white-color, #fff);
+        background-color: var(--md-sys-color-on-primary, #fff);
         margin: 9px 0;
         padding: var(--button-padding, 9px);
         font-size: 14px;
         text-decoration: none;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
       }
       a mwc-icon {
         vertical-align: middle;
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
       }
       a:hover {
-        border-color: var(--primary-color);
+        border-color: var(--md-sys-color-primary);
       }
     `
   }

package/client/pages/marketplace-store-shopify.js

@@ -1,7 +1,7 @@
 import { html, css } from 'lit'
 import gql from 'graphql-tag'
 import { connect } from 'pwa-helpers/connect-mixin.js'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, store, PageView } from '@things-factory/shell'
 import LOGO from '../../assets/images/operato-logo.jpeg'
 
@@ -20,14 +20,14 @@ class MarketplaceStoreShopify extends connect(store)(localize(i18next)(PageView)
   static get styles() {
     return css`
       :host {
-        padding: var(--padding-wide, 15px);
-        background-color: var(--main-section-background-color);
+        padding: var(--spacing-large, 15px);
+        background-color: var(--md-sys-color-background);
       }
       [overview] {
-        background-color: var(--theme-white-color, #fff);
+        background-color: var(--md-sys-color-on-primary, #fff);
         border-radius: var(--border-radius);
-        margin-bottom: var(--margin-wide, 15px);
-        padding: var(--padding-wide, 15px);
+        margin-bottom: var(--spacing-large, 15px);
+        padding: var(--spacing-large, 15px);
         box-shadow: var(--box-shadow);
         overflow: hidden;
       }
@@ -35,21 +35,21 @@ class MarketplaceStoreShopify extends connect(store)(localize(i18next)(PageView)
         float: left;
         max-width: 100px;
         max-height: 125px;
-        margin-right: var(--margin-wide, 15px);
+        margin-right: var(--spacing-large, 15px);
       }
       [overview] h2 {
         margin: 0;
         padding: 0;
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
       }
       [overview] span {
         display: block;
-        padding-top: var(--padding-narrow, 4px);
-        color: var(--secondary-color);
+        padding-top: var(--spacing-small, 4px);
+        color: var(--md-sys-color-secondary);
       }
       [overview] span::before {
         content: '⋅';
-        margin-right: var(--padding-narrow, 4px);
+        margin-right: var(--spacing-small, 4px);
       }
       textarea:focus,
       input:focus,
@@ -59,8 +59,8 @@ class MarketplaceStoreShopify extends connect(store)(localize(i18next)(PageView)
       textarea {
         width: 800px;
         height: 250px;
-        border: var(--border-dark-color);
-        background-color: var(--theme-white-color, #fff);
+        border: var(--border-dim-color);
+        background-color: var(--md-sys-color-on-primary, #fff);
       }
       [field-2column] {
         display: grid;
@@ -73,13 +73,13 @@ class MarketplaceStoreShopify extends connect(store)(localize(i18next)(PageView)
         position: relative;
       }
       label {
-        margin-bottom: var(--margin-narrow);
+        margin-bottom: var(--spacing-small);
         font: var(--label-font);
-        color: var(--label-color);
+        color: var(--label-color, var(--md-sys-color-on-surface));
         text-transform: var(--label-text-transform);
       }
       input {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding, 4px);
@@ -88,7 +88,7 @@ class MarketplaceStoreShopify extends connect(store)(localize(i18next)(PageView)
         flex: 1;
       }
       select {
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         margin: var(--input-margin);
         padding: var(--input-padding, 4px);
@@ -108,21 +108,21 @@ class MarketplaceStoreShopify extends connect(store)(localize(i18next)(PageView)
       }
       a {
         display: inline-block;
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
-        background-color: var(--theme-white-color, #fff);
+        background-color: var(--md-sys-color-on-primary, #fff);
         margin: 9px 0;
         padding: var(--button-padding, 9px);
         font-size: 14px;
         text-decoration: none;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
       }
       a mwc-icon {
         vertical-align: middle;
-        color: var(--primary-color);
+        color: var(--md-sys-color-primary);
       }
       a:hover {
-        border-color: var(--primary-color);
+        border-color: var(--md-sys-color-primary);
       }
     `
   }
@@ -172,10 +172,9 @@ class MarketplaceStoreShopify extends connect(store)(localize(i18next)(PageView)
                   <select name="deliveryTransporter">
                     <option value="">--${i18next.t('label.please_select_a_delivery_transporter')}--</option>
                     ${(this.transporters || []).map(
-                      transporter =>
-                        html`
-                          <option value="${transporter && transporter.id}">${transporter && transporter.name}</option>
-                        `
+                      transporter => html`
+                        <option value="${transporter && transporter.id}">${transporter && transporter.name}</option>
+                      `
                     )}
                   </select>
                 </div>