@ticketboothapp/booking 1.2.24 → 1.2.25-rc.0

package/src/components/booking/TourDescription.tsx

@@ -0,0 +1,273 @@
+'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

@@ -0,0 +1,38 @@
+/**
+ * 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,
+};