@things-factory/operato-mms 4.0.8 → 4.0.12

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

@@ -0,0 +1,504 @@
+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: '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: 'fulfillmentCenter',
+          header: i18next.t('field.fulfillment_partner'),
+          sortable: false,
+          imex: { header: i18next.t('field.fulfillment_partner'), key: 'fulfillmentCenter', width: 50, type: 'string' },
+          width: 200
+        },
+        {
+          type: 'string',
+          name: 'status',
+          header: i18next.t('field.status'),
+          sortable: false,
+          imex: { header: i18next.t('field.status'), key: 'status', width: 50, type: 'string' },
+          width: 200
+        },
+        {
+          type: 'string',
+          name: 'sku',
+          header: i18next.t('field.warehouse_sku'),
+          sortable: false,
+          imex: { header: i18next.t('field.warehouse_sku'), key: 'sku', width: 50, type: 'string' },
+          width: 200
+        },
+        {
+          type: 'string',
+          name: 'variationId',
+          header: i18next.t('field.variation_id'),
+          sortable: false,
+          imex: { header: i18next.t('field.variation_id'), key: 'variationId', 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: 'float',
+          name: 'itemCommissionFee',
+          header: i18next.t('field.commission_fee'),
+          sortable: false,
+          imex: { header: i18next.t('field.commission_fee'), key: 'itemCommissionFee', width: 30, type: 'float' },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'marketplaceBonusSeller',
+          header: i18next.t('field.lazada_bonus'),
+          sortable: false,
+          imex: { header: i18next.t('field.lazada_bonus'), key: 'marketplaceBonusSeller', width: 30, type: 'float' },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'marketplaceBonus',
+          header: i18next.t('field.lazada_bonus_lzd_cofund'),
+          sortable: false,
+          imex: { header: i18next.t('field.lazada_bonus_lzd_cofund'), key: 'marketplaceBonus', 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: 'ordersMarketplaceFeesTotal',
+          header: i18next.t('field.orders_lazada_fees_total'),
+          sortable: false,
+          imex: { header: i18next.t('field.orders_lazada_fees_total'), key: 'ordersMarketplaceFeesTotal', width: 30, type: 'float' },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'originalShippingFee',
+          header: i18next.t('field.shipping_fee'),
+          sortable: false,
+          imex: { header: i18next.t('field.shipping_fee'), key: 'originalShippingFee', width: 30, type: 'float' },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'shippingFeePaidByCustomer',
+          header: i18next.t('field.shipping_fee_paid_by_customer'),
+          sortable: false,
+          imex: { header: i18next.t('field.shipping_fee_paid_by_customer'), key: 'shippingFeePaidByCustomer', width: 30, type: 'float' },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'shippingFeeDiscountMarketplace',
+          header: i18next.t('field.shipping_fee_voucher_by_lazada'),
+          sortable: false,
+          imex: { header: i18next.t('field.shipping_fee_voucher_by_lazada'), key: 'shippingFeeDiscountMarketplace', width: 30, type: 'float' },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'shippingFeeDiscountSeller',
+          header: i18next.t('field.shipping_fee_voucher_by_seller'),
+          sortable: false,
+          imex: { header: i18next.t('field.shipping_fee_voucher_by_seller'), key: 'shippingFeeDiscountSeller', width: 30, type: 'float' },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'autoShippingSubsidyMarketplace',
+          header: i18next.t('field.auto_shipping_fee_subsidy_by_lazada'),
+          sortable: false,
+          imex: { header: i18next.t('field.auto_shipping_fee_subsidy_by_lazada'), key: 'autoShippingSubsidyMarketplace', width: 30, type: 'float' },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'ordersLogisticsTotal',
+          header: i18next.t('field.orders_logistics_total'),
+          sortable: false,
+          imex: { header: i18next.t('field.orders_logistics_total'), key: 'ordersLogisticsTotal', width: 30, type: 'float' },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'promotionalChargesFlexiCombo',
+          header: i18next.t('field.promotional_charges_flexi_combo'),
+          sortable: false,
+          imex: { header: i18next.t('field.promotional_charges_flexi_combo'), key: 'promotionalChargesFlexiCombo', width: 30, type: 'float' },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'promotionalCharges',
+          header: i18next.t('field.promotional_charges_vouchers'),
+          sortable: false,
+          imex: { header: i18next.t('field.promotional_charges_vouchers'), key: 'promotionalCharges', width: 30, type: 'float' },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'ordersMarketingFeesTotal',
+          header: i18next.t('field.orders_marketing_fees_total'),
+          sortable: false,
+          imex: { header: i18next.t('field.orders_marketing_fees_total'), key: 'ordersMarketingFeesTotal', width: 30, type: 'float' },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'itemPriceCredit',
+          header: i18next.t('field.item_price_credit'),
+          sortable: false,
+          imex: { header: i18next.t('field.item_price_credit'), key: 'itemPriceCredit', width: 30, type: 'float' },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'ordersSalesTotal',
+          header: i18next.t('field.orders_sales_total'),
+          sortable: false,
+          imex: { header: i18next.t('field.orders_sales_total'), key: 'ordersSalesTotal', width: 30, type: 'float' },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'taxAmount',
+          header: i18next.t('field.tax_amount'),
+          sortable: false,
+          imex: { header: i18next.t('field.tax_amount'), key: 'taxAmount', width: 30, type: 'float' },
+          width: 200
+        },
+        {
+          type: 'float',
+          name: 'grandTotal',
+          header: i18next.t('field.grand_total'),
+          sortable: false,
+          imex: { header: i18next.t('field.grand_total'), key: 'grandTotal', 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
+              refundAmount
+              shippingProvider
+              storeName
+              storeDescription
+              promotionId
+              sku
+              variationSku
+              productName
+              productSku
+              productDiscount
+              paymentFee
+              itemCommissionFee
+              shippingFeePaidByCustomer
+              promotionalCharges
+              ordersMarketplaceFeesTotal
+              ordersMarketingFeesTotal
+              ordersSalesTotal
+              ordersLogisticsTotal
+              itemPriceCredit
+              marketplaceBonus
+              marketplaceBonusSeller
+              shippingFeeDiscountMarketplace
+              shippingFeeDiscountSeller
+              promotionalChargesFlexiCombo
+              autoShippingSubsidyMarketplace
+              grandTotal
+              originalShippingFee
+              taxAmount
+              status
+              qty
+              fulfillmentCenter
+              variationId
+              variationName
+            }
+            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.variationName ? `(${item.variationName})` : ''}`,
+            marketplaceStore: `${item.storeName} ${item.storeDescription ? `(${item.storeDescription})` : ''}`,
+            paymentFee: this._getRoundedValue(item.paymentFee),
+            itemCommissionFee: this._getRoundedValue(item.itemCommissionFee),
+            shippingFeePaidByCustomer: this._getRoundedValue(item.shippingFeePaidByCustomer),
+            promotionalCharges: this._getRoundedValue(item.promotionalCharges),
+            ordersMarketplaceFeesTotal: this._getRoundedValue(item.ordersMarketplaceFeesTotal),
+            ordersMarketingFeesTotal: this._getRoundedValue(item.ordersMarketingFeesTotal),
+            ordersSalesTotal: this._getRoundedValue(item.ordersSalesTotal),
+            ordersLogisticsTotal: this._getRoundedValue(item.ordersLogisticsTotal),
+            itemPriceCredit: this._getRoundedValue(item.itemPriceCredit),
+            marketplaceBonus: this._getRoundedValue(item.marketplaceBonus),
+            marketplaceBonusSeller: this._getRoundedValue(item.marketplaceBonusSeller),
+            shippingFeeDiscountMarketplace: this._getRoundedValue(item.shippingFeeDiscountMarketplace),
+            shippingFeeDiscountSeller: this._getRoundedValue(item.shippingFeeDiscountSeller),
+            promotionalChargesFlexiCombo: this._getRoundedValue(item.promotionalChargesFlexiCombo),
+            autoShippingSubsidyMarketplace: this._getRoundedValue(item.autoShippingSubsidyMarketplace),
+            grandTotal: this._getRoundedValue(item.grandTotal),
+            originalShippingFee: this._getRoundedValue(item.originalShippingFee),
+            taxAmount: this._getRoundedValue(item.taxAmount)
+          }
+        })
+      }
+    }
+  }
+
+  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)