@coras-io/embed 0.1.0

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

@@ -0,0 +1,392 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --field-input-border-color: var(--coras-color-neutral-400);
+    --field-input-border-radius: var(--coras-radius-field);
+    --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-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);
+    --activities-details-label-font-size: var(--coras-font-size-2xl);
+    --activities-details-label-font-weight: var(--coras-font-weight-semibold);
+    --activities-details-label-color: var(--coras-color-text);
+    --activities-details-label-span-font-size: var(--coras-font-size-base);
+    --activities-details-label-span-font-weight: var(
+      --coras-font-weight-medium
+    );
+    --section-border-bottom-color: var(--coras-color-neutral-200);
+    --payment-page-max-width: var(--coras-page-max-width);
+
+    --field-label-bottom-margin: 0.25rem;
+  }
+
+  coras-layout {
+    container-type: inline-size;
+    container-name: payment-layout;
+
+    h2 {
+      font-size: var(--payment-page-header-font-size);
+      line-height: var(--payment-page-header-line-height);
+      color: var(--payment-page-header-color);
+      font-weight: 600;
+      letter-spacing: 0.2px;
+      margin: 0 0 1.25rem 0;
+    }
+
+    .content {
+      display: grid;
+      grid-template-columns: 400px 1fr;
+      column-gap: 2rem;
+    }
+
+    .content:has(> :only-child) {
+      grid-template-columns: 1fr;
+    }
+
+    .payment-form-container {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .empty-basket-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.75rem;
+      text-align: center;
+      padding: 3rem 1rem;
+    }
+
+    .empty-basket-state coras-icon {
+      font-size: 2.5rem;
+    }
+
+    .empty-basket-state h2 {
+      margin: 0;
+    }
+
+    .empty-basket-state p {
+      margin: 0;
+    }
+
+    #form {
+      display: flex;
+      flex-direction: column;
+      gap: 1.5rem;
+    }
+
+    .section-divider {
+      border: none;
+      border-top: 1px solid var(--section-border-bottom-color);
+      margin: 0;
+    }
+
+    .fields-container {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .reservation-container {
+      margin-bottom: 1.5rem;
+      padding-bottom: 1rem;
+      border-bottom: 1px solid var(--section-border-bottom-color);
+    }
+
+    .reservation-container h3 {
+      font-size: var(--activities-details-label-font-size);
+      font-weight: var(--activities-details-label-font-weight);
+      color: var(--activities-details-label-color);
+      margin-bottom: 1rem;
+      margin-top: 0.5rem;
+    }
+
+    .ticket-container {
+      margin-bottom: 1rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .ticket-container h4,
+    .reservation-requirements-container h4 {
+      font-size: var(--activities-details-label-span-font-size);
+      font-weight: var(--activities-details-label-span-font-weight);
+      color: var(--activities-details-label-color);
+      margin-bottom: 0.5rem;
+      margin-top: 0.5rem;
+    }
+
+    .reservation-requirements-container {
+      margin-bottom: 1rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .pickup-address {
+      font-size: var(--coras-font-size-sm);
+      color: var(--coras-color-text-muted);
+      margin-top: 0.25rem;
+    }
+
+    .payment-details-wrapper[hidden] {
+      display: none;
+    }
+
+    .card-container {
+      margin-top: 0.5rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    .crypto-wallet-info {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    /* Stripe element styling to match coras-input */
+
+    .stripe-element {
+      padding: 0; /* Padding is applied to the Light DOM container */
+      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 */
+      box-shadow: var(--field-input-box-shadow);
+      box-sizing: border-box;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+    }
+
+    /* Focus and validation states for Stripe element */
+    .stripe-element.StripeElement--focus {
+      border-color: var(--field-input-focused-border-color);
+    }
+
+    .stripe-element.StripeElement--invalid {
+      border-color: var(--field-input-error-color);
+    }
+
+    /* Card field container styling to match coras-input container */
+
+    .card-field-container {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      width: 100%;
+    }
+
+    .card-field-container label {
+      font-size: var(--field-label-font-size);
+      line-height: var(--field-label-line-height);
+      color: var(--field-label-color);
+      margin-bottom: var(--field-label-bottom-margin, 0.25rem);
+      max-width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      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);
+      color: var(--field-label-color);
+      margin-bottom: var(--field-label-bottom-margin, 0.25rem);
+      max-width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      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 */
+      height: 100%;
+    }
+
+    .stripe-element-error {
+      border-color: var(--coras-color-error-500);
+    }
+
+    .error-message {
+      color: var(--coras-color-error-500);
+      font-size: var(--coras-font-size-sm);
+      margin-top: 0.5rem;
+    }
+
+    .confirmation-container {
+      width: 100%;
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 2rem 0;
+    }
+
+    .collect-fida-container {
+      margin-top: 2rem;
+    }
+
+    .footer {
+      margin-top: 1.5rem;
+    }
+
+    .terms-and-button {
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+    }
+
+    .terms-container {
+      flex: 1;
+      display: flex;
+      align-items: center;
+    }
+
+    .terms-container coras-checkbox {
+      --checkbox-label-font-family: Inter, sans-serif;
+      --checkbox-label-font-weight: 400;
+      --checkbox-label-font-size: 10px;
+      --checkbox-label-line-height: 14px;
+      --checkbox-label-letter-spacing: 0.2px;
+      --checkbox-label-vertical-align: middle;
+    }
+
+    .button-container {
+      flex-shrink: 0;
+    }
+
+    .button-container coras-button {
+      min-width: 160px;
+    }
+
+    /* Crypto footer: terms above, full-width button below */
+    .terms-and-button.crypto-footer {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .terms-and-button.crypto-footer .button-container {
+      flex-shrink: unset;
+    }
+
+    .terms-and-button.crypto-footer .button-container coras-button {
+      width: 100%;
+      min-width: unset;
+    }
+  }
+
+  @container payment-layout (max-width: 900px) {
+    coras-layout .content {
+      grid-template-columns: 1fr;
+    }
+
+    .terms-and-button {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .terms-container,
+    .button-container {
+      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));
+
+      coras-basket {
+        height: 100%;
+      }
+    }
+
+    /* 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;
+    }
+
+    coras-bottom-drawer[fullscreen] .drawer-expanded-content {
+      display: block;
+    }
+
+    .drawer-collapsed-content {
+      padding: 0 var(--bottom-drawer-padding-inline, 1rem)
+        calc(
+          env(safe-area-inset-bottom) + var(--bottom-drawer-padding-block, 1rem)
+        )
+        var(--bottom-drawer-padding-inline, 1rem);
+    }
+
+    .mobile-expiration-timer {
+      margin-bottom: 0.5rem;
+    }
+
+    .mobile-basket-summary {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.75rem;
+      padding: 0.25rem 0;
+      font-size: var(--coras-font-size-base);
+      color: var(--coras-color-text);
+
+      .left {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+
+        .label {
+          color: var(--coras-color-text-muted);
+        }
+
+        .value {
+          font-weight: var(--coras-font-weight-semibold);
+        }
+      }
+
+      .right {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+
+        .count {
+          color: var(--coras-color-text-muted);
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,98 @@
+import { components } from "../../core/types/api-schema.js";
+import type { Stripe, StripeCardNumberElement, StripeElements, PaymentRequest } from "@stripe/stripe-js";
+export type PaymentOption = "fida" | "card" | "google" | "apple";
+export type { PhoneCodeSelection } from "../../components/phone-field/phone-field.types.js";
+type ReservationsData = {
+    [reservationId: string]: {
+        [ticketId: string]: {
+            [field: string]: string;
+        };
+    } & {
+        requirements?: {
+            [field: string]: string | undefined;
+        };
+    };
+};
+export type FormValues = {
+    reservations?: ReservationsData;
+} & Record<string, string | undefined>;
+export interface StripeComponent extends HTMLElement {
+    validateCardElements: () => Promise<boolean>;
+    getStripe: () => Stripe | null;
+    getPaymentRequest: () => PaymentRequest | null;
+    getElements: () => StripeElements | null;
+    getCardNumberElement: () => StripeCardNumberElement | null;
+    updatePortals: () => void;
+}
+export type InputFieldType = "text" | "search" | "tel" | "email" | "date" | "number";
+export type InputFieldAutocomplete = "on" | "off" | "email" | "name" | "given-name" | "family-name" | "tel" | "tel-national" | "country" | "bday" | "address-line1" | "address-line2" | "address-level2" | "postal-code" | "one-time-code";
+export interface FieldConfig {
+    label: () => string;
+    placeholder?: () => string;
+    helpText?: () => string;
+    type: InputFieldType;
+    autocomplete: InputFieldAutocomplete;
+    validators?: (params: {
+        value: string;
+        context?: {
+            countryCode?: string;
+        };
+    }) => string | undefined;
+}
+export interface FieldsConfig {
+    [fieldName: string]: FieldConfig;
+}
+export type TransactionStatus = components["schemas"]["UserTransactions"]["status"];
+export type ReservationConfirmationResponse = components["schemas"]["ReservationsPutResponse"];
+export interface ApiError {
+    title?: string;
+    errors?: {
+        [fieldName: string]: string[] | string | Record<string, string[] | string> | Record<string, Record<string, string[] | string>> | undefined;
+    };
+}
+/**
+ * Stripe billing address structure for payment confirmation.
+ */
+export interface StripeBillingAddress {
+    line1: string;
+    line2?: string;
+    city: string;
+    postal_code: string;
+    country: string;
+}
+/**
+ * Customer data prepared for API submission.
+ */
+export interface CustomerData {
+    name: string;
+    email: string;
+    phone?: string;
+    address?: StripeBillingAddress;
+}
+/**
+ * Transaction status values from the API.
+ */
+export type TransactionPollingStatus = "PAID" | "PENDING" | "ADDED" | "SUSPENDED" | "FAILED" | null;
+/**
+ * OTP rate limiting state for crypto authentication.
+ */
+export interface OtpRateLimitState {
+    /** Number of OTP send attempts in current session */
+    attempts: number;
+    /** Timestamp of last OTP send */
+    lastSentTime: number;
+    /** Whether currently rate limited */
+    isRateLimited: boolean;
+    /** Seconds remaining before next send allowed */
+    cooldownRemaining: number;
+}
+/**
+ * Field visibility flags computed from requirements data.
+ */
+export interface FieldVisibility {
+    hasNameField: boolean;
+    hasFirstNameField: boolean;
+    hasSecondNameField: boolean;
+    hasPhoneField: boolean;
+    hasEmailField: boolean;
+}

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

@@ -0,0 +1 @@
+export {};