@ticketboothapp/booking 0.1.23 → 1.2.24

package/src/components/booking/TourDescription.tsx

@@ -1,273 +0,0 @@
-'use client';
-
-import { useState, useMemo } from 'react';
-import { useTranslations, useLocale } from '@/lib/booking/i18n';
-import { getProductDescription } from '@/lib/product-descriptions';
-import PlusIcon from '@/assets/icons/plus.svg';
-import MinusIcon from '@/assets/icons/minus.svg';
-import styles from './TourDescription.module.css';
-
-export interface TourDescriptionReview {
-  text: string;
-  name: string;
-}
-
-/** Grouped bullets under a bold subheading inside an expandable section */
-export interface TourDescriptionSubsection {
-  title: string;
-  items: string[];
-}
-
-export interface TourDescriptionSection {
-  title: string;
-  /** String for paragraph; string[] for bullet list or line-by-line HTML; subsection[] for titled bullet groups */
-  content:
-    | string
-    | string[]
-    | TourDescriptionSubsection[]
-    | React.ReactNode;
-}
-
-export interface TourDescriptionProps {
-  /** Product slug (e.g. moraine-lake-sunrise) - loads content from product-descriptions/{slug}.{locale}.json */
-  productSlug?: string;
-  /** Locale for loading translated content (defaults to useLocale) */
-  locale?: string;
-  /** Override main toggle label (default: “See full tour description”) */
-  toggleLabel?: string;
-  /** Override: main description paragraphs (if provided, skips file load) */
-  paragraphs?: string[];
-  /** Override: highlighted review (if provided, skips file load for review) */
-  review?: TourDescriptionReview;
-  /** Override: nested expandable sections (if provided, skips file load) */
-  sections?: TourDescriptionSection[];
-  /** Start expanded (e.g. when in partial/pre-launch state) */
-  defaultExpanded?: boolean;
-}
-
-/** Items starting with • - * are bullet list; otherwise join as HTML (multi-line format) */
-function isBulletList(items: string[]): boolean {
-  const bulletChars = ['•', '-', '*'];
-  return items.length > 0 && items.every((item) => bulletChars.some((c) => item.trim().startsWith(c)));
-}
-
-/** Single item is a bullet (starts with •, -, or *) */
-function isBulletItem(item: string): boolean {
-  const bulletChars = ['•', '-', '*'];
-  return bulletChars.some((c) => item.trim().startsWith(c));
-}
-
-/** True if the entire line is just a single tag (e.g. <strong>Heading</strong>), not mixed content */
-function isHeadingLine(line: string): boolean {
-  const trimmed = line.trim();
-  return /^<[a-zA-Z]+>[^<]*<\/[a-zA-Z]+>$/.test(trimmed);
-}
-
-function isSubsectionGroups(
-  content: TourDescriptionSection['content']
-): content is TourDescriptionSubsection[] {
-  if (!Array.isArray(content) || content.length === 0) return false;
-  const first = content[0];
-  return (
-    typeof first === 'object' &&
-    first !== null &&
-    'title' in first &&
-    'items' in first &&
-    typeof (first as TourDescriptionSubsection).title === 'string' &&
-    Array.isArray((first as TourDescriptionSubsection).items)
-  );
-}
-
-function ExpandableSection({
-  title,
-  children,
-  isOpen,
-  onToggle,
-}: {
-  title: string;
-  children: React.ReactNode;
-  isOpen: boolean;
-  onToggle: () => void;
-}) {
-  return (
-    <div className={styles.nestedSection}>
-      <button
-        type="button"
-        className={styles.nestedToggle}
-        onClick={onToggle}
-        aria-expanded={isOpen}
-      >
-        <span>{title}</span>
-        <svg
-          className={styles.chevron}
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-        >
-          <path d="M9 6l6 6-6 6" />
-        </svg>
-      </button>
-      <div className={`${styles.nestedContentWrapper} ${isOpen ? styles.nestedContentOpen : ''}`}>
-        <div className={styles.nestedContent}>{children}</div>
-      </div>
-    </div>
-  );
-}
-
-export function TourDescription({
-  productSlug,
-  locale: localeProp,
-  toggleLabel,
-  paragraphs: paragraphsProp,
-  review: reviewProp,
-  sections: sectionsProp,
-  defaultExpanded = false,
-}: TourDescriptionProps) {
-  const { t } = useTranslations();
-  const { locale: contextLocale } = useLocale();
-  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
-  const [openSectionIndex, setOpenSectionIndex] = useState<number | null>(null);
-
-  const locale = localeProp ?? contextLocale;
-
-  const loadedContent = useMemo(() => {
-    if (productSlug && locale) {
-      return getProductDescription(productSlug, locale);
-    }
-    return null;
-  }, [productSlug, locale]);
-
-  const paragraphs = paragraphsProp ?? loadedContent?.paragraphs ?? [];
-  const review = reviewProp ?? loadedContent?.review;
-  const sections = sectionsProp ?? loadedContent?.sections ?? [];
-
-  const displayParagraphs =
-    paragraphs.length > 0 ? paragraphs : [];
-  const displayReview = review ?? null;
-  const displaySections =
-    sections.length > 0 ? sections : [];
-
-  /** Group paragraphs: consecutive bullet items become a single <ul> block */
-  const paragraphBlocks = useMemo(() => {
-    const blocks: ({ type: 'paragraph'; text: string } | { type: 'bulletList'; items: string[] })[] = [];
-    let i = 0;
-    while (i < displayParagraphs.length) {
-      const p = displayParagraphs[i];
-      if (isBulletItem(p)) {
-        const items: string[] = [];
-        while (i < displayParagraphs.length && isBulletItem(displayParagraphs[i])) {
-          items.push(displayParagraphs[i]);
-          i++;
-        }
-        blocks.push({ type: 'bulletList', items });
-      } else {
-        blocks.push({ type: 'paragraph', text: p });
-        i++;
-      }
-    }
-    return blocks;
-  }, [displayParagraphs]);
-
-  return (
-    <div className={styles.root}>
-      <button
-        type="button"
-        className={styles.mainToggle}
-        onClick={() => setIsExpanded((e) => !e)}
-        aria-expanded={isExpanded}
-      >
-        <span>{toggleLabel ?? t('booking.seeFullTourDescription')}</span>
-        <span className={`${styles.toggleIcon} ${isExpanded ? styles.toggleIconExpanded : ''}`} aria-hidden>
-          {isExpanded ? (
-            <MinusIcon />
-          ) : (
-            <PlusIcon />
-          )}
-        </span>
-      </button>
-
-      <div className={`${styles.contentWrapper} ${isExpanded ? styles.contentExpanded : ''}`}>
-        <div className={styles.content}>
-          {paragraphBlocks.map((block, i) =>
-            block.type === 'paragraph' ? (
-              <p key={i} className={styles.paragraph} dangerouslySetInnerHTML={{ __html: block.text }} />
-            ) : (
-              <ul key={i} className={styles.bulletList}>
-                {block.items.map((item, j) => (
-                  <li key={j} className={styles.bulletItem} dangerouslySetInnerHTML={{ __html: item }} />
-                ))}
-              </ul>
-            )
-          )}
-          {displayReview && (
-            <blockquote className={styles.review}>
-              <p className={styles.reviewText} dangerouslySetInnerHTML={{ __html: displayReview.text }} />
-              <cite className={styles.reviewName} dangerouslySetInnerHTML={{ __html: displayReview.name }} />
-            </blockquote>
-          )}
-          {displaySections.map((section, i) => (
-            <ExpandableSection
-              key={i}
-              title={section.title}
-              isOpen={openSectionIndex === i}
-              onToggle={() => setOpenSectionIndex((prev) => (prev === i ? null : i))}
-            >
-              {isSubsectionGroups(section.content) ? (
-                <div className={styles.sectionSubsections}>
-                  {section.content.map((sub, k) => (
-                    <div key={k} className={styles.sectionSubsection}>
-                      <div
-                        className={styles.sectionSubsectionTitle}
-                        dangerouslySetInnerHTML={{ __html: sub.title }}
-                      />
-                      {sub.items.length > 0 && (
-                        <ul className={styles.bulletList}>
-                          {sub.items.map((item, j) => (
-                            <li
-                              key={j}
-                              className={styles.bulletItem}
-                              dangerouslySetInnerHTML={{ __html: item }}
-                            />
-                          ))}
-                        </ul>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              ) : Array.isArray(section.content) ? (
-                isBulletList(section.content) ? (
-                  <ul className={styles.bulletList}>
-                    {section.content.map((item, j) => (
-                      <li key={j} className={styles.bulletItem} dangerouslySetInnerHTML={{ __html: item }} />
-                    ))}
-                  </ul>
-                ) : (
-                  <div className={styles.sectionHtmlLines}>
-                    {section.content.map((item, j) => (
-                      <div
-                        key={j}
-                        className={
-                          isHeadingLine(item)
-                            ? styles.sectionLineHeading
-                            : styles.sectionLineIndented
-                        }
-                        dangerouslySetInnerHTML={{ __html: item }}
-                      />
-                    ))}
-                  </div>
-                )
-              ) : typeof section.content === 'string' ? (
-                <div className={styles.sectionHtml} dangerouslySetInnerHTML={{ __html: section.content }} />
-              ) : (
-                section.content
-              )}
-            </ExpandableSection>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/booking/booking-flow-ui.ts

@@ -1,38 +0,0 @@
-/**
- * Optional UI/behavior overrides for booking flows.
- * Omitted fields keep main-site / change-booking defaults.
- */
-export interface BookingFlowUiOptions {
-  showCollage?: boolean;
-  showTourDescription?: boolean;
-  autoSelectFirstAvailableDate?: boolean;
-  autoSelectFirstHighlightedPickup?: boolean;
-  /**
-   * Partner portal: org has DEFERRED_INVOICE — confirm via `/1/partner/confirm-booking-without-payment`
-   * (Bearer from [setPartnerPortalBookingJwtGetter]) instead of Stripe checkout.
-   */
-  partnerDeferredInvoice?: boolean;
-  /** Optional submit label override when `partnerDeferredInvoice` is enabled. */
-  partnerDeferredInvoiceSubmitLabel?: string;
-  /** Optional attribution summary shown at checkout (e.g. partner + agent). */
-  partnerAttributionSummary?: string;
-  /** Optional required confirmation checkbox label for attribution summary. */
-  partnerAttributionConfirmLabel?: string;
-  /**
-   * Extra inset (px) from the top of the viewport for itinerary “sticky” detection and CSS `top`
-   * when a host page has its own sticky chrome (e.g. partner portal header + tabs).
-   */
-  itineraryStickyTopOffsetPx?: number;
-}
-
-/**
- * Baseline UX for embedded partner-style surfaces (partner portal Book tab, TicketBooth provider dashboard):
- * skip collage + tour description, auto-pick the earliest bookable calendar day and first time slot,
- * optionally auto-select a highlighted pickup when `highlightedPickupLocationIds` is set on the page.
- */
-export const PARTNER_EMBEDDED_BOOKING_FLOW_UI_BASE: BookingFlowUiOptions = {
-  showCollage: false,
-  showTourDescription: false,
-  autoSelectFirstAvailableDate: true,
-  autoSelectFirstHighlightedPickup: true,
-};