@ticketboothapp/booking 0.1.18 → 0.1.20

package/src/components/PhoneInputWithCountry.module.css

@@ -1,131 +0,0 @@
-/* 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

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

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