Announcing Vendure v1.4

Video sections: Custom field controls (19s), Tabbed custom fields (2m 33s), Improved UI customization (3m 41s), Locale support (5m 00s)

v1.4.0 Changelog

Upgrading from v1.x.x

This minor release contains no breaking schema or GraphQL API changes, so updating should be a matter of changing all @vendure/... dependencies in your package.json file to 1.4.0.

{
  "dependencies": {
-    "@vendure/admin-ui-plugin": "1.3.4",
-    "@vendure/asset-server-plugin": "1.3.4",
-    "@vendure/core": "1.3.4",
-    ... etc
+    "@vendure/admin-ui-plugin": "1.4.0",
+    "@vendure/asset-server-plugin": "1.4.0",
+    "@vendure/core": "1.4.0",
+    ... etc
  },
  "devDependencies": {
-    "@vendure/testing": "1.3.4", 
+    "@vendure/testing": "1.4.0",
  }
}

Also see the Updating Vendure guide for more information.

Admin UI customization

The Admin UI is the way we manage our stock, customers, orders and more. Since each e-commerce business has unique requirements, we've made great efforts to ensure that the Admin UI is just as flexible as the Vendure server itself. With this release, we've just kicked things up a notch. Let's take a look at some of the new features.

Custom field components

Custom fields allow you to extend any of the built-in Vendure models. The Admin UI is smart enough to know about these custom fields, and will display form inputs for each. However, sometimes you want more control of exactly how the data is displayed and manipulated. For example, a text field will render a <textarea> by default. But what if you want a rich text input instead?

This was possible before, but required creating a custom build of the Admin UI using the ui-devkit. Things just got a whole lot easier:

const config = {
  // ...
  customFields: {
    Product: [
      { 
        name: 'additionalInfo',
        type: 'text',
        ui: { component: 'rich-text-form-input' },
      },
      { 
        name: 'rrp',
        type: 'int',
        ui: { component: 'currency-form-input' },
      },
      { 
        name: 'weight',
        type: 'int',
        ui: { component: 'number-form-input', suffix: 'g' },
      },
    ],
  },
}

That's it! We're shipping with a bunch of useful form components, including a locale-aware currency input, a JSON editor, and components for selecting FacetValues and ProductVariants. If you need something else, you can still create your own completely custom inputs too (the API for this has changed, but the existing APIs still work).

Tabbed custom fields

With a large, complex project, it's common for lots of custom fields to be required. This can get visually noisy in the UI, so we now support tabbed custom fields. Just specify the tab name in the ui object, and those fields with the same tab name will be grouped in the UI! The tab name can also be a translation token if you need to support multiple languages.

const config = {
  // ...
  customFields: {
    Product: [
      { name: 'additionalInfo', type: 'text', ui: { component: 'rich-text-form-input' } },
      { name: 'specs', type: 'text', ui: { component: 'json-editor-form-input' } },
      { name: 'width', type: 'int', ui: { tab: 'Shipping' } },
      { name: 'height', type: 'int', ui: { tab: 'Shipping' } },
      { name: 'depth', type: 'int', ui: { tab: 'Shipping' } },
      { name: 'weight', type: 'int', ui: { tab: 'Shipping' } },
    ],
  },
}

Custom detail components

What if you want to add your own custom components to a page that is unrelated to a custom field? For example, maybe you want to embed some related data from an external service. This is now possible with the new Custom Detail Components API.

When you are running the Admin UI in development mode, you can now press ctrl/cmd + u to see all the locations in the UI that can be extended.

Locale support

You can now set the locale for the Admin UI, which means that currencies, dates and numbers will be formatted correctly for your region. For example, the default locale for English would use the US style of date formatting, mm/dd/yyyy. If you live outside the USA, this format can be confusing. Now you can set your locale to be e.g. GB (for the United Kingdom) and dates will be formatted as dd/mm/yyyy. The locale can be set from the new, improved language dialog in the Admin UI (accessed via the user menu in the top right), or can be set as a default in your AdminUiPlugin config:

AdminUiPlugin.init({
  route: 'admin',
  port: 5001,
  adminUiConfig: {
    defaultLocale: 'GB',
  },
}),

Admin UI API docs

The APIs used to customize the Admin UI are now included in our documentation. This documentation is generated from the TypeScript sources and will thus always be up-to-date and accurate. Check out the new Admin UI API Docs.

Payments plugin

One of our most-requested features has been official integrations for popular payment providers. Up until now, developers have had to implement payment integrations themselves from scratch. While our payment APIs have been made as simple and flexible as possible, this still represents extra work needed before your shop is ready to go live.

With v1.4 we've introduced a brand new package, @vendure/payments-plugin. This package houses all of our official payment integrations. We are releasing integrations for Mollie and Braintree initially, with plans to add Stripe and Paypal integrations in an upcoming release.

Expanded custom field support

Custom fields can now be defined on the Country, CustomerGroup, PaymentMethod, Promotion and TaxCategory entities. With this change, all major entities in Vendure now support custom fields, ensuring that all of your custom requirements can be accommodated.

Other Notable Changes

The list of event types has been greatly expanded, allowing you to subscribe and react to many more situations.
When an Order is in the "ArrangingPayment" state, manual payments may now be added via the Admin UI.
The Admin UI now supports filtering on Facet and Collection list views.
PaginatedList queries can now filter on ID fields
The csv import format now supports importing in multiple languages.
TypeORM has been updated to the latest verion (0.2.41)
The ElasticsearchPlugin now supports a custom sort parameter mapping
The ElasticsearchPlugin now allows custom mappings to be hidden from the Shop API with the new public property.
UI extensions built in other frameworks can now use the new getActivatedRoute function to get information about the active route in the host application.
The website now includes a curated list of community plugins.

Thank you to our contributors

I'd like to thank the wonderful Vendure community who contribute their ideas, bug reports, and code to the project daily.

Kevin Mattutat:
- feat(elasticsearch-plugin): Add option to hide indexed fields in api (#1181) (#1212)
- feat(core): Expand the range of events published by the EventBus (#1222)
- feat(elasticsearch-plugin): Add custom sort parameter mapping (#1230)
Filip Prochazka:
- fix(core): Fix error in validating custom fields with introspection fields in query
Harun Kilic:
- fix(core): Fix stream not being instance of ReadStream (#1238)
- fix(core): Fix batch size error on postgres when reindexing (#1242)
Heiko Rothkranz:
- feat(core): Support CSV import in multiple languages (#1199)
Huseyin ALP:
- fix(core): Fix shipping price when the promotion is not applicable anymore (#1150)
Martijn van de Brug:
- feat(payment-plugin): Mollie payment integration
Milan Zivkovic:
- docs(core): Add example of payment method and roles definition (#1203)
Steffen Wilking:
- feat(admin-ui): Export all catalog components (#1248)
- fix(admin-ui): Fix error if no array of assets is provided (#1249)
Vinicius Rosa:
- docs(core): Fix GraphQL operation type for eligibleShippingMethods in Shop API guide (#1218)
- fix(core): Fix ProductService.assignProductsToChannel to properly assign assets to channel (#1235)
- fix(core): Add Permission.ReadProduct to Allow decorator of TaxRateResolver.taxRates (#1258)
- fix(admin-ui): Fix tax rate permissions so product variants do not need access to customer groups (#1274)
- fix(core): Add Permission.ReadProduct to Allow decorator of TaxCategoryResolver.taxCategories (#1275)
- fix(docs): Fix typos in README and collection-filter link comment (#1276)
nemo-js:
- fix(core): Fix argsArrayToHash, case where arg not present in this.args (#1224)