@ticketboothapp/booking 0.1.20 → 0.1.22

package/src/components/PhoneInputWithCountry.module.css

@@ -0,0 +1,131 @@
+/* Clean, minimal phone input matching the reference design */
+.wrapper {
+  width: 100%;
+  position: relative;
+  overflow: visible;
+  --react-international-phone-height: 44px;
+  --react-international-phone-border-color: rgba(0, 0, 0, 0.12);
+  --react-international-phone-border-radius: 12px;
+  --react-international-phone-background-color: #fff;
+  --react-international-phone-text-color: var(--primary-text, #333);
+  --react-international-phone-font-size: 1rem;
+  --react-international-phone-dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+  --react-international-phone-dropdown-item-height: 40px;
+  --react-international-phone-dropdown-item-font-size: 14px;
+  --react-international-phone-dropdown-item-text-color: var(--primary-text, #333);
+  --react-international-phone-dropdown-item-dial-code-color: var(--grey-text, #6b7280);
+  --react-international-phone-selected-dropdown-item-background-color: #f5f5f5;
+  --react-international-phone-country-selector-border-color: transparent;
+  --react-international-phone-country-selector-background-color: transparent;
+}
+
+.phoneInput {
+  width: 100%;
+}
+
+/* Container: single unified border around flag + input */
+.wrapper :global(.react-international-phone-input-container) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border: 2px solid var(--accent-orange-10, rgba(0, 0, 0, 0.08));
+  border-radius: 12px;
+  background: var(--primary-background, #fff);
+  transition: border-color 0.15s;
+  overflow: visible;
+}
+
+/* Country selector needs overflow visible so dropdown can escape */
+.wrapper :global(.react-international-phone-country-selector) {
+  overflow: visible;
+}
+
+.wrapper:focus-within :global(.react-international-phone-input-container) {
+  border-color: var(--accent-orange);
+  outline: none;
+}
+
+/* Country selector button - no separate border, blends into container */
+.wrapper :global(.react-international-phone-country-selector-button) {
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  padding: 0 0.5rem 0 0.75rem;
+  height: 100%;
+}
+
+.wrapper :global(.react-international-phone-country-selector-button:hover) {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.wrapper :global(.react-international-phone-country-selector-button__dropdown-arrow) {
+  border-top-color: var(--grey-text, #6b7280);
+  margin-left: 0.25rem;
+}
+
+/* Input field */
+.wrapper :global(.react-international-phone-input) {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  border-radius: 0;
+  padding: 0.625rem 0.875rem;
+  font-size: 1rem;
+  font-family: inherit;
+  color: var(--primary-text, #333);
+  background: transparent;
+}
+
+.wrapper :global(.react-international-phone-input):focus {
+  outline: none;
+}
+
+.wrapper :global(.react-international-phone-input)::placeholder {
+  color: var(--grey-text, #878686);
+}
+
+/* Dropdown - floating panel BELOW the input, not inside */
+.wrapper :global(.react-international-phone-country-selector-dropdown),
+.dropdown {
+  position: absolute !important;
+  top: 100% !important;
+  left: 0 !important;
+  margin-top: 6px !important;
+  width: 100% !important;
+  min-width: 280px;
+  max-height: 280px;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+  background: #fff;
+  padding: 8px 0;
+  z-index: 1000;
+}
+
+.wrapper :global(.react-international-phone-country-selector-dropdown__list-item) {
+  padding: 0.5rem 1rem;
+  min-height: 40px;
+  cursor: pointer;
+}
+
+.wrapper :global(.react-international-phone-country-selector-dropdown__list-item):hover,
+.wrapper :global(.react-international-phone-country-selector-dropdown__list-item--focused) {
+  background: #f5f5f5;
+}
+
+.wrapper :global(.react-international-phone-country-selector-dropdown__list-item-country-name) {
+  font-size: 14px;
+  color: var(--primary-text, #333);
+}
+
+.wrapper :global(.react-international-phone-country-selector-dropdown__list-item-dial-code) {
+  font-size: 14px;
+  color: var(--grey-text, #6b7280);
+}
+
+/* Flag sizing */
+.wrapper :global(.react-international-phone-country-selector-button__flag-emoji),
+.wrapper :global(.react-international-phone-country-selector-dropdown__list-item-flag-emoji) {
+  width: 20px;
+  height: 14px;
+}

package/src/components/PhoneInputWithCountry.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import React from 'react';
+import { PhoneInput } from 'react-international-phone';
+import 'react-international-phone/style.css';
+import styles from './PhoneInputWithCountry.module.css';
+
+interface PhoneInputWithCountryProps {
+  id?: string;
+  value: string;
+  onChange: (value: string | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export default function PhoneInputWithCountryComponent({
+  id,
+  value,
+  onChange,
+  placeholder = 'Phone number',
+  disabled = false,
+  className,
+}: PhoneInputWithCountryProps) {
+  return (
+    <div className={`${styles.wrapper} ${className ?? ''}`}>
+      <PhoneInput
+        defaultCountry="ca"
+        preferredCountries={['ca', 'us']}
+        value={value || ''}
+        onChange={(phone) => onChange(phone || undefined)}
+        placeholder={placeholder}
+        disabled={disabled}
+        inputProps={{ id }}
+        className={styles.phoneInput}
+        countrySelectorStyleProps={{
+          dropdownStyleProps: {
+            className: styles.dropdown,
+          },
+        }}
+      />
+    </div>
+  );
+}

package/src/components/PickupLocationDialog.module.css

@@ -0,0 +1,360 @@
+/* Root class for scoping - nested selectors override Tailwind */
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+}
+
+.modal {
+  background: var(--primary-background, #fff);
+  border-radius: 24px;
+  max-width: 900px;
+  width: 100%;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+}
+
+.pickupDialogRoot .header {
+  display: grid !important;
+  grid-template-columns: auto 1fr auto !important;
+  align-items: center !important;
+  gap: 0.75rem !important;
+  padding: 1rem 0.75rem !important;
+  border-bottom: 1px solid #e5e7eb !important;
+}
+
+.pickupDialogRoot .headerSpacer {
+  display: block;
+  width: 2.5rem;
+  height: 2.5rem;
+  flex-shrink: 0;
+}
+
+.pickupDialogRoot .title {
+  font-family: 'Poppins', sans-serif !important;
+  font-weight: 800 !important;
+  font-size: 1.5rem !important;
+  color: var(--accent-orange, #e85a2e) !important;
+  margin: 0 !important;
+  justify-self: center !important;
+  text-align: center !important;
+}
+
+.pickupDialogRoot .closeBtn {
+  background: none !important;
+  border: none !important;
+  padding: 0.5rem !important;
+  cursor: pointer !important;
+  color: var(--grey-text, #6b7280) !important;
+}
+
+.pickupDialogRoot .closeBtn:hover {
+  color: var(--primary-text, #1f2937) !important;
+}
+
+.pickupDialogRoot .content {
+  padding: var(--spacing-large);
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: 1;
+  min-width: 0;
+}
+
+.pickupDialogRoot .loading,
+.pickupDialogRoot .error,
+.pickupDialogRoot .empty {
+  text-align: center;
+  padding: 2rem;
+  color: var(--grey-text, #6b7280);
+}
+
+.pickupDialogRoot .error {
+  color: #dc2626;
+}
+
+/* Current pickup section - shown when dialog opens */
+.pickupDialogRoot .currentPickupSection {
+  margin-bottom: 1.25rem;
+  padding: 1rem;
+  background: var(--accent-orange-10, rgba(0, 0, 0, 0.04));
+  border-radius: 12px;
+  border: 1px solid var(--accent-orange-10, rgba(0, 0, 0, 0.08));
+}
+
+.pickupDialogRoot .currentPickupLabel {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--grey-text, #6b7280);
+  margin: 0 0 0.25rem 0;
+}
+
+.pickupDialogRoot .currentPickupName {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--primary-text, #1f2937);
+  margin: 0 0 0.25rem 0;
+}
+
+.pickupDialogRoot .currentPickupTimes {
+  font-size: 0.875rem;
+  color: var(--grey-text, #6b7280);
+  margin: 0;
+}
+
+.pickupDialogRoot .selectorWrapper {
+  margin-bottom: 1.5rem;
+}
+
+/* Prevent input overflow - constrain width in flex/grid layouts */
+.pickupDialogRoot .selectorWrapperConstrained {
+  min-width: 0;
+  overflow: hidden;
+}
+
+.pickupDialogRoot .selectorWrapperConstrained > div {
+  min-width: 0;
+}
+
+/* Override Tailwind resets for input and filter pills when inside dialog */
+.pickupDialogRoot .selectorWrapper input[data-pickup-search],
+.pickupDialogRoot .selectorWrapper input[type="text"] {
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
+  padding: 0.5rem 1rem 0.5rem 2.5rem !important;
+  font-family: 'Figtree', sans-serif !important;
+  font-size: 1rem !important;
+  line-height: 1.5 !important;
+  color: #1c1917 !important;
+  background-color: #fff !important;
+  border: 1px solid #d6d3d1 !important;
+  border-radius: 0.5rem !important;
+}
+
+.pickupDialogRoot .selectorWrapper input::placeholder {
+  color: #a8a29e !important;
+}
+
+.pickupDialogRoot .selectorWrapper input:focus {
+  outline: none !important;
+  border-color: #78716c !important;
+}
+
+.pickupDialogRoot .cancelBtn {
+  border-color: var(--grey-text);
+  color: var(--grey-text);
+}
+
+/* Filter pills - match booking flow (PrivateShuttleBookingFlow / CheckoutForm) */
+.pickupDialogRoot .selectorWrapper [class*="filterPillsScroll"] {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: center !important;
+  gap: 0.5rem !important;
+  margin-bottom: 1rem !important;
+}
+
+.pickupDialogRoot .selectorWrapper [class*="filterPillsScroll"] > div:first-child {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  gap: 0.5rem !important;
+}
+
+.pickupDialogRoot .selectorWrapper [class*="filterPillsScroll"] button {
+  padding: 0.875rem 1.25rem !important;
+  font-family: 'Figtree', sans-serif !important;
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  border-radius: 9999px !important;
+  transition: background-color 0.15s, color 0.15s !important;
+  flex-shrink: 0 !important;
+  border: none !important;
+  cursor: pointer !important;
+}
+
+/* Unselected - stone/grey to match booking flow */
+.pickupDialogRoot .selectorWrapper [class*="filterPillsScroll"] button:not([class*="bg-emerald"]) {
+  background-color: #f5f5f4 !important;
+  color: #44403c !important;
+}
+
+.pickupDialogRoot .selectorWrapper [class*="filterPillsScroll"] button:hover:not([class*="bg-emerald"]) {
+  background-color: #e7e5e4 !important;
+}
+
+/* Selected - emerald green to match booking flow */
+.pickupDialogRoot .selectorWrapper [class*="filterPillsScroll"] button[class*="bg-emerald"] {
+  background-color: #059669 !important;
+  color: #fff !important;
+}
+
+.pickupDialogRoot .selectorWrapper [class*="filterPillsScroll"] button[class*="bg-emerald"]:hover {
+  background-color: #047857 !important;
+}
+
+.pickupDialogRoot .mapContainer {
+  margin-bottom: var(--spacing-medium);
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid var(--accent-orange-10, rgba(0, 0, 0, 0.08));
+}
+
+.map {
+  width: 100%;
+  height: 320px;
+}
+
+.mapFallback {
+  font-size: 0.875rem;
+  color: var(--grey-text);
+  margin-bottom: var(--spacing-medium);
+}
+
+.infoWindow {
+  padding: 0.25rem;
+  min-width: 200px;
+}
+
+.infoTitle {
+  font-weight: 600;
+  margin: 0 0 0.25rem 0;
+  font-size: 1rem;
+}
+
+.infoAddress {
+  font-size: 0.875rem;
+  color: var(--grey-text);
+  margin: 0 0 0.5rem 0;
+}
+
+.selectBtn {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background: var(--accent-orange, #e85a2e);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+.selectBtn:hover:not(:disabled) {
+  background: #e85a2e;
+  opacity: 0.9;
+}
+
+.selectBtn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: var(--spacing-large);
+}
+
+.listItem {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 1rem;
+  border: 2px solid var(--accent-orange-10, rgba(0, 0, 0, 0.08));
+  border-radius: 12px;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.listItem:hover {
+  border-color: var(--accent-orange, #e85a2e);
+  background: rgba(232, 90, 46, 0.05);
+}
+
+.listItemSelected {
+  border-color: var(--accent-orange, #e85a2e);
+  background: rgba(232, 90, 46, 0.08);
+}
+
+.listName {
+  font-weight: 600;
+  color: var(--primary-text, #1f2937);
+}
+
+.listAddress {
+  font-size: 0.875rem;
+  color: var(--grey-text);
+  margin-top: 0.25rem;
+}
+
+.pickupDialogRoot .footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding-top: var(--spacing-medium);
+  border-top: 1px solid #e5e7eb !important;
+}
+
+/* Itinerary preview before save */
+.pickupDialogRoot .itineraryPreview {
+  margin-top: 1rem;
+  padding: 1rem;
+  background: var(--accent-orange-10, rgba(0, 0, 0, 0.04));
+  border-radius: 12px;
+  border: 1px solid var(--accent-orange-10, rgba(0, 0, 0, 0.08));
+}
+
+.pickupDialogRoot .previewTitle {
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin: 0 0 0.5rem 0;
+  color: var(--primary-text, #1f2937);
+}
+
+.pickupDialogRoot .previewIntro {
+  font-size: 0.8125rem;
+  color: var(--grey-text, #6b7280);
+  margin: 0 0 0.75rem 0;
+}
+
+.pickupDialogRoot .previewList {
+  margin: 0;
+  padding-left: 1.25rem;
+  font-size: 0.8125rem;
+}
+
+.pickupDialogRoot .previewItem {
+  margin-bottom: 0.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+
+.pickupDialogRoot .previewOld {
+  color: var(--grey-text, #6b7280);
+  text-decoration: line-through;
+}
+
+.pickupDialogRoot .previewArrow {
+  color: var(--accent-orange, #e85a2e);
+  font-weight: 600;
+}
+
+.pickupDialogRoot .previewNew {
+  color: var(--primary-text, #1f2937);
+  font-weight: 500;
+}