@duffel/components 3.0.7-canary → 3.1.2

package/README.md

@@ -15,7 +15,8 @@ npm i @duffel/components
 ### (alternative) Load from CDN:
 
 ```html
-<script src="https://assets.duffel.com/components/3.0.5-canary/index.js"></script>
+<script src="https://assets.duffel.com/components/VERSION/duffel-ancillaries.js"></script>
+<script src="https://assets.duffel.com/components/VERSION/duffel-payments.js"></script>
 ```
 
 ## How do I integrate this into my website?
@@ -24,7 +25,7 @@ npm i @duffel/components
 
 ## Integration examples
 
-1. **client-side** | This example loads a local version of the components using a `script` tag. It uses a fixture for the
+1. **client-side** | This example loads a local version of the components using a `script` tag. It uses a fixture for the offer and seat maps.
 
    - [Find it on src/examples/client-side](src/examples/client-side)
 
@@ -37,8 +38,17 @@ npm i @duffel/components
    - [Find it on src/examples/just-typescript](src/examples/just-typescript)
 
 4. **react-app** | This example imports a local version of `@duffel/components` and renders the a react element with an offer fixture.
+
    - [Find it on src/examples/react-app](src/examples/react-app)
 
+5. **payments-custom-element** | This example demonstrates the use of the payments component loaded through a script tag
+
+- [Find it on src/examples/payments-custom-element](src/examples/payments-custom-element)
+
+6. **payments-just-typescript** | This example imports a local version of `@duffel/components` and renders the payments custom element with a fixture of the payment intent.
+
+   - [Find it on src/examples/payments-just-typescript](src/examples/payments-just-typescript)
+
 ## What components are available?
 
 ### Ancillaries component
@@ -47,4 +57,8 @@ The ancillaries component allows your customers to add ancillaries to their orde
 
 - [Find live demo on codesandbox.io&nbsp;&nbsp;↗](https://codesandbox.io/s/duffel-ancillaries-example-1nxuu7)
 
+### Payments component
+
+The payments component provides a [PCI-compliant](https://help.duffel.com/hc/en-gb/articles/4409049543058) way for you to collect card payments for online bookings from your customers. To learn more about how to work with Duffel payments please visit the [Collecting customer card payments guide](https://duffel.com/docs/guides/collecting-customer-card-payments).
+
 #### more coming soon...

package/config/esbuild.base.config.js

@@ -1,8 +1,12 @@
 module.exports = {
   entryPoints: [
     {
-      out: "index",
-      in: "src/components/DuffelAncillariesCustomElement.tsx",
+      out: "duffel-ancillaries",
+      in: "src/components/DuffelAncillaries/DuffelAncillariesCustomElement.tsx",
+    },
+    {
+      out: "duffel-payments",
+      in: "src/components/DuffelPayments/DuffelPaymentsCustomElement.tsx",
     },
     { out: "global", in: "src/styles/global.css" },
   ],

package/config/esbuild.cdn.config.js

@@ -6,6 +6,7 @@ const esbuildCopyStaticFiles = require("esbuild-copy-static-files");
 
 dotenv.config({ path: ".env.build" });
 if (process.env.SENTRY_AUTH_TOKEN === undefined) {
+  // eslint-disable-next-line
   console.error(
     "'process.env.SENTRY_AUTH_TOKEN' is required but missing." +
       "Make sure it's included in your .env.build file."
@@ -37,7 +38,7 @@ esbuild
         include: "./cdn-dist",
         authToken: process.env.SENTRY_AUTH_TOKEN,
         logLevel: "info",
-        release: `cdn-${VERSION}`,
+        release: VERSION,
       }),
       esbuildCopyStaticFiles({
         src: "src/fixtures",

package/config/esbuild.dev.config.js

@@ -39,7 +39,8 @@ const COMPONENT_CDN = process.env.COMPONENT_CDN.startsWith("http://localhost:")
     servedir: "cdn-dist",
     port: 8000,
   });
+  await esbuildContext.watch();
 
+  // eslint-disable-next-line
   console.log(`\n🐄 Serving component on http://${host}:${port}`);
-  await esbuildContext.watch();
 })();

package/config/esbuild.react.config.js

@@ -35,7 +35,7 @@ esbuild
         include: `./react-dist`,
         authToken: process.env.SENTRY_AUTH_TOKEN,
         logLevel: "info",
-        release: `react-${VERSION}`,
+        release: VERSION,
       }),
     ],
   })