@things-factory/operato-mms 3.7.6 → 3.7.10

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

@@ -0,0 +1,383 @@
+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, localize } 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 ShopeeSalesReport extends connect(store)(localize(i18next)(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.shopee_sales_report'),
+      exportable: {
+        name: i18next.t('title.shopee_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: 'integer',
+          name: 'qty',
+          header: i18next.t('field.qty'),
+          sortable: false,
+          imex: { header: i18next.t('field.qty'), key: 'qty', width: 20, type: 'integer' },
+          width: 150
+        },
+        {
+          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: 'string',
+          name: 'buyerUsername',
+          header: i18next.t('field.buyer_username'),
+          sortable: false,
+          imex: { header: i18next.t('field.buyer_username'), key: 'buyerUsername', width: 30, type: 'string' },
+          width: 200
+        },
+        {
+          type: 'datetime',
+          name: 'payTime',
+          header: i18next.t('field.pay_time'),
+          sortable: false,
+          imex: { header: i18next.t('field.pay_time'), key: 'payTime', width: 20, type: 'string' },
+          width: 150
+        },
+        {
+          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: 'string',
+          name: 'promotionId',
+          header: i18next.t('field.promotion_id'),
+          sortable: false,
+          imex: { header: i18next.t('field.promotion_id'), key: 'promotionId', width: 30, type: 'string' },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'refundAmount',
+          header: i18next.t('field.refund_amount'),
+          sortable: false,
+          imex: { header: i18next.t('field.refund_amount'), key: 'refundAmount', width: 30, type: 'float' },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'productDiscount',
+          header: i18next.t('field.product_discount'),
+          sortable: false,
+          imex: { header: i18next.t('field.product_discount'), key: 'productDiscount', 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: 'string',
+          name: 'shippingProvider',
+          header: i18next.t('field.shipping_provider'),
+          sortable: false,
+          imex: { header: i18next.t('field.shipping_provider'), key: 'shippingProvider', width: 30, type: 'string' },
+          width: 200
+        }
+      ]
+    }
+  }
+
+  async fetchHandler({ page, limit, sorters = [{ name: 'marketplaceStore' }, { name: 'orderNo' }] }) {
+    let filters = [...this._searchForm.queryFilters, { name: 'platform', operator: 'eq', value: 'shopee' }]
+
+    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
+              qty
+              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})` : ''}`,
+            refundAmount: this._getRoundedValue(item.refundAmount),
+            originalPrice: this._getRoundedValue(item.originalPrice),
+            productDiscount: this._getRoundedValue(item.productDiscount),
+            shippingFee: this._getRoundedValue(item.shippingFee),
+            actualShippingFee: this._getRoundedValue(item.actualShippingFee)
+          }
+        })
+      }
+    }
+  }
+
+  stateChanged(state) {
+    if (state.mms && state.mms.stores && state.mms.stores.length) {
+      const _shopeeStores = state.mms.stores.filter(store => store.platform.toLowerCase() == 'shopee')
+      this._updateSearchFields(_shopeeStores)
+      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('shopee-sales-report', ShopeeSalesReport)

package/client/route.js

@@ -93,5 +93,18 @@ export default function route(page) {
     case 'mms-report-custom':
       import('./pages/reports/custom')
       return page
+
+    // title to be revised
+    case 'mms-report-sales-by-platform-home':
+      import('./pages/reports/sales-by-platform/home')
+      return page
+
+    case 'lazada-sales-report':
+      import('./pages/reports/sales-by-platform/lazada-sales-report')
+      return page
+
+    case 'shopee-sales-report':
+      import('./pages/reports/sales-by-platform/shopee-sales-report')
+      return page
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/operato-mms",
-  "version": "3.7.6",
+  "version": "3.7.10",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -44,7 +44,7 @@
     "@operato/ghost-print": "0.1.14",
     "@things-factory/apptool-ui": "^3.7.5",
     "@things-factory/attachment-base": "^3.7.5",
-    "@things-factory/auth-ui": "^3.7.5",
+    "@things-factory/auth-ui": "^3.7.7",
     "@things-factory/biz-base": "^3.7.5",
     "@things-factory/board-service": "^3.7.5",
     "@things-factory/board-ui": "^3.7.5",
@@ -58,16 +58,16 @@
     "@things-factory/grist-ui": "^3.7.5",
     "@things-factory/help": "^3.7.5",
     "@things-factory/i18n-ui": "^3.7.5",
-    "@things-factory/integration-fulfillment": "^3.7.5",
-    "@things-factory/integration-lmd": "^3.7.5",
+    "@things-factory/integration-fulfillment": "^3.7.7",
+    "@things-factory/integration-lmd": "^3.7.7",
     "@things-factory/lite-menu": "^3.7.5",
-    "@things-factory/marketplace-base": "^3.7.6",
+    "@things-factory/marketplace-base": "^3.7.10",
     "@things-factory/more-ui": "^3.7.5",
     "@things-factory/notification": "^3.7.5",
     "@things-factory/oauth2-client": "^3.7.5",
     "@things-factory/pdf": "^3.7.5",
-    "@things-factory/product-base": "^3.7.5",
-    "@things-factory/resource-ui": "^3.7.5",
+    "@things-factory/product-base": "^3.7.8",
+    "@things-factory/resource-ui": "^3.7.7",
     "@things-factory/scene-chartjs": "^3.7.5",
     "@things-factory/scene-clock": "^3.7.5",
     "@things-factory/scene-clone": "^3.7.5",
@@ -83,7 +83,7 @@
     "@things-factory/scene-half-roundrect": "^3.7.5",
     "@things-factory/scene-indoor-map": "^3.7.5",
     "@things-factory/scene-integration": "^3.7.5",
-    "@things-factory/scene-label": "^3.7.6",
+    "@things-factory/scene-label": "^3.7.7",
     "@things-factory/scene-legend": "^3.7.5",
     "@things-factory/scene-marker": "^3.7.5",
     "@things-factory/scene-mqtt": "^3.7.5",
@@ -99,11 +99,11 @@
     "@things-factory/scene-wheel-sorter": "^3.7.5",
     "@things-factory/setting-ui": "^3.7.5",
     "@things-factory/system-ui": "^3.7.5",
-    "@things-factory/warehouse-base": "^3.7.6"
+    "@things-factory/warehouse-base": "^3.7.10"
   },
   "devDependencies": {
     "@things-factory/builder": "^3.7.5",
     "@types/node-fetch": "^2.5.7"
   },
-  "gitHead": "d9d72c07fc3b01af2ede46808ec0aced3241ed51"
+  "gitHead": "dc4aa344ee524651b4e633c3647c85c8daad8eb6"
 }

package/things-factory.config.js

@@ -1,5 +1,5 @@
-import route from './client/route'
 import bootstrap from './client/bootstrap'
+import route from './client/route'
 
 export default {
   route,
@@ -95,6 +95,18 @@ export default {
     {
       tagname: 'mms-report-custom',
       page: 'mms-report-custom'
+    },
+    {
+      tagname: 'mms-report-sales-by-platform-home',
+      page: 'mms-report-sales-by-platform-home'
+    },
+    {
+      tagname: 'lazada-sales-report',
+      page: 'lazada-sales-report'
+    },
+    {
+      tagname: 'shopee-sales-report',
+      page: 'shopee-sales-report'
     }
   ],
   bootstrap