@things-factory/operato-mms 3.7.6 → 3.7.10

package/client/menu.js

@@ -1,8 +1,9 @@
 import '@material/mwc-icon'
-import { store } from '@things-factory/shell'
+
 import { updateMenuTemplate } from '@things-factory/lite-menu'
+import { store } from '@things-factory/shell'
 
-var stores
+var stores, platforms
 
 store.subscribe(() => {
   var state = store.getState()
@@ -13,6 +14,14 @@ store.subscribe(() => {
 
   stores = state.mms.stores
 
+  // At the moment, only Sales by Platform will use this variable
+  // and currently only support for lazada and shopee
+  platforms = stores
+    .map(store => store.platform)
+    .filter((v, i, a) => a.indexOf(v) === i)
+    .filter(v => ['lazada', 'shopee'].indexOf(v) !== -1)
+    .sort()
+
   updateMenuTemplate(
     getMenuTemplate({
       stores: stores || []
@@ -103,6 +112,35 @@ function getMenuTemplate({ stores }) {
       path: 'mms-inventory-product',
       icon: 'storage'
     },
+    {
+      name: 'report',
+      type: 'group'
+    },
+    {
+      name: 'sales by platform',
+      path: 'mms-report-sales-by-platform-home',
+      icon: 'assessment',
+      menus: [
+        ...platforms.map(platform => {
+          return {
+            name: platform,
+            path: `${platform}-sales-report`,
+            icon: 'store'
+          }
+        })
+        // to be removed. it was here for testing purpose
+        /* {
+          name: 'lazada',
+          path: 'lazada-sales-report',
+          icon: 'store'
+        },
+        {
+          name: 'shopee',
+          path: 'shopee-sales-report',
+          icon: 'store'
+        } */
+      ]
+    },
     {
       name: 'store integration',
       type: 'group'

package/client/pages/reports/sales-by-platform/home.js

@@ -0,0 +1,144 @@
+import { css, html } from 'lit-element'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { PageView, store } from '@things-factory/shell'
+
+class SalesByPlatformHome extends connect(store)(PageView) {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+          background-color: var(--main-section-background-color);
+          padding: var(--padding-wide);
+          overflow: auto;
+          --bizplace-cards-size: 150px;
+        }
+        h2 {
+          margin: var(--title-margin);
+          font: var(--title-font);
+          color: var(--title-text-color);
+        }
+        input {
+          display: block;
+        }
+        [page-description] {
+          margin: var(--page-description-margin);
+          font: var(--page-description-font);
+          color: var(--page-description-color);
+        }
+        [button-primary] {
+          background-color: var(--button-primary-background-color);
+          border: var(--button-border);
+          border-radius: var(--button-border-radius);
+          padding: var(--button-padding);
+          color: var(--button-primary-color);
+          font: var(--button-primary-font);
+          text-transform: var(--button-text-transform);
+          text-decoration: none;
+        }
+        [button-primary]:hover {
+          background-color: var(--button-primary-active-background-color);
+          box-shadow: var(--button-active-box-shadow);
+        }
+        img {
+          max-width: 45%;
+          float: right;
+        }
+        ul {
+          margin: 0 0 var(--margin-wide) 0;
+          padding: 0;
+          overflow: hidden;
+          list-style: none;
+        }
+        li {
+          display: block;
+          float: left;
+          background-color: var(--theme-white-color);
+          border-radius: var(--border-radius);
+          border: 1px solid var(--theme-white-color);
+          box-shadow: var(--box-shadow);
+          margin: var(--margin-narrow) var(--margin-default) var(--margin-default) 0;
+          padding: var(--padding-default) var(--padding-default) var(--padding-narrow) var(--padding-default);
+          text-align: center;
+        }
+        li:hover {
+          border: 1px solid var(--primary-color);
+        }
+        * {
+          display: block;
+        }
+        a {
+          width: var(--bizplace-cards-size);
+          cursor: pointer;
+          text-decoration: none;
+          font-size: var(--fontsize-small);
+          color: var(--secondary-color);
+        }
+        mwc-icon {
+          color: var(--primary-color);
+        }
+        strong {
+          max-width: 100%;
+
+          font-size: 1.2em;
+          color: var(--secondary-text-color);
+        }
+        a,
+        strong @media screen and (max-width: 600px) {
+          [field] {
+            grid-column: span 2;
+          }
+          img {
+            display: none;
+          }
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {
+      _platforms: Array
+    }
+  }
+
+  get context() {
+    return {
+      title: `ecommerce products`
+    }
+  }
+
+  render() {
+    const platforms = this._platforms || []
+
+    return html`
+      <h2>Sales Report</h2>
+      <p page-description>View your day to day sales report.</p>
+
+      <img src="/assets/images/image-products.png" alt="products home graphic image" />
+
+      <ul marketplaceStore>
+        ${platforms.map(
+          platform => html`
+            <li>
+              <a href="${platform}-sales-report">
+                <mwc-icon>${'widgets'}</mwc-icon>
+                <strong>${platform}</strong>
+              </a>
+            </li>
+          `
+        )}
+      </ul>
+    `
+  }
+
+  stateChanged(state) {
+    this._platforms = state.mms?.stores
+      .map(store => store.platform)
+      .filter((v, i, a) => a.indexOf(v) === i)
+      .filter(v => ['lazada', 'shopee'].indexOf(v) !== -1)
+  }
+}
+
+window.customElements.define('mms-report-sales-by-platform-home', SalesByPlatformHome)

package/client/pages/reports/sales-by-platform/index.js

@@ -0,0 +1,3 @@
+export * from './home'
+export * from './lazada-sales-report'
+export * from './shopee-sales-report'

package/client/pages/reports/sales-by-platform/lazada-sales-report.js

@@ -0,0 +1,379 @@
+import '@things-factory/form-ui'
+import '@things-factory/grist-ui'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit-element'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { i18next } from '@things-factory/i18n-base'
+import { client, PageView, store } from '@things-factory/shell'
+import { ScrollbarStyles } from '@things-factory/styles'
+import { isMobileDevice } from '@things-factory/utils'
+
+class LazadaSalesReport extends connect(store)(PageView) {
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+
+          overflow: hidden;
+        }
+
+        search-form {
+          overflow: visible;
+        }
+        data-grist {
+          overflow-y: auto;
+          flex: 1;
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {
+      _searchFields: Array,
+      _config: Object
+    }
+  }
+
+  get context() {
+    return {
+      title: i18next.t('title.lazada_sales_report'),
+      exportable: {
+        name: i18next.t('title.lazada_sales_report'),
+        data: this._exportableData.bind(this)
+      }
+    }
+  }
+
+  get _searchForm() {
+    return this.shadowRoot.querySelector('search-form')
+  }
+
+  get _dataGrist() {
+    return this.shadowRoot.querySelector('data-grist')
+  }
+
+  get _toDateInput() {
+    return this._searchForm.shadowRoot.querySelector('input[name=toDate]')
+  }
+
+  render() {
+    return html`
+      <search-form id="search-form" .fields=${this._searchFields} @submit=${e => this._dataGrist.fetch()}></search-form>
+      <data-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this._config}
+        .fetchHandler="${this.fetchHandler.bind(this)}"
+      ></data-grist>
+    `
+  }
+
+  async pageInitialized() {
+    this._searchFields = [
+      {
+        label: i18next.t('field.store'),
+        name: 'marketplaceStoreId',
+        type: 'select',
+        options: [{ value: '' }],
+        props: { searchOper: 'eq' }
+      },
+      {
+        label: i18next.t('field.from_date'),
+        name: 'fromDate',
+        type: 'date',
+        props: {
+          searchOper: 'eq',
+          max: new Date().toISOString().split('T')[0]
+        },
+        value: (() => {
+          let date = new Date()
+          date.setMonth(date.getMonth() - 1)
+          return date.toISOString().split('T')[0]
+        })(),
+        handlers: { change: this._modifyDateRange.bind(this) }
+      },
+      {
+        label: i18next.t('field.to_date'),
+        name: 'toDate',
+        type: 'date',
+        props: {
+          searchOper: 'eq',
+          min: (() => {
+            let date = new Date()
+            date.setMonth(date.getMonth() - 1)
+            return date.toISOString().split('T')[0]
+          })(),
+          max: new Date().toISOString().split('T')[0]
+        },
+        value: new Date().toISOString().split('T')[0]
+      }
+    ]
+
+    this._config = {
+      rows: { appendable: false },
+      pagination: { limit: 50, pages: [50, 100, 200, 500, 1000] },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        {
+          type: 'string',
+          name: 'marketplaceStore',
+          header: i18next.t('field.store_name'),
+          sortable: true,
+          imex: { header: i18next.t('field.store_name'), key: 'marketplaceStore', width: 50, type: 'string' },
+          width: 200
+        },
+        {
+          type: 'string',
+          name: 'orderNo',
+          header: i18next.t('field.order_no'),
+          sortable: true,
+          imex: { header: i18next.t('field.order_no'), key: 'orderNo', width: 50, type: 'string' },
+          width: 200
+        },
+        {
+          type: 'string',
+          name: 'marketplaceOrderItem',
+          header: i18next.t('field.item'),
+          sortable: false,
+          imex: { header: i18next.t('field.item'), key: 'marketplaceOrderItem', width: 120, type: 'string' },
+          width: 400
+        },
+        {
+          type: 'datetime',
+          name: 'orderCreatedAt',
+          header: i18next.t('field.order_created_date'),
+          sortable: false,
+          imex: { header: i18next.t('field.order_created_date'), key: 'orderCreatedAt', width: 30, type: 'string' },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'originalPrice',
+          header: i18next.t('field.original_price'),
+          sortable: false,
+          imex: {
+            header: i18next.t('field.original_price'),
+            key: 'originalPrice',
+            width: 30,
+            type: 'float'
+          },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'shippingFee',
+          header: i18next.t('field.shipping_fee'),
+          sortable: false,
+          imex: { header: i18next.t('field.shipping_fee'), key: 'shippingFee', width: 30, type: 'float' },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'actualShippingFee',
+          header: i18next.t('field.actual_shipping_fee'),
+          sortable: false,
+          imex: {
+            header: i18next.t('field.actual_shipping_fee'),
+            key: 'actualShippingFee',
+            width: 30,
+            type: 'float'
+          },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'paymentFee',
+          header: i18next.t('field.payment_fee'),
+          sortable: false,
+          imex: { header: i18next.t('field.payment_fee'), key: 'paymentFee', width: 30, type: 'float' },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'marketplaceShippingFeeVoucher',
+          header: i18next.t('field.shipping_fee_voucher'),
+          sortable: false,
+          imex: {
+            header: i18next.t('field.shipping_fee_voucher'),
+            key: 'marketplaceShippingFeeVoucher',
+            width: 30,
+            type: 'float'
+          },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'sellerShippingFeeVoucher',
+          header: i18next.t('field.seller_shipping_fee_voucher'),
+          sortable: false,
+          imex: {
+            header: i18next.t('field.seller_shipping_fee_voucher'),
+            key: 'sellerShippingFeeVoucher',
+            width: 30,
+            type: 'float'
+          },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'paidPrice',
+          header: i18next.t('field.paid_price'),
+          sortable: false,
+          imex: { header: i18next.t('field.paid_price'), key: 'paidPrice', width: 30, type: 'float' },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'totalAmount',
+          header: i18next.t('field.total_amount'),
+          sortable: false,
+          imex: { header: i18next.t('field.total_amount'), key: 'totalAmount', width: 30, type: 'float' },
+          width: 200
+        }
+      ]
+    }
+  }
+
+  async fetchHandler({ page, limit, sorters = [{ name: 'marketplaceStore' }, { name: 'orderNo' }] }) {
+    let filters = [...this._searchForm.queryFilters, { name: 'platform', operator: 'eq', value: 'lazada' }]
+
+    const pagination = { page, limit }
+    const sortings = sorters
+
+    const response = await client.query({
+      query: gql`
+        query marketplaceSalesReports($filters: [Filter], $pagination: Pagination, $sortings: [Sorting]) {
+          marketplaceSalesReports(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              orderNo
+              orderCreatedAt
+              buyerUsername
+              payTime
+              totalAmount
+              refundAmount
+              shippingProvider
+              storeName
+              storeDescription
+              promotionId
+              originalPrice
+              paidPrice
+              sku
+              variationSku
+              productName
+              productSku
+              productDiscount
+              paymentFee
+              shippingFee
+              actualShippingFee
+              marketplaceShippingFeeVoucher
+              sellerShippingFeeVoucher
+            }
+            total
+          }
+        }
+      `,
+      variables: { filters, pagination, sortings }
+    })
+
+    if (!response.errors) {
+      return {
+        total: response.data.marketplaceSalesReports.total,
+        records: response.data.marketplaceSalesReports.items.map(item => {
+          return {
+            ...item,
+            marketplaceOrderItem: `${item.variationSku} ${item.sku ? `(${item.sku})` : ''}`,
+            marketplaceStore: `${item.storeName} ${item.storeDescription ? `(${item.storeDescription})` : ''}`,
+            originalPrice: this._getRoundedValue(item.originalPrice),
+            shippingFee: this._getRoundedValue(item.shippingFee),
+            actualShippingFee: this._getRoundedValue(item.actualShippingFee),
+            paymentFee: this._getRoundedValue(item.paymentFee),
+            marketplaceShippingFeeVoucher: this._getRoundedValue(item.marketplaceShippingFeeVoucher),
+            sellerShippingFeeVoucher: this._getRoundedValue(item.sellerShippingFeeVoucher),
+            paidPrice: this._getRoundedValue(item.paidPrice),
+            totalAmount: this._getRoundedValue(item.totalAmount)
+          }
+        })
+      }
+    }
+  }
+
+  stateChanged(state) {
+    if (state.mms && state.mms.stores && state.mms.stores.length) {
+      const _lazadaStores = state.mms.stores.filter(store => store.platform.toLowerCase() == 'lazada')
+      this._updateSearchFields(_lazadaStores)
+      this._dataGrist?.fetch()
+    }
+  }
+
+  _updateSearchFields(stores) {
+    if (!this._searchFields?.length) return
+
+    this._searchFields = this._searchFields.map(searchField => {
+      if (searchField.name === 'marketplaceStoreId') {
+        searchField.options = [
+          { value: '' },
+          ...stores.map(store => {
+            return {
+              name: `${store.name} ${store.description ? `(${store.description})` : ''}`,
+              value: store.id
+            }
+          })
+        ]
+      }
+
+      return searchField
+    })
+  }
+
+  _exportableData() {
+    const headerSetting = this._config.columns
+      .filter(column => column.type !== 'gutter' && column.imex !== undefined)
+      .map(column => {
+        return column.imex
+      })
+
+    const data = this._dataGrist.data.records.map(item => {
+      return {
+        ...this._config.columns
+          .filter(column => column.type !== 'gutter' && column.imex !== undefined)
+          .reduce((record, column) => {
+            record[column.imex.key] = column.imex.key
+              .split('.')
+              .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
+
+            if (column.type === 'datetime' && record[column.imex.key]) {
+              record[column.imex.key] = new Date(Number(record[column.imex.key])).toLocaleString()
+            }
+            return record
+          }, {})
+      }
+    })
+
+    return { header: headerSetting, data: data }
+  }
+
+  _modifyDateRange(e) {
+    const fromDate = e.currentTarget.value
+
+    if (this._toDateInput.value < fromDate) this._toDateInput.value = fromDate
+
+    let min = new Date(fromDate)
+    let today = new Date()
+    today.setHours(0, 0, 0, 0)
+
+    min = min.toISOString().split('T')[0]
+
+    this._toDateInput.min = min
+  }
+
+  _getRoundedValue(value = 0) {
+    return Math.round((value + Number.EPSILON) * 100) / 100
+  }
+}
+
+customElements.define('lazada-sales-report', LazadaSalesReport)