Javascript overwrite or injection

You can overwrite or inject Javascript code for each module on demand

There are four global keys for each module:

• overwrite: {boolean} default false
• callback: {function} default noop
• beforeMount: {function} default noop
• mounted: {function} default noop

Note:

• if overwrite == true that you can use the callback to overwrite all BundleB2B related codes of the current module.
• callback will load disregards the value of overwrite and runs after BundleB2B related codes.
• beforeMount will load before the page rendering.
• mounted will load after the page is rendered.

window.b3themeConfig.useJavaScript = {
  tpa: {
    overwrite: false,
    callback() {},
    beforeMount() {},
    mounted() {},
  },
  login: {},
  dashboard: {},
  quotelist: {},
  quickorderpad: {},
  usermanagement: {},
  buyagain: {},
  shoppinglists: {},
  shoppinglist: {},
  createquote: {},
  addressbook: {},
  quotedetail: {},
  orders: {},
  orderdetail: {},
  accountsetting: {},
  b2bpdp: {},
  quotes: {},
  invoices: {},
  invoicespayment: {},
  invoicereceipt: {},
  invoicedetail: {},
  rfqquote: {},
  rfq: {},
}

There are some specific properties that you can use to configure the module.

tpa

• To define the custom form fields or change the extra fields' display, you can do this:

beforeMount: instance => {
  instance.setState({
    extraFields: [
      {
        label: 'Enter your license',
        name: 'input_text',
        partial: 'multiline',
        required: false,
        validation:
          '{"type":"singleline","label":"Enter your license","required":false,"value":"","rows":3}',
        value: 'Enter your license',
        visible: true,
        disabled: true,
      },
      {
        label: 'Test Customer Extra Fields',
        name: 'extra_1',
        partial: 'text',
        required: true,
        validation: val => val === '123',
        errorMessage: '输入不对',
      },
    ],
    customFields: [
      {
        name: 'per',
        label: 'choose person',
        partial: 'select',
        chooseprefix: 'please select',
        options: [
          { label: 'banny', value: 'banny', selected: true },
          { label: 'leo', value: 'leo' },
        ],
        required: true,
        requiredError: 'Please choose a person',
        validation(val) {
          if (val === 'leo') return false
          return true
        },
        errorMessage: 'choose error',
      },
      {
        name: 'test_check',
        label: 'checkbox test',
        partial: 'checkbox',
        checkboxes: [
          { name: 'man', label: 'man' },
          { name: 'woman', label: 'woman' },
        ],
      },
      {
        render() {
          return `
              <div>
                  <h3>Test Title</h3>
                  <img style="width: 50vw" src="https://cdn.pixabay.com/photo/2020/02/14/10/40/bird-4848178_960_720.jpg" />
                  <div class="form-field">
                      <label class="form-label">
                          Test Render
                          <small>REQUIRED</small>
                      </label>
                      <input class="form-input" type="text" id="render-test" placeholder="test render" />
                  </div>
              </div>
          `
        },
        selector: '#render-test',
        validation(val) {
          return !isNaN(Number(val))
        },
        required: true,
        requiredError: 'render-test cant not be blank',
        errorMessage: 'render-test input error',
      },
    ],
  })
}

explain:

• extraFields is come from the sessionStorage 'B3ExtraFields', and it will commit to the company register API. You can reset it but you can't ignore the required field of default extraFields.
• customFields is your own custom field. It wont' be commit to the company register API. But you can do some thing before the submit by use beforeSubmit.

beforeSubmit(instance) {
    console.log(instance) //instance of module 'tpa'
    return Promise.reject()  // return a rejected object to prevent the submitting
},