@coras-io/embed 0.2.0 → 0.3.0

package/dist/views/payment-page/payment-page.styles.js

@@ -1,17 +1,44 @@
 import { css } from "lit";
 import component from "../../styles/defaults/component.js";
+import { skeleton, visuallyHidden } from "../../styles/primitives.js";
 export default css `
   ${component}
+  ${skeleton}
+  ${visuallyHidden}
+
+  .payment-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    width: 100%;
+    max-width: var(--payment-page-max-width);
+    margin-inline: auto;
+    padding-block: 1rem;
+
+    .sk-field {
+      width: 100%;
+      height: 3rem;
+    }
+
+    .sk-block {
+      width: 100%;
+      height: 12rem;
+    }
+  }
 
   :host {
-    --field-input-border-color: var(--coras-color-neutral-400);
+    --field-input-border-color: var(--coras-color-field-border);
     --field-input-border-radius: var(--coras-radius-field);
+    --field-input-focused-border-color: var(--coras-color-primary);
+    --field-input-error-color: var(--coras-color-error);
+    --field-input-color: var(--coras-color-text);
+    --field-input-placeholder-color: var(--coras-color-text-muted);
     --field-input-box-shadow: 0px 4px 4px 0px
       color-mix(in srgb, black, transparent 90%);
     --field-label-font-size: var(--coras-font-size-base);
     --field-label-line-height: var(--coras-font-size-2xl);
     --field-label-color: var(--coras-color-text);
-    --payment-page-header-font-size: var(--coras-font-size-2xl);
+    --payment-page-header-font-size: var(--coras-font-size-heading);
     --payment-page-header-line-height: var(--coras-font-size-3xl);
     --payment-page-header-color: var(--coras-color-text);
     --confirmation-checkbox-label-font-size: var(--coras-font-size-xxs);
@@ -22,7 +49,7 @@ export default css `
     --activities-details-label-span-font-weight: var(
       --coras-font-weight-medium
     );
-    --section-border-bottom-color: var(--coras-color-neutral-200);
+    --section-border-bottom-color: var(--coras-color-divider);
     --payment-page-max-width: var(--coras-page-max-width);
 
     --field-label-bottom-margin: 0.25rem;
@@ -151,17 +178,12 @@ export default css `
       gap: 0.5rem;
     }
 
-    /* Stripe element styling to match coras-input */
-
     .stripe-element {
-      padding: 0; /* Padding is applied to the Light DOM container */
+      padding: 0;
       border: 1px solid var(--field-input-border-color);
       border-radius: var(--field-input-border-radius);
-      background-color: var(--coras-color-surface);
-      min-height: var(
-        --field-input-height,
-        3.25rem
-      ); /* Match coras-input height */
+      background-color: var(--coras-input-field-background-color);
+      min-height: var(--field-input-height, 3.25rem);
       box-shadow: var(--field-input-box-shadow);
       box-sizing: border-box;
       overflow: hidden;
@@ -169,7 +191,6 @@ export default css `
       align-items: center;
     }
 
-    /* Focus and validation states for Stripe element */
     .stripe-element.StripeElement--focus {
       border-color: var(--field-input-focused-border-color);
     }
@@ -178,8 +199,6 @@ export default css `
       border-color: var(--field-input-error-color);
     }
 
-    /* Card field container styling to match coras-input container */
-
     .card-field-container {
       display: flex;
       flex-direction: column;
@@ -198,7 +217,6 @@ export default css `
       text-overflow: ellipsis;
     }
 
-    /* Generic field label to match coras-field label styling */
     .field-label {
       font-size: var(--field-label-font-size);
       line-height: var(--field-label-line-height);
@@ -210,20 +228,18 @@ export default css `
       text-overflow: ellipsis;
     }
 
-    /* Stripe elements inside joined fields */
-
     coras-joined-fields .stripe-element {
       border: none;
-      padding: 0; /* Padding is applied to the Light DOM container */
+      padding: 0;
       height: 100%;
     }
 
     .stripe-element-error {
-      border-color: var(--coras-color-error-500);
+      border-color: var(--coras-color-error);
     }
 
     .error-message {
-      color: var(--coras-color-error-500);
+      color: var(--coras-color-error);
       font-size: var(--coras-font-size-sm);
       margin-top: 0.5rem;
     }
@@ -256,7 +272,7 @@ export default css `
     }
 
     .terms-container coras-checkbox {
-      --checkbox-label-font-family: Inter, sans-serif;
+      --checkbox-label-font-family: var(--coras-font-family-sans);
       --checkbox-label-font-weight: 400;
       --checkbox-label-font-size: 10px;
       --checkbox-label-line-height: 14px;
@@ -272,7 +288,6 @@ export default css `
       min-width: 160px;
     }
 
-    /* Crypto footer: terms above, full-width button below */
     .terms-and-button.crypto-footer {
       flex-direction: column;
       align-items: stretch;
@@ -303,24 +318,20 @@ export default css `
       flex-basis: auto;
     }
 
-    /* Hide the desktop basket in mobile layout */
     coras-basket {
       display: none;
     }
 
-    /* Inside the bottom drawer, switch content based on drawer state */
     coras-bottom-drawer .drawer-expanded-content {
       display: none;
     }
 
-    /* Show expanded content when drawer is open (expanded) */
     coras-bottom-drawer[open] .drawer-expanded-content {
       coras-basket {
         display: block;
       }
     }
 
-    /* When in fullscreen mode, subtract handle height to avoid vertical scroll */
     coras-bottom-drawer[open][fullscreen] .drawer-expanded-content {
       height: calc(100% - var(--bottom-drawer-handle-block-size, 1rem));
 
@@ -329,12 +340,6 @@ export default css `
       }
     }
 
-    /* Hide collapsed summary when drawer is open (expanded) */
-    /*coras-bottom-drawer[open] .drawer-collapsed-content {*/
-    /*  display: none;*/
-    /*}*/
-
-    /* Continue to support fullscreen state explicitly */
     coras-bottom-drawer[fullscreen] .drawer-collapsed-content {
       display: none;
     }

package/dist/views/payment-page/payment-page.utils.d.ts

@@ -108,6 +108,13 @@ export declare function prepareReservationData(reservations: ReservationSummary[
     reservations: string[];
     reservationData: Record<string, Record<string, unknown>>;
 };
+/**
+ * Builds an object from the given entries, omitting any key whose value is
+ * empty (null, undefined, or an empty string). Used to keep unrequired
+ * attendee fields out of the reservation payload, since the API rejects them
+ * with "Field may not be null." when present.
+ */
+export declare function removeEmptyFields<T>(fields: Record<string, string | null | undefined>): T;
 /**
  * Prepares attendee data for the attendees field in the PUT request to /reservations
  */

package/dist/views/payment-page/payment-page.utils.js

@@ -427,6 +427,15 @@ export function prepareReservationData(reservations, getFieldValue) {
     });
     return { reservations: reservationIds, reservationData };
 }
+/**
+ * Builds an object from the given entries, omitting any key whose value is
+ * empty (null, undefined, or an empty string). Used to keep unrequired
+ * attendee fields out of the reservation payload, since the API rejects them
+ * with "Field may not be null." when present.
+ */
+export function removeEmptyFields(fields) {
+    return Object.fromEntries(Object.entries(fields).filter(([, value]) => value != null && value !== ""));
+}
 /**
  * Prepares attendee data for the attendees field in the PUT request to /reservations
  */
@@ -456,8 +465,6 @@ export function prepareAttendeesData(reservations, reservationsCheck, getFieldVa
                     const dateOfBirth = getFieldValue(`${fieldNamePrefix}date_of_birth`);
                     // Handle phone number with country code
                     const phoneNumberRaw = getFieldValue(`${fieldNamePrefix}phone_number`);
-                    const countryCode = getFieldValue(`${fieldNamePrefix}country_code`) ||
-                        selectedPhoneCode?.code;
                     // Get dial code (e.g. "353") and prepend to local number
                     const phoneCode = getFieldValue(`${fieldNamePrefix}phone_code`) ||
                         selectedPhoneCode?.phoneCode ||
@@ -466,19 +473,27 @@ export function prepareAttendeesData(reservations, reservationsCheck, getFieldVa
                         ? `${phoneCode}${phoneNumberRaw}`
                         : phoneNumberRaw;
                     const phoneNumber = formatPhoneWithPlus(fullPhone);
-                    const attendee = {
+                    // Only send country_code alongside an actual phone number.
+                    const countryCode = phoneNumber
+                        ? getFieldValue(`${fieldNamePrefix}country_code`) ||
+                            selectedPhoneCode?.code
+                        : undefined;
+                    // The API rejects null for any attendee field it did not require
+                    // ("Field may not be null."). Only the fields the customer filled in
+                    // are required and rendered, so send those and omit the rest.
+                    const attendee = removeEmptyFields({
                         ticket_id: ticketId,
-                        first_name: firstName || null,
-                        second_name: secondName || null,
-                        email: email || null,
-                        phone_number: phoneNumber || null,
-                        id_number: idNumber || null,
-                        gender: gender || null,
-                        city: city || null,
-                        province: province || null,
-                        country_code: countryCode || null,
-                        date_of_birth: dateOfBirth || null,
-                    };
+                        first_name: firstName,
+                        second_name: secondName,
+                        email,
+                        phone_number: phoneNumber,
+                        id_number: idNumber,
+                        gender,
+                        city,
+                        province,
+                        country_code: countryCode,
+                        date_of_birth: dateOfBirth,
+                    });
                     attendees.push(attendee);
                 }
             });

package/dist/views/payment-page/payment-page.validators.js

@@ -1,5 +1,6 @@
 import { msg, str } from "@lit/localize";
 import { isValidPhoneNumber } from "libphonenumber-js/min";
+import { isAfter, parseISO, startOfDay } from "date-fns";
 /**
  * Required field validator
  */
@@ -128,9 +129,14 @@ export const validPassportExpiry = ({ value }) => {
     const dateError = validDate({ value });
     if (dateError)
         return dateError;
-    const today = new Date();
-    const expiryDate = new Date(value);
-    if (expiryDate <= today) {
+    if (!value)
+        return undefined; // Let required validator handle empty values
+    // Passport expiry is a calendar day. Compare against today's local day so the
+    // check does not flip near midnight: native `new Date("YYYY-MM-DD")` reads it
+    // as UTC midnight, which can read as expired a day early west of UTC. Expiry
+    // on today's date counts as expired, matching the original rule.
+    const expiryDate = parseISO(value);
+    if (!isAfter(expiryDate, startOfDay(new Date()))) {
         return msg("Passport must not be expired");
     }
     return undefined;

package/dist/views/payment-page/services/payment-api.service.d.ts

@@ -74,7 +74,7 @@ export declare class PaymentApiService {
     fetchTransactions(userId: string): Promise<{
         data: {
             transaction_id: string;
-            status: string;
+            status: "ADDED" | "PAID" | "PENDING" | "FAILED" | "SUSPENDED" | "REFUNDED" | "PARTIAL_REFUNDED" | "CANCELLED" | "PARTIALLY_CANCELLED" | "PARTIALLY_CONFIRMED";
             created_at: string;
             reference_id: string;
             loyalty: components["schemas"]["LoyaltySchema"];

package/dist/views/search-page/search-page.component.d.ts

@@ -53,6 +53,7 @@ export declare class CorasSearchPage extends CorasSearchPage_base {
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changedProperties: PropertyValues): void;
+    private renderSkeleton;
     private renderAttractions;
     private handleAttractionClick;
     private renderBottomSection;

package/dist/views/search-page/search-page.component.js

@@ -29,6 +29,7 @@ import { apiGet, withErrorHandling } from "../../core/api/queries.js";
 import { adaptPresetImages } from "../../core/images/preset-adapter.js";
 import { ErrorModalMixin } from "../../mixins/error-modal.mixin.js";
 import { getLocale, setLocale } from "../../core/i18n/localization.js";
+import { getApiLanguageCode } from "../../core/utils/locale.js";
 /**
  * Search page component for displaying search results.
  *
@@ -57,7 +58,7 @@ let CorasSearchPage = class CorasSearchPage extends ErrorModalMixin(LocationSear
                     query: {
                         date_start: dateStart,
                         search_term: search,
-                        language_code: locale.split("-")[0],
+                        language_code: getApiLanguageCode(locale),
                         currency,
                         page,
                         size,
@@ -225,6 +226,15 @@ let CorasSearchPage = class CorasSearchPage extends ErrorModalMixin(LocationSear
         }
         this._isFirstUpdate = false;
     }
+    renderSkeleton() {
+        return html `
+      <div class="search-skeleton" aria-hidden="true">
+        <div class="coras-skeleton sk-title"></div>
+        ${Array.from({ length: 4 }, () => html `<div class="coras-skeleton sk-card"></div>`)}
+      </div>
+      <span class="coras-sr-only" role="status">${msg("Loading")}</span>
+    `;
+    }
     renderAttractions() {
         if (this.attractionsSearchTask.status === TaskStatus.ERROR &&
             this.attractions.length === 0) {
@@ -233,11 +243,7 @@ let CorasSearchPage = class CorasSearchPage extends ErrorModalMixin(LocationSear
         }
         if (this.page === 0 &&
             this.attractionsSearchTask.status === TaskStatus.PENDING) {
-            return html `
-        <div class="loading-container">
-          <coras-loading-spinner size="large"></coras-loading-spinner>
-        </div>
-      `;
+            return this.renderSkeleton();
         }
         if (this.attractions.length === 0 &&
             this.attractionsSearchTask.status === TaskStatus.COMPLETE) {

package/dist/views/search-page/search-page.styles.js

@@ -1,10 +1,33 @@
 import { css } from "lit";
 import component from "../../styles/defaults/component.js";
+import { skeleton, visuallyHidden } from "../../styles/primitives.js";
 export default css `
   ${component}
+  ${skeleton}
+  ${visuallyHidden}
+
+  .search-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    width: 100%;
+    max-width: var(--search-page-max-width);
+    margin-inline: auto;
+
+    .sk-title {
+      width: 20rem;
+      max-width: 70%;
+      height: 2rem;
+    }
+
+    .sk-card {
+      width: 100%;
+      height: 9rem;
+    }
+  }
 
   :host {
-    --attractions-title-font-size: var(--coras-font-size-2xl);
+    --attractions-title-font-size: var(--coras-font-size-heading);
     --attractions-title-line-height: var(--coras-font-size-3xl);
     --attractions-title-font-weight: var(--coras-font-weight-semibold);
     --attractions-title-color: var(--coras-color-text);
@@ -52,7 +75,6 @@ export default css `
     width: fit-content;
   }
 
-  .loading-container,
   .error-container,
   .empty-container,
   .loading-more-container {

package/dist/views/suggestion-widget/suggestion-widget.styles.js

@@ -4,7 +4,7 @@ export default css `
   ${component}
 
   :host {
-    --suggestion-widget-header-font-size: var(--coras-font-size-2xl);
+    --suggestion-widget-header-font-size: var(--coras-font-size-heading);
     --suggestion-widget-header-font-weight: var(--coras-font-weight-semibold);
     --suggestion-widget-header-line-height: var(--coras-font-size-3xl);
     --suggestion-widget-header-color: var(--coras-color-text);

package/package.json

@@ -11,13 +11,16 @@
     "./dist/components/**",
     "./dist/containers/**",
     "./dist/contexts/**",
-    "./dist/views/**"
+    "./dist/views/**",
+    "./src/components/**",
+    "./src/containers/**",
+    "./src/contexts/**",
+    "./src/views/**"
   ],
   "engines": {
-    "node": ">=20"
+    "node": ">=22"
   },
-  "customElements": "dist/custom-elements.json",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "homepage": "https://embed.coras.io",
   "bugs": {
@@ -35,6 +38,7 @@
   ],
   "files": [
     "dist",
+    "!dist/custom-elements.json",
     "NOTICE",
     "CHANGELOG.md"
   ],
@@ -47,19 +51,10 @@
       "types": "./dist/sdk/url.d.ts",
       "import": "./dist/sdk/url.js"
     },
-    "./custom-elements.json": "./dist/custom-elements.json",
-    "./types": {
-      "types": "./dist/core/types/index.d.ts"
-    },
     "./helpers": {
       "types": "./dist/helpers/helpers.d.ts",
       "import": "./dist/helpers/helpers.js"
     },
-    "./tokens.css": "./dist/styles/tokens.css",
-    "./contrast": {
-      "types": "./dist/styles/contrast.d.ts",
-      "import": "./dist/styles/contrast.js"
-    },
     "./errors": {
       "types": "./dist/errors.d.ts",
       "import": "./dist/errors.js"
@@ -70,72 +65,64 @@
     "access": "public"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "0.10.4",
-    "@eslint/js": "9.21.0",
-    "@lit/localize-tools": "0.8.0",
-    "@ljcl/storybook-addon-cssprops": "4.0.0",
-    "@playwright/test": "1.55.1",
-    "@seatsio/seatsio-types": "5.5.0",
-    "@storybook/addon-a11y": "8.6.18",
-    "@storybook/addon-actions": "8.6.18",
-    "@storybook/addon-coverage": "1.0.5",
-    "@storybook/addon-essentials": "8.6.18",
-    "@storybook/addon-interactions": "8.6.18",
-    "@storybook/addon-links": "8.6.18",
-    "@storybook/blocks": "8.6.18",
-    "@storybook/preview-api": "8.6.18",
-    "@storybook/test": "8.6.18",
-    "@storybook/test-runner": "0.20.1",
-    "@storybook/web-components": "8.6.18",
-    "@storybook/web-components-vite": "8.6.18",
-    "@tsconfig/node24": "24.0.4",
-    "@types/eslint__js": "8.42.3",
-    "@types/node": "24.12.0",
-    "@typescript-eslint/eslint-plugin": "8.43.0",
-    "@vitest/browser": "3.2.6",
-    "copyfiles": "2.4.1",
-    "eslint": "9.21.0",
-    "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-lit": "1.15.0",
-    "eslint-plugin-prettier": "5.2.3",
-    "eslint-plugin-storybook": "0.11.6",
-    "eslint-plugin-wc": "2.2.1",
-    "globals": "15.15.0",
-    "globby": "14.1.0",
-    "happy-dom": "20.9.0",
-    "lorem-ipsum": "2.0.8",
-    "openapi-typescript": "7.6.1",
-    "openapi-typescript-helpers": "0.0.15",
-    "playwright": "1.60.0",
+    "@custom-elements-manifest/analyzer": "0.11.0",
+    "@eslint/js": "10.0.1",
+    "@lit/localize-tools": "0.8.2",
+    "@ljcl/storybook-addon-cssprops": "6.1.0",
+    "@seatsio/seatsio-types": "6.19.0",
+    "@storybook/addon-a11y": "10.5.10",
+    "@storybook/addon-designs": "11.1.4",
+    "@storybook/addon-docs": "10.5.10",
+    "@storybook/addon-links": "10.5.10",
+    "@storybook/addon-vitest": "10.5.10",
+    "@storybook/web-components": "10.5.10",
+    "@storybook/web-components-vite": "10.5.10",
+    "@tsconfig/node24": "24.0.5",
+    "@types/node": "24.13.3",
+    "@typescript-eslint/eslint-plugin": "8.67.0",
+    "@vitest/browser": "4.1.11",
+    "@vitest/browser-playwright": "4.1.11",
+    "@vitest/coverage-v8": "4.1.11",
+    "eslint": "10.9.0",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-lit": "2.3.1",
+    "eslint-plugin-prettier": "5.5.6",
+    "eslint-plugin-storybook": "10.5.10",
+    "eslint-plugin-wc": "3.1.0",
+    "globals": "17.11.0",
+    "happy-dom": "20.11.6",
+    "lorem-ipsum": "3.0.0",
+    "openapi-typescript": "7.13.0",
+    "openapi-typescript-helpers": "0.1.0",
+    "playwright": "1.62.1",
     "prettier": "3.5.3",
-    "rimraf": "6.0.1",
-    "sirv": "3.0.1",
-    "storybook": "8.6.18",
+    "rimraf": "6.1.3",
+    "sirv": "3.0.2",
+    "storybook": "10.5.10",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.43.0",
-    "vite": "7.3.6",
-    "vite-plugin-istanbul": "6.0.2",
-    "vitest": "3.2.6",
-    "@coras-io/static": "0.0.2"
+    "typescript-eslint": "8.67.0",
+    "vite": "8.2.2",
+    "vitest": "4.1.11",
+    "@coras-io/static": "0.0.3"
   },
   "dependencies": {
-    "@coinbase/cdp-core": "0.0.110",
-    "@floating-ui/dom": "1.6.13",
-    "@lit-labs/signals": "^0.1.2",
-    "@lit-labs/virtualizer": "^2.1.0",
-    "@lit/context": "^1.1.4",
+    "@coinbase/cdp-core": "0.0.122",
+    "@floating-ui/dom": "1.8.0",
+    "@lit-labs/signals": "^0.3.0",
+    "@lit-labs/virtualizer": "^2.1.1",
+    "@lit/context": "^1.1.6",
     "@lit/localize": "^0.12.2",
-    "@lit/task": "^1.0.2",
-    "@stripe/stripe-js": "5.6.0",
-    "date-fns": "4.1.0",
+    "@lit/task": "^1.0.3",
+    "@stripe/stripe-js": "9.14.0",
+    "date-fns": "4.4.0",
     "date-fns-tz": "3.2.0",
-    "dompurify": "3.4.11",
-    "libphonenumber-js": "1.12.36",
-    "lit": "^3.2.1",
-    "openapi-fetch": "0.13.5",
-    "viem": "2.52.2",
-    "@coras-io/brand-tokens": "^0.2.0"
+    "dompurify": "3.4.14",
+    "libphonenumber-js": "1.13.11",
+    "lit": "^3.3.3",
+    "openapi-fetch": "0.17.0",
+    "viem": "2.55.19",
+    "@coras-io/brand-tokens": "^0.3.0"
   },
   "scripts": {
     "lint": "eslint \"src/**/*.ts*\"",
@@ -147,7 +134,7 @@
     "prebuild": "rimraf dist node_modules/.cache/embed.tsbuildinfo && pnpm run generate:tokens",
     "build": "tsc -p tsconfig.build.json",
     "build:watch": "tsc --build --watch",
-    "postbuild": "copyfiles -u 1 \"src/styles/tokens.css\" dist && pnpm run generate-manifest",
+    "postbuild": "pnpm run generate-manifest",
     "generate-api-schema": "openapi-typescript openapi.schema.json -o ./src/core/types/api-schema.d.ts && eslint --fix src/core/types/api-schema.d.ts && prettier --write src/core/types/api-schema.d.ts",
     "test": "vitest",
     "test:sdk": "vitest run --config vitest.sdk.config.ts",
@@ -159,8 +146,8 @@
     "localize:build": "lit-localize build",
     "storybook": "storybook dev --no-open -p 8082",
     "storybook:build": "storybook build --output-dir dist-storybook",
-    "storybook:test": "test-storybook -u --browsers chromium,firefox,webkit --url http://localhost:3003",
-    "storybook:test:coverage": "test-storybook --coverage --url http://localhost:3003",
+    "storybook:test": "vitest run --config vitest.storybook.config.ts",
+    "storybook:test:coverage": "vitest run --config vitest.storybook.config.ts --coverage",
     "storybook:serve-build": "storybook build --output-dir dist-storybook && npx http-server dist-storybook"
   }
 }