@ticketboothapp/booking 1.2.123 → 1.2.125

package/src/components/booking/StandardBookingItineraryPanel.tsx

@@ -0,0 +1,125 @@
+import type { RefObject } from 'react';
+import { format, parseISO } from 'date-fns';
+import type {
+  Availability,
+  ItineraryDisplayStep,
+  PickupLocation,
+  ProductOption,
+  ReturnOption,
+} from '../../lib/booking-api';
+import type { NewBookingFlowProps } from './booking-flow-types';
+import { ItineraryBox } from './ItineraryBox';
+import { ItineraryPlaceholder } from './ItineraryPlaceholder';
+
+type TranslationFn = (key: string, params?: Record<string, string>) => string;
+
+export interface StandardBookingItineraryPanelProps {
+  selectedDate: string;
+  hideItineraryBox: boolean;
+  activeOptions: ProductOption[];
+  destinationsCount: number;
+  selectedAvailability: Availability | null;
+  selectedReturnOption: ReturnOption | null;
+  pickupLocationId: string | null;
+  pickupLocationSkipped: boolean;
+  pickupLocationsCount: number;
+  quantities: Record<string, number>;
+  email: string;
+  firstName: string;
+  lastName: string;
+  getBaseItineraryItems: () => ItineraryDisplayStep[] | null;
+  augmentItineraryItems: NewBookingFlowProps['augmentItineraryItems'];
+  isItinerarySticky: boolean;
+  stickyTopPx?: number;
+  isMobile: boolean;
+  useWindowScroll: boolean;
+  showTooltip: boolean;
+  selectedPickupLocation?: PickupLocation | null;
+  itineraryRef: RefObject<HTMLDivElement | null>;
+  t: TranslationFn;
+  onTooltipToggle: () => void;
+  onTooltipShow: (show: boolean) => void;
+}
+
+export function StandardBookingItineraryPanel({
+  selectedDate,
+  hideItineraryBox,
+  activeOptions,
+  destinationsCount,
+  selectedAvailability,
+  selectedReturnOption,
+  pickupLocationId,
+  pickupLocationSkipped,
+  pickupLocationsCount,
+  quantities,
+  email,
+  firstName,
+  lastName,
+  getBaseItineraryItems,
+  augmentItineraryItems,
+  isItinerarySticky,
+  stickyTopPx,
+  isMobile,
+  useWindowScroll,
+  showTooltip,
+  selectedPickupLocation,
+  itineraryRef,
+  t,
+  onTooltipToggle,
+  onTooltipShow,
+}: StandardBookingItineraryPanelProps) {
+  if (!selectedDate || hideItineraryBox) return null;
+
+  const hasItineraryAny =
+    activeOptions.some((option) => option.itinerary?.length) && destinationsCount > 0;
+  if (!hasItineraryAny) return null;
+
+  const formattedDate = format(parseISO(selectedDate), 'MMM d');
+  if (!selectedAvailability) {
+    return <ItineraryPlaceholder formattedDate={formattedDate} t={t} />;
+  }
+
+  const baseItineraryItems = getBaseItineraryItems();
+  const itineraryItems = augmentItineraryItems
+    ? augmentItineraryItems({
+        selectedDate,
+        selectedAvailability,
+        itineraryItems: baseItineraryItems,
+      })
+    : baseItineraryItems;
+  if (!itineraryItems || itineraryItems.length === 0) return null;
+
+  const hasTickets = Object.values(quantities).some((qty) => qty > 0);
+  const hasPickupChoice =
+    Boolean(pickupLocationId) || pickupLocationSkipped || pickupLocationsCount === 0;
+  const isBookingComplete = Boolean(
+    selectedAvailability &&
+      selectedReturnOption &&
+      hasPickupChoice &&
+      hasTickets &&
+      email.trim() !== '' &&
+      firstName.trim() !== '' &&
+      lastName.trim() !== '',
+  );
+
+  return (
+    <ItineraryBox
+      selectedDate={selectedDate}
+      formattedDate={formattedDate}
+      itineraryItems={itineraryItems}
+      isBookingComplete={isBookingComplete}
+      isItinerarySticky={isItinerarySticky}
+      stickyTopPx={stickyTopPx}
+      isMobile={isMobile}
+      useWindowScroll={useWindowScroll}
+      showTooltip={showTooltip}
+      selectedPickupLocation={selectedPickupLocation}
+      pickupLocationSkipped={pickupLocationSkipped}
+      pickupLocationsCount={pickupLocationsCount}
+      itineraryRef={itineraryRef}
+      t={t}
+      onTooltipToggle={onTooltipToggle}
+      onTooltipShow={onTooltipShow}
+    />
+  );
+}

package/src/components/booking/StandardBookingMediaIntro.tsx

@@ -0,0 +1,69 @@
+import { useBookingHost } from '../../runtime';
+import type { Locale } from '../../lib/booking/i18n/config';
+import type { VideoSources } from '../../constants/products';
+import { BookingFlowCollage } from './BookingFlowCollage';
+import { TourDescription } from './TourDescription';
+
+export interface StandardBookingMediaIntroProps {
+  productId?: string;
+  productName: string;
+  locale: Locale;
+  showCollage?: boolean;
+  showTourDescription?: boolean;
+  tourDescriptionDefaultExpanded?: boolean;
+}
+
+export function StandardBookingMediaIntro({
+  productId,
+  productName,
+  locale,
+  showCollage = true,
+  showTourDescription = true,
+  tourDescriptionDefaultExpanded = false,
+}: StandardBookingMediaIntroProps) {
+  const { strings: defaultStrings, catalog } = useBookingHost();
+
+  const config = productId
+    ? (catalog.getProductByIdOrSlug(productId) as {
+        display?: {
+          collageImageIds?: string[];
+          imageIds?: string[];
+        };
+      } | null)
+    : null;
+  const displayProducts = catalog.getProducts(defaultStrings) as Record<
+    string,
+    { id: string; videoUrl?: VideoSources }
+  >;
+  const displayProduct = Object.values(displayProducts).find((candidate) => candidate.id === productId);
+  const collageImageIds = config?.display?.collageImageIds ?? config?.display?.imageIds ?? [];
+  const hasVideo = !!displayProduct?.videoUrl;
+  const hasImages = collageImageIds.length > 0;
+
+  return (
+    <>
+      {productId && showCollage && (hasVideo || hasImages) && (
+        <div className="booking-collage-wrapper">
+          <BookingFlowCollage
+            video={displayProduct?.videoUrl}
+            videoPosterImageId={config?.display?.imageIds?.[0]}
+            imageIds={
+              hasImages
+                ? collageImageIds
+                : ([config?.display?.imageIds?.[0]].filter(Boolean) as string[])
+            }
+            altPrefix={productName}
+          />
+        </div>
+      )}
+
+      {showTourDescription && (
+        <TourDescription
+          productSlug={productId}
+          locale={locale}
+          defaultExpanded={tourDescriptionDefaultExpanded}
+        />
+      )}
+    </>
+  );
+}

package/src/components/booking/StandardBookingSelectionControlsPanel.tsx

@@ -0,0 +1,236 @@
+import type { ReactNode, RefObject } from 'react';
+import type {
+  AddOn,
+  Availability,
+  CancellationPolicyOption,
+  ItineraryDisplayStep,
+  ProductOption,
+  RefundTierOption,
+  ReturnOption,
+} from '../../lib/booking-api';
+import { AddOnsSection, type AddOnSelection } from './AddOnsSection';
+import { CancellationPolicySelector } from './CancellationPolicySelector';
+import type { NewBookingFlowProps } from './booking-flow-types';
+import type { Currency } from './CurrencySwitcher';
+import { PickupTimeSelector, type PickupTimeInfo } from './PickupTimeSelector';
+import { ReturnTimeSelector } from './ReturnTimeSelector';
+import { TicketSelector, type TicketRate } from './TicketSelector';
+
+type TranslationFn = (key: string, params?: Record<string, string | number>) => string;
+type AddOnSelectionsChangeHandler = (
+  selections: AddOnSelection[] | ((prev: AddOnSelection[]) => AddOnSelection[]),
+) => void;
+
+type ForcedCancellationPolicy = {
+  id: string;
+  label: string;
+  refundTiers?: RefundTierOption[];
+  changeWindowHoursBefore?: number | null;
+} | null;
+
+export interface StandardBookingSelectionControlsPanelProps {
+  selectedBookingOptionsHydrating: boolean;
+  selectedDate: string;
+  selectedAvailabilityMatchesDate: boolean;
+  selectedAvailability: Availability | null;
+  selectedReturnOption: ReturnOption | null;
+  pickupTimes: PickupTimeInfo[];
+  optionsMap: Map<string, ProductOption>;
+  hasAnyMostPopular: boolean;
+  isAdmin: boolean;
+  pickupLocationSkipped: boolean;
+  t: TranslationFn;
+  onTimeSelect: (availability: Availability) => void;
+  returnOptions: ReturnOption[];
+  selectedReturnOptionForDisplay: ReturnOption | null;
+  onSelectedReturnOptionChange: (option: ReturnOption) => void;
+  getStaySummary: (returnDateTime: Date) => string | null;
+  companyTimezone: string;
+  currency: Currency;
+  locale: string;
+  afterItinerary: NewBookingFlowProps['afterItinerary'];
+  getItineraryItems: () => ItineraryDisplayStep[] | null;
+  beforeCancellationPolicy?: ReactNode;
+  cancellationPolicies?: CancellationPolicyOption[];
+  forcedCancellationPolicy: ForcedCancellationPolicy;
+  cancellationPolicyId: string | null;
+  cancellationPolicyRef: RefObject<HTMLDivElement | null>;
+  cancellationPolicySectionLabel?: string;
+  onCancellationPolicySelect: (policyId: string) => void;
+  pricing: TicketRate[];
+  quantities: Record<string, number>;
+  totalQuantity: number;
+  selectedVacancies: number;
+  pickupVacancies: number;
+  returnVacancies: number | null;
+  isSimplifiedPricingView: boolean;
+  onQuantityChange: (category: string, delta: number) => void;
+  addOns: AddOn[];
+  addOnSelections: AddOnSelection[];
+  onAddOnSelectionsChange: AddOnSelectionsChangeHandler;
+}
+
+export function StandardBookingSelectionControlsPanel({
+  selectedBookingOptionsHydrating,
+  selectedDate,
+  selectedAvailabilityMatchesDate,
+  selectedAvailability,
+  selectedReturnOption,
+  pickupTimes,
+  optionsMap,
+  hasAnyMostPopular,
+  isAdmin,
+  pickupLocationSkipped,
+  t,
+  onTimeSelect,
+  returnOptions,
+  selectedReturnOptionForDisplay,
+  onSelectedReturnOptionChange,
+  getStaySummary,
+  companyTimezone,
+  currency,
+  locale,
+  afterItinerary,
+  getItineraryItems,
+  beforeCancellationPolicy,
+  cancellationPolicies,
+  forcedCancellationPolicy,
+  cancellationPolicyId,
+  cancellationPolicyRef,
+  cancellationPolicySectionLabel,
+  onCancellationPolicySelect,
+  pricing,
+  quantities,
+  totalQuantity,
+  selectedVacancies,
+  pickupVacancies,
+  returnVacancies,
+  isSimplifiedPricingView,
+  onQuantityChange,
+  addOns,
+  addOnSelections,
+  onAddOnSelectionsChange,
+}: StandardBookingSelectionControlsPanelProps) {
+  const showReturnSelector =
+    !selectedBookingOptionsHydrating &&
+    selectedAvailabilityMatchesDate &&
+    selectedAvailability &&
+    !selectedAvailability.isSummary &&
+    selectedAvailability.returnOptions &&
+    selectedAvailability.returnOptions.length > 0;
+
+  const showCancellationPolicy =
+    !selectedBookingOptionsHydrating &&
+    selectedAvailabilityMatchesDate &&
+    selectedAvailability &&
+    ((cancellationPolicies?.length ?? 0) > 0 || forcedCancellationPolicy);
+
+  return (
+    <>
+      {selectedDate ? (
+        <PickupTimeSelector
+          pickupTimes={pickupTimes}
+          selectedDateTime={selectedAvailability?.dateTime ?? null}
+          selectedTicketCount={totalQuantity}
+          optionsMap={optionsMap}
+          hasAnyMostPopular={hasAnyMostPopular}
+          isAdmin={isAdmin}
+          pickupLocationSkipped={pickupLocationSkipped}
+          t={t}
+          onTimeSelect={onTimeSelect}
+        />
+      ) : null}
+
+      {selectedBookingOptionsHydrating ? (
+        <div className="flex items-center justify-center gap-3 rounded-lg border border-stone-200 bg-white p-4 text-stone-600">
+          <div className="booking-loading-spinner" aria-hidden />
+          <div>{t('booking.loadingTimes')}</div>
+        </div>
+      ) : null}
+
+      {showReturnSelector ? (
+        <ReturnTimeSelector
+          returnOptions={returnOptions}
+          selectedReturnOption={selectedReturnOptionForDisplay}
+          selectedTicketCount={totalQuantity}
+          companyTimezone={companyTimezone}
+          currency={currency}
+          locale={locale}
+          isAdmin={isAdmin}
+          t={t}
+          onReturnSelect={(option) => {
+            const raw = selectedAvailability.returnOptions?.find(
+              (opt) => opt.returnAvailabilityId === option.returnAvailabilityId,
+            );
+            onSelectedReturnOptionChange(raw ?? option);
+          }}
+          getStaySummary={getStaySummary}
+        />
+      ) : null}
+
+      {!selectedBookingOptionsHydrating && selectedDate && selectedAvailability && afterItinerary
+        ? typeof afterItinerary === 'function'
+          ? afterItinerary({
+              selectedDate,
+              selectedAvailability,
+              itineraryItems: getItineraryItems(),
+            })
+          : afterItinerary
+        : null}
+
+      {showCancellationPolicy ? (
+        <div ref={cancellationPolicyRef as RefObject<HTMLDivElement>}>
+          {beforeCancellationPolicy}
+          <CancellationPolicySelector
+            policies={[...(cancellationPolicies ?? [])].sort((a, b) => {
+              const feeA = a.feeByCurrency[currency] ?? 0;
+              const feeB = b.feeByCurrency[currency] ?? 0;
+              return feeA - feeB;
+            })}
+            selectedPolicyId={cancellationPolicyId}
+            currency={currency}
+            locale={locale}
+            t={t}
+            onPolicySelect={onCancellationPolicySelect}
+            forcedPolicy={forcedCancellationPolicy}
+            sectionLabel={cancellationPolicySectionLabel}
+          />
+        </div>
+      ) : null}
+
+      {!selectedBookingOptionsHydrating && selectedAvailability ? (
+        <TicketSelector
+          pricing={pricing}
+          quantities={quantities}
+          totalQuantity={totalQuantity}
+          selectedVacancies={selectedVacancies}
+          companyTimezone={companyTimezone}
+          pickupDateTime={selectedAvailability.dateTime}
+          pickupVacancies={pickupVacancies}
+          returnDateTime={selectedReturnOption?.dateTime ?? null}
+          returnVacancies={returnVacancies}
+          resourceCount={selectedReturnOption ? null : (selectedAvailability.resourceCount ?? null)}
+          currency={currency}
+          locale={locale}
+          isAdmin={isAdmin}
+          isSimplifiedPricingView={isSimplifiedPricingView}
+          t={t}
+          onQuantityChange={onQuantityChange}
+          minimumQuantities={undefined}
+          ticketUnitFloorByCategory={undefined}
+        />
+      ) : null}
+
+      {!selectedBookingOptionsHydrating && selectedAvailability && totalQuantity > 0 && addOns.length > 0 ? (
+        <AddOnsSection
+          addOns={addOns}
+          addOnSelections={addOnSelections}
+          currency={currency}
+          locale={locale}
+          onSelectionsChange={onAddOnSelectionsChange}
+          minimumTotalByAddOnId={undefined}
+        />
+      ) : null}
+    </>
+  );
+}

package/src/components/booking/admin-change-customer-quote-runner.ts

@@ -0,0 +1,119 @@
+import {
+  confirmFreeChangeBooking,
+  type AdminFeAuthoritativeReceipt,
+  type Availability,
+  type ReturnOption,
+} from '../../lib/booking-api';
+import {
+  normalizeNearZeroOwed,
+  roundMoney,
+} from '../../lib/booking/change-flow-pricing';
+import type { Currency } from './CurrencySwitcher';
+import {
+  quoteAdminChangeForCheckout,
+  type ChangeCheckoutQuoteResult,
+} from './change-booking-checkout-quote-runner';
+import type {
+  AdminChangeAddOnSelection,
+  AdminChangeBookingItem,
+  AdminChangeProviderAdditionalAdjustment,
+} from './admin-change-provider-payload';
+
+export interface QuoteAdminCustomerChangeForCheckoutParams {
+  bookingReference?: string | null;
+  lastName: string;
+  parentProductId: string;
+  availabilityProductOptionId: string;
+  selectedAvailability: Availability;
+  pickupLocationId: string | null;
+  selectedReturnOption: ReturnOption | null;
+  bookingItems: AdminChangeBookingItem[];
+  addOnSelections: AdminChangeAddOnSelection[];
+  manualLineAdjustments: AdminChangeProviderAdditionalAdjustment[];
+  useAdminFeAuthoritativeQuote: boolean;
+  adminFeAuthoritativeReceipt: AdminFeAuthoritativeReceipt;
+  originalReceiptTotal?: number | null;
+  changeFlowClientEstimateDue: number;
+  latestServerDisplayTotal?: number | null;
+  changeFlowNewBookingTotal: number;
+  effectiveSubtotalForCheckout: number;
+  effectiveTax: number;
+  changeFlowInitialTicketCount: number;
+  previousAvailabilityId?: string | null;
+  previousReturnAvailabilityId?: string | null;
+  currency: Currency;
+}
+
+export async function quoteAdminCustomerChangeForCheckout({
+  bookingReference,
+  lastName,
+  parentProductId,
+  availabilityProductOptionId,
+  selectedAvailability,
+  pickupLocationId,
+  selectedReturnOption,
+  bookingItems,
+  addOnSelections,
+  manualLineAdjustments,
+  useAdminFeAuthoritativeQuote,
+  adminFeAuthoritativeReceipt,
+  originalReceiptTotal,
+  changeFlowClientEstimateDue,
+  latestServerDisplayTotal,
+  changeFlowNewBookingTotal,
+  effectiveSubtotalForCheckout,
+  effectiveTax,
+  changeFlowInitialTicketCount,
+  previousAvailabilityId,
+  previousReturnAvailabilityId,
+  currency,
+}: QuoteAdminCustomerChangeForCheckoutParams): Promise<ChangeCheckoutQuoteResult> {
+  const adminFeAmountDueMajorUnits = normalizeNearZeroOwed(
+    roundMoney(
+      originalReceiptTotal != null
+        ? adminFeAuthoritativeReceipt.total - originalReceiptTotal
+        : changeFlowClientEstimateDue,
+    ),
+  );
+
+  return quoteAdminChangeForCheckout({
+    bookingReference,
+    lastName,
+    parentProductId,
+    availabilityProductOptionId,
+    dateTime: selectedAvailability.dateTime,
+    availabilityId: selectedAvailability.availabilityId || null,
+    pickupLocationId: pickupLocationId || null,
+    returnAvailabilityId: selectedReturnOption?.returnAvailabilityId ?? null,
+    bookingItems,
+    addOnSelections,
+    manualLineAdjustments,
+    clientProposedTotal:
+      useAdminFeAuthoritativeQuote
+        ? adminFeAuthoritativeReceipt.total
+        : (latestServerDisplayTotal ?? changeFlowNewBookingTotal),
+    capacitySeatCredit: {
+      enabled: true,
+      previousPassengerCount: changeFlowInitialTicketCount,
+      previousAvailabilityId: previousAvailabilityId ?? null,
+      previousReturnAvailabilityId: previousReturnAvailabilityId ?? null,
+    },
+    fallbackCart: {
+      total: changeFlowNewBookingTotal,
+      subtotal: effectiveSubtotalForCheckout,
+      tax: effectiveTax,
+    },
+    currency,
+    originalReceiptTotal: originalReceiptTotal ?? 0,
+    useAdminFeAuthoritativeQuote,
+    adminFeAuthoritativeReceipt,
+    adminFeAmountDueMajorUnits,
+  });
+}
+
+export async function confirmFreeAdminCustomerChange(changeIntentId: string): Promise<void> {
+  const freeConfirm = await confirmFreeChangeBooking(changeIntentId);
+  if (freeConfirm.status && freeConfirm.status !== 'APPLIED') {
+    throw new Error('We could not apply this booking change yet. Please try again.');
+  }
+}

package/src/components/booking/admin-change-flow-state-helpers.ts

@@ -0,0 +1,124 @@
+import { formatInTimeZone } from 'date-fns-tz';
+import type { Availability, Product } from '../../lib/booking-api';
+import {
+  effectiveProductOptionIdForChangeFlow,
+  normalizeProductOptionIdForChangeFlow,
+} from '../../lib/booking/product-option-id';
+import { parseAvailabilityDateTime } from './change-booking-flow-helpers';
+
+type ProductOption = NonNullable<Product['options']>[number];
+
+export function isAdminManualOverrideEligibleLine(line: {
+  editable: boolean;
+  type?: string;
+  label?: string;
+}): boolean {
+  if (!line.editable) return false;
+  const type = (line.type ?? '').toUpperCase();
+  const label = (line.label ?? '').toLowerCase();
+  const isPromoLikeType =
+    type.includes('PROMO') ||
+    type.includes('DISCOUNT') ||
+    type.includes('VOUCHER') ||
+    type.includes('GIFT');
+  const isPromoLikeLabel =
+    label.includes('promo') ||
+    label.includes('discount') ||
+    label.includes('voucher') ||
+    label.includes('gift');
+  return !(isPromoLikeType || isPromoLikeLabel);
+}
+
+export function resolveChangeFlowOriginalDate(
+  initialDateTime: string | null | undefined,
+  companyTimezone: string
+): string | null {
+  if (!initialDateTime?.trim()) return null;
+  try {
+    return formatInTimeZone(
+      parseAvailabilityDateTime(initialDateTime.trim()),
+      companyTimezone,
+      'yyyy-MM-dd',
+    );
+  } catch {
+    return null;
+  }
+}
+
+export function buildChangeBookingMinimumQuantities({
+  isCustomerSelfServeChange,
+  isAdmin,
+  bookingItems,
+}: {
+  isCustomerSelfServeChange: boolean;
+  isAdmin: boolean;
+  bookingItems?: Array<{ category?: string | null; count?: number | null }> | null;
+}): Record<string, number> | undefined {
+  if (!isCustomerSelfServeChange || !bookingItems?.length) return undefined;
+  if (isAdmin) return undefined;
+
+  const minimums: Record<string, number> = {};
+  for (const item of bookingItems) {
+    const key = item.category?.trim();
+    if (!key) continue;
+    minimums[key] = Math.max(0, Number(item.count) || 0);
+  }
+  return minimums;
+}
+
+export function resolveInitialChangeProductOptionId({
+  initialProductId,
+  initialProductOptionId,
+  initialAvailabilityId,
+  initialDateTime,
+  availabilities,
+  activeOptions,
+  companyTimezone,
+}: {
+  initialProductId?: string | null;
+  initialProductOptionId?: string | null;
+  initialAvailabilityId?: string | null;
+  initialDateTime?: string | null;
+  availabilities: Availability[];
+  activeOptions: ProductOption[];
+  companyTimezone: string;
+}): string | null {
+  const fromFields = effectiveProductOptionIdForChangeFlow({
+    productId: initialProductId,
+    productOptionId: initialProductOptionId,
+  });
+  if (fromFields) return fromFields;
+
+  const availabilityId = initialAvailabilityId?.trim();
+  if (availabilityId) {
+    for (const availability of availabilities) {
+      if (availability.availabilityId === availabilityId) {
+        const productOptionId = normalizeProductOptionIdForChangeFlow(availability.productOptionId);
+        if (productOptionId) return productOptionId;
+      }
+    }
+  }
+
+  if (initialDateTime?.trim()) {
+    try {
+      const initialDate = parseAvailabilityDateTime(initialDateTime.trim());
+      const initialMs = initialDate.getTime();
+      const initialDay = formatInTimeZone(initialDate, companyTimezone, 'yyyy-MM-dd');
+      for (const availability of availabilities) {
+        const availabilityDate = parseAvailabilityDateTime(availability.dateTime);
+        if (formatInTimeZone(availabilityDate, companyTimezone, 'yyyy-MM-dd') !== initialDay) continue;
+        if (availabilityDate.getTime() !== initialMs) continue;
+        const productOptionId = normalizeProductOptionIdForChangeFlow(availability.productOptionId);
+        if (productOptionId) return productOptionId;
+      }
+    } catch {
+      /* ignore */
+    }
+  }
+
+  if (activeOptions.length === 1) {
+    return normalizeProductOptionIdForChangeFlow(activeOptions[0].optionId);
+  }
+
+  return null;
+}