@duffel/components 3.0.0-canary → 3.0.0

package/.eslintrc.js

@@ -9,7 +9,12 @@ module.exports = {
     node: true,
     jest: true,
   },
-  ignorePatterns: ["**/dist/**", "react-dist/**", "__generated__**"],
+  ignorePatterns: [
+    "**/dist/**",
+    "**/cdn-dist/**",
+    "**/react-dist/**",
+    "__generated__**",
+  ],
   parser: "@typescript-eslint/parser",
   extends: [
     "eslint:recommended",
@@ -30,5 +35,13 @@ module.exports = {
     "react/react-in-jsx-scope": 0,
     "react/prop-types": 0,
     "react-hooks/exhaustive-deps": 0,
+    "no-restricted-syntax": [
+      "error",
+      {
+        selector: "CallExpression[callee.object.name='console']",
+        message:
+          "Prefer 'log' or 'logGroup' from 'src/lib/logging.ts' instead of 'console'.",
+      },
+    ],
   },
 };

package/.github/workflows/release.yml

@@ -45,6 +45,9 @@ jobs:
           GIT_AUTHOR_EMAIL: duffel-bot-read-write@duffel.com
           GIT_COMMITTER_NAME: duffel-bot
           GIT_COMMITTER_EMAIL: duffel-bot-read-write@duffel.com
+          DUFFEL_API_URL: https://api.duffel.com
+          COMPONENT_CDN: https://assets.duffel.com/components
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
         run: yarn release
 
       - name: Get version from package.json after release step
@@ -62,7 +65,7 @@ jobs:
         if: steps.initversion.outputs.version != steps.extractver.outputs.extractver
         uses: peter-evans/create-pull-request@v3.10.0
         with:
-          token: ${{ secrets.PAT }}
+          token: ${{ secrets.PAT }} # You can fin this on https://duffel.1password.com/vaults/all/allitems/m3heg3y3ijclli4tmmp4bsyxna
           commit-message: "chore(release): ${{ steps.extractver.outputs.extractver }}"
           committer: duffel-bot <duffel-bot-read-write@duffel.com>
           author: duffel-bot <duffel-bot-read-write@duffel.com>

package/.storybook/__snapshots__/Storyshots.test.js.snap

@@ -360,6 +360,11 @@ exports[`Storyshots DuffelAncillaries All Services 1`] = `
     </button>
     <div
       className="modal"
+      style={
+        {
+          "opacity": 0,
+        }
+      }
     >
       <div
         className="modal--content"
@@ -735,6 +740,11 @@ exports[`Storyshots DuffelAncillaries All Services 1`] = `
     </button>
     <div
       className="modal"
+      style={
+        {
+          "opacity": 0,
+        }
+      }
     >
       <div
         className="modal--content"
@@ -6718,6 +6728,11 @@ exports[`Storyshots DuffelAncillaries All Services 1`] = `
     </button>
     <div
       className="modal"
+      style={
+        {
+          "opacity": 0,
+        }
+      }
     >
       <div
         className="modal--content"
@@ -7046,6 +7061,11 @@ exports[`Storyshots DuffelAncillaries Expired Offer 1`] = `
     </button>
     <div
       className="modal"
+      style={
+        {
+          "opacity": 0,
+        }
+      }
     >
       <div
         className="modal--content"
@@ -7421,6 +7441,11 @@ exports[`Storyshots DuffelAncillaries Expired Offer 1`] = `
     </button>
     <div
       className="modal"
+      style={
+        {
+          "opacity": 0,
+        }
+      }
     >
       <div
         className="modal--content"
@@ -13404,6 +13429,11 @@ exports[`Storyshots DuffelAncillaries Expired Offer 1`] = `
     </button>
     <div
       className="modal"
+      style={
+        {
+          "opacity": 0,
+        }
+      }
     >
       <div
         className="modal--content"
@@ -13732,6 +13762,11 @@ exports[`Storyshots DuffelAncillaries Just Bags 1`] = `
     </button>
     <div
       className="modal"
+      style={
+        {
+          "opacity": 0,
+        }
+      }
     >
       <div
         className="modal--content"
@@ -14128,6 +14163,11 @@ exports[`Storyshots DuffelAncillaries Just CFAR 1`] = `
     </button>
     <div
       className="modal"
+      style={
+        {
+          "opacity": 0,
+        }
+      }
     >
       <div
         className="modal--content"
@@ -14456,6 +14496,11 @@ exports[`Storyshots DuffelAncillaries Just Seats 1`] = `
     </button>
     <div
       className="modal"
+      style={
+        {
+          "opacity": 0,
+        }
+      }
     >
       <div
         className="modal--content"
@@ -20460,6 +20505,11 @@ exports[`Storyshots DuffelAncillaries Markup 1`] = `
     </button>
     <div
       className="modal"
+      style={
+        {
+          "opacity": 0,
+        }
+      }
     >
       <div
         className="modal--content"
@@ -20835,6 +20885,11 @@ exports[`Storyshots DuffelAncillaries Markup 1`] = `
     </button>
     <div
       className="modal"
+      style={
+        {
+          "opacity": 0,
+        }
+      }
     >
       <div
         className="modal--content"
@@ -26818,6 +26873,11 @@ exports[`Storyshots DuffelAncillaries Markup 1`] = `
     </button>
     <div
       className="modal"
+      style={
+        {
+          "opacity": 0,
+        }
+      }
     >
       <div
         className="modal--content"
@@ -27146,6 +27206,11 @@ exports[`Storyshots DuffelAncillaries Markup Using Price Formatters 1`] = `
     </button>
     <div
       className="modal"
+      style={
+        {
+          "opacity": 0,
+        }
+      }
     >
       <div
         className="modal--content"
@@ -27521,6 +27586,11 @@ exports[`Storyshots DuffelAncillaries Markup Using Price Formatters 1`] = `
     </button>
     <div
       className="modal"
+      style={
+        {
+          "opacity": 0,
+        }
+      }
     >
       <div
         className="modal--content"
@@ -33504,6 +33574,11 @@ exports[`Storyshots DuffelAncillaries Markup Using Price Formatters 1`] = `
     </button>
     <div
       className="modal"
+      style={
+        {
+          "opacity": 0,
+        }
+      }
     >
       <div
         className="modal--content"
@@ -33832,6 +33907,11 @@ exports[`Storyshots DuffelAncillaries Markup Using Price Formatters With Custom
     </button>
     <div
       className="modal"
+      style={
+        {
+          "opacity": 0,
+        }
+      }
     >
       <div
         className="modal--content"
@@ -34207,6 +34287,11 @@ exports[`Storyshots DuffelAncillaries Markup Using Price Formatters With Custom
     </button>
     <div
       className="modal"
+      style={
+        {
+          "opacity": 0,
+        }
+      }
     >
       <div
         className="modal--content"
@@ -40190,6 +40275,11 @@ exports[`Storyshots DuffelAncillaries Markup Using Price Formatters With Custom
     </button>
     <div
       className="modal"
+      style={
+        {
+          "opacity": 0,
+        }
+      }
     >
       <div
         className="modal--content"
@@ -40521,6 +40611,11 @@ exports[`Storyshots DuffelAncillaries With Custom Styles 1`] = `
     </button>
     <div
       className="modal"
+      style={
+        {
+          "opacity": 0,
+        }
+      }
     >
       <div
         className="modal--content"
@@ -40896,6 +40991,11 @@ exports[`Storyshots DuffelAncillaries With Custom Styles 1`] = `
     </button>
     <div
       className="modal"
+      style={
+        {
+          "opacity": 0,
+        }
+      }
     >
       <div
         className="modal--content"
@@ -46879,6 +46979,11 @@ exports[`Storyshots DuffelAncillaries With Custom Styles 1`] = `
     </button>
     <div
       className="modal"
+      style={
+        {
+          "opacity": 0,
+        }
+      }
     >
       <div
         className="modal--content"
@@ -47070,6 +47175,86 @@ exports[`Storyshots DuffelAncillaries With Custom Styles 1`] = `
 ]
 `;
 
+exports[`Storyshots DuffelPayments Default 1`] = `
+[
+  <link
+    href="/global.css"
+    rel="stylesheet"
+  />,
+  <div
+    className="duffel-components"
+    style={{}}
+  >
+    <div
+      className="card-payment__container"
+    >
+      <form
+        onSubmit={[Function]}
+      >
+        <div
+          className="card-details"
+        />
+        <div
+          className="card-payment__container--invalid"
+          role="alert"
+        />
+        <button
+          aria-label="Pay"
+          className="button button--primary button--40 card-payment__pay-button"
+          disabled={true}
+          type="submit"
+        >
+          Pay
+        </button>
+      </form>
+    </div>
+  </div>,
+]
+`;
+
+exports[`Storyshots DuffelPayments With Custom Styles 1`] = `
+[
+  <link
+    href="/global.css"
+    rel="stylesheet"
+  />,
+  <div
+    className="duffel-components"
+    style={
+      {
+        "--ACCENT": "29, 78, 216",
+        "--BUTTON-RADIUS": "15px",
+        "--FONT-FAMILY": "monospace",
+      }
+    }
+  >
+    <div
+      className="card-payment__container"
+    >
+      <form
+        onSubmit={[Function]}
+      >
+        <div
+          className="card-details"
+        />
+        <div
+          className="card-payment__container--invalid"
+          role="alert"
+        />
+        <button
+          aria-label="Pay"
+          className="button button--primary button--40 card-payment__pay-button"
+          disabled={true}
+          type="submit"
+        >
+          Pay
+        </button>
+      </form>
+    </div>
+  </div>,
+]
+`;
+
 exports[`Storyshots Icon Full List 1`] = `
 <div
   style={

package/CONTRIBUTING.md

@@ -0,0 +1,83 @@
+## Debug mode
+
+The component takes a `debug` boolean prop. When enabled, debug output is logged to the console, with useful info like the props that were passed in. This is intended both for our internal use and for users integrating it.
+
+Debug mode is enabled by default in all of this repository's local environments (e.g. Storybook).
+
+Debug mode makes use of a logger, which selectively outputs to the console based on whether or not debug mode is enabled. When it makes sense, make use of the logger to output useful information. See `@lib/logging` for how to use it.
+
+## How to upload new changes to our CDN
+
+### Setup `gcloud`
+
+Our CDN is [hosted on Google Cloud Platform](<https://console.cloud.google.com/storage/browser/duffel-assets/components/ancillaries?pageState=(%22StorageObjectListTable%22:(%22f%22:%22%255B%255D%22))&project=duffel-prod-fda1bc52&prefix=&forceOnObjectsSortingFiltering=false>). To upload new changes you'll need to have `gcloud` intalled and authenticate with GCP. You can do this by running `gcloud auth login` and following the instructions.
+
+### Setup environment
+
+Make sure you have an up-to-date version of `.env.build`:
+
+```sh
+# .env.build
+
+# Include the base url for the Duffel API.
+# This variable is here to give us the ability to build a dist version that points to a local environment.
+# If no value is provided, the default `https://api.duffel.com` will be used.
+DUFFEL_API_URL=https://api.duffel.com
+
+# This is needed so the component knows the url base to use for its stylesheet
+# This variable is here so we can release component versions that may point to local environments or bypass the cache.
+# If no value is provided, the default `https://assets.duffel.com/ancillaries-component` will be used.
+COMPONENT_CDN=https://assets.duffel.com/components
+
+# The auth token is so we send data
+# to sentry during the build.
+# This is helpful when CI is
+# building releases, locally not as much.
+# You can get it here: https://duffel.sentry.io/settings/account/api/auth-tokens
+SENTRY_AUTH_TOKEN=
+```
+
+### Upload to CDN
+
+To upload the latest version of the component to the CDN, run:
+
+```sh
+yarn upload-to-cdn
+```
+
+This command will:
+
+1. Build the component. the output will be in the `dist` folder.
+
+2. Upload the build to the version folder on GCP storage.
+
+   - The build version is defined in [`package.json`](/package.json) under the `version` attribute.
+   - [You can find uploaded versions here](<https://console.cloud.google.com/storage/browser/duffel-assets/components/ancillaries?pageState=(%22StorageObjectListTable%22:(%22f%22:%22%255B%255D%22))&project=duffel-prod-fda1bc52&prefix=&forceOnObjectsSortingFiltering=false>)
+   - A version folder will be created if it doesn't exist.
+   - The version folder will be overwritten if it already exists.
+
+3. Upload the sourcemaps for that version to Sentry
+
+### Build component
+
+#### Build for CDN upload
+
+```sh
+yarn cdn-build # Build will output to ./cdn-dist
+```
+
+You can see this build referenced on:
+
+- `src/examples/client-side`
+- `src/examples/full-stack`
+
+#### Build for npm publishing
+
+```sh
+yarn react-build # Build will output to ./react-dist
+```
+
+You can see this build referenced on:
+
+- `src/examples/react-app`
+- `src/examples/just-typescript`

package/README.md

@@ -1,139 +1,64 @@
-# duffel-ancillaries
+# @duffel/components
 
-## What is this?
+This package is a component library to help you build your travel product using the [Duffel API](https://duffel.com/docs).
 
-The ancillaries component is a JavaScript component you can use to allow your customers to add ancillaries to their order. It's simple to add to your website and can be customised to fit your brand.
+## Get started
 
-> [See live demo here](https://codesandbox.io/s/duffel-ancillaries-example-1nxuu7)
-
-## How do I integrate this into my website?
-
-1. Please start by reading our integration guide on https://duffel.com/docs/guides/ancillaries-component
-2. You can also find examples code in the `example` folder (see below).
-
-## Integration examples
-
-We have two ways to run the example.
-
-### 1. Full stack
-
-This example has a server that will reach out to the Duffel API to search and retrieve an offer.
-To talk to the API we'll define the url to the API environment we want and .
-Please add the following to `.env.local`:
+### Installing
 
 ```sh
-# .env.local
-
-# Used to authenticate our
-# example server to talk to Duffel
-DUFFEL_API_TOKEN=test_duffel_dev_rw
-
-# The Duffel API environment we want
-# to talk. Remember to update the key
-# if this value changes.
-DUFFEL_API_URL=https://localhost:4000;
+yarn add @duffel/components
+# -- or --
+npm i @duffel/components
 ```
 
-This is a 'real life' example, where it uses a real offer ID and client key retrieved from the Duffel API. To run this, use `yarn run-example:full-stack`. This command will:
-
-1. Serve the Duffel component bundle and watch for changes to rebuild on port `8000`. This can also be done with `yarn dev`
-2. Run the full stack server using node. The example page will be ready on port `6262`. This can be done with `yarn run-full-stack-server`
-
-### What do I need to do to use the component with a local version of the Duffel API?
-
-- Make sure you visit https://localhost:4000 to allow your browser to make requests to it.
-- Make sure the org your are using has the [flags enabled](http://localhost:4242/features):
-  - `ancillaries_component_enable_client_key`
-  - `ancillaries_component_enable_client_key_endpoints`
-
-### 2. Client side with fixtures
-
-For a more basic example that doesn't rely on the Duffel API, use `yarn run-example:client-side`.
-
-This command will:
+### (alternative) Load from CDN:
 
-1. Serve the Duffel component bundle and watch for changes to rebuild on port `8000`. This can also be done with `yarn dev`
-2. Host a basic `index.html` with `http-server`. The example page will be ready on port `6262`. This can be done with `yarn run-client-side-server`
+```html
+<script src="https://assets.duffel.com/components/VERSION/duffel-ancillaries.js"></script>
+<script src="https://assets.duffel.com/components/VERSION/duffel-payments.js"></script>
+```
 
-## Debug mode
+## How do I integrate this into my website?
 
-The component takes a `debug` boolean prop. When enabled, debug output is logged to the console, with useful info like the props that were passed in. This is intended both for our internal use and for users integrating it.
+1. Please start by reading our integration guide on https://duffel.com/docs/guides/ancillaries-component
 
-Debug mode is enabled by default in all of this repository's local environments (e.g. Storybook).
+## Integration examples
 
-Debug mode makes use of a logger, which selectively outputs to the console based on whether or not debug mode is enabled. When it makes sense, make use of the logger to output useful information. See `@lib/logging` for how to use it.
+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.
 
-## How to upload new changes to our CDN
+   - [Find it on src/examples/client-side](src/examples/client-side)
 
-### Setup `gcloud`
+2. **full-stack** | This example loads a local version of the components using a `script` tag. It will search and retrieve an offer from the Duffel API and render the ancillaries component custom element with its `offer_id` and `client_key`. As soon as a service modal is closed it will create a test order with the given payload.
 
-Our CDN is [hosted on Google Cloud Platform](<https://console.cloud.google.com/storage/browser/duffel-assets/components/ancillaries?pageState=(%22StorageObjectListTable%22:(%22f%22:%22%255B%255D%22))&project=duffel-prod-fda1bc52&prefix=&forceOnObjectsSortingFiltering=false>). To upload new changes you'll need to have `gcloud` intalled and authenticate with GCP. You can do this by running `gcloud auth login` and following the instructions.
+   - [Find it on src/examples/full-stack](src/examples/full-stack)
 
-### Setup env variables under `.env.local`:
+3. **just-typescript** | This example imports a local version of `@duffel/components` and renders the custom element with an offer fixture once the page loads.
 
-Make sure you have an up-to-date version of `.env.build`
+   - [Find it on src/examples/just-typescript](src/examples/just-typescript)
 
-```sh
-# .env.build
-
-# Include the base url for the Duffel API.
-# This variable is here to give us the ability to build a dist version that points to a local environment.
-# If no value is provided, the default `https://api.duffel.com` will be used.
-DUFFEL_API_URL=https://api.duffel.com
-
-# This is needed so the component knows the url base to use for its stylesheet
-# This variable is here so we can release component versions that may point to local environments or bypass the cache.
-# If no value is provided, the default `https://assets.duffel.com/ancillaries-component` will be used.
-COMPONENT_CDN=https://assets.duffel.com/components/ancillaries
-
-# The auth token is so we send data
-# to sentry during the build.
-# This is helpful when CI is
-# building releases, locally not as much.
-# You can get it here: https://duffel.sentry.io/settings/account/api/auth-tokens
-SENTRY_AUTH_TOKEN=
-```
-
-### Upload to CDN
+4. **react-app** | This example imports a local version of `@duffel/components` and renders the a react element with an offer fixture.
 
-To upload the latest version of the component to the CDN, run:
+   - [Find it on src/examples/react-app](src/examples/react-app)
 
-```sh
-yarn upload-to-cdn
-```
+5. **payments-custom-element** | This example demonstrates the use of the payments component loaded through a script tag
 
-This command will:
+- [Find it on src/examples/payments-custom-element](src/examples/payments-custom-element)
 
-1. Build the component. the output will be in the `dist` folder.
+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.
 
-2. Upload the build to the version folder on GCP storage.
+   - [Find it on src/examples/payments-just-typescript](src/examples/payments-just-typescript)
 
-   - The build version is defined in [`package.json`](/package.json) under the `version` attribute.
-   - [You can find uploaded versions here](<https://console.cloud.google.com/storage/browser/duffel-assets/components/ancillaries?pageState=(%22StorageObjectListTable%22:(%22f%22:%22%255B%255D%22))&project=duffel-prod-fda1bc52&prefix=&forceOnObjectsSortingFiltering=false>)
-   - A version folder will be created if it doesn't exist.
-   - The version folder will be overwritten if it already exists.
+## What components are available?
 
-3. Upload the sourcemaps for that version to Sentry
+### Ancillaries component
 
-### Build component
+The ancillaries component allows your customers to add ancillaries to their order. It's simple to add to your website and can be customised to fit your brand. This component is avaiable through npm and our cdn.
 
-#### Build html custom element
+- [Find live demo on codesandbox.io&nbsp;&nbsp;↗](https://codesandbox.io/s/duffel-ancillaries-example-1nxuu7)
 
-```sh
-yarn cdn-build # Build will output to ./cdn-dist
-```
-
-You can see this build referenced on:
-
-- `src/examples/client-side`
-- `src/examples/full-stack`
-
-#### Build react component
-
-```sh
-yarn react-build # Build will output to ./react-dist
-```
+### Payments component
 
-You can see this build referenced on:
+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).
 
-- `src/examples/react-app`
+#### 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" },
   ],
@@ -10,5 +14,5 @@ module.exports = {
   minify: true,
   sourcemap: true,
   treeShaking: true,
-  outdir: "dist/ancillaries",
+  outdir: "cdn-dist",
 };

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."
@@ -34,14 +35,14 @@ esbuild
         org: "duffel",
         project: "ancillaries-component",
         // Specify the directory containing build artifacts
-        include: "./dist",
+        include: "./cdn-dist",
         authToken: process.env.SENTRY_AUTH_TOKEN,
         logLevel: "info",
-        release: `element-${VERSION}`,
+        release: VERSION,
       }),
       esbuildCopyStaticFiles({
         src: "src/fixtures",
-        dest: "dist/ancillaries/fixtures",
+        dest: "cdn-dist/fixtures",
         dereference: true,
         recursive: true,
       }),