more-apartments-astro-integration 1.0.1

package/src/components/PropertyBookingWidget.astro

@@ -0,0 +1,169 @@
+---
+import { generateBookingUrl } from '../index.js';
+
+interface Props {
+  propertyExternalId: number;
+  propertyName?: string;
+  basePrice?: number;
+  arrival?: string;
+  departure?: string;
+  guests?: number;
+  buttonText?: string;
+  className?: string;
+}
+
+const { 
+  propertyExternalId,
+  propertyName,
+  basePrice,
+  arrival,
+  departure,
+  guests = 2,
+  buttonText = 'Book Now',
+  className = ''
+} = Astro.props;
+
+// Generate booking URL if dates are provided
+let bookingUrl: string | null = null;
+if (arrival && departure) {
+  bookingUrl = generateBookingUrl(propertyExternalId, arrival, departure, guests);
+}
+---
+
+<div class={`property-booking-widget ${className}`.trim()}>
+  {propertyName && <h3 class="widget-title">{propertyName}</h3>}
+  
+  <div class="booking-info">
+    {basePrice && (
+      <div class="price-info">
+        <span class="price">${basePrice}</span>
+        <span class="price-label">per night</span>
+      </div>
+    )}
+    
+    <div class="guest-info">
+      <span class="guests">{guests} guest{guests !== 1 ? 's' : ''}</span>
+    </div>
+  </div>
+  
+  <div class="booking-action">
+    {bookingUrl ? (
+      <a 
+        href={bookingUrl} 
+        class="booking-button booking-button--available"
+        data-property-id={propertyExternalId}
+        data-arrival={arrival}
+        data-departure={departure}
+        data-guests={guests}
+      >
+        {buttonText}
+      </a>
+    ) : (
+      <button 
+        class="booking-button booking-button--select-dates"
+        onclick="alert('Please select arrival and departure dates to book this property')"
+        data-property-id={propertyExternalId}
+      >
+        Select Dates to Book
+      </button>
+    )}
+  </div>
+  
+  {arrival && departure && (
+    <div class="selected-dates">
+      <small>
+        {new Date(arrival).toLocaleDateString()} - {new Date(departure).toLocaleDateString()}
+      </small>
+    </div>
+  )}
+</div>
+
+<style>
+  .property-booking-widget {
+    border: 1px solid #e1e5e9;
+    border-radius: 8px;
+    padding: 1.5rem;
+    background: white;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  }
+
+  .widget-title {
+    margin: 0 0 1rem 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #1f2937;
+  }
+
+  .booking-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #e5e7eb;
+  }
+
+  .price-info {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+  }
+
+  .price {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #1f2937;
+  }
+
+  .price-label {
+    color: #6b7280;
+    font-size: 0.875rem;
+  }
+
+  .guest-info {
+    color: #6b7280;
+    font-size: 0.875rem;
+  }
+
+  .booking-action {
+    margin-bottom: 1rem;
+  }
+
+  .booking-button {
+    width: 100%;
+    padding: 0.875rem 1.5rem;
+    border-radius: 6px;
+    font-weight: 600;
+    font-size: 1rem;
+    text-decoration: none;
+    text-align: center;
+    display: inline-block;
+    cursor: pointer;
+    border: none;
+    transition: all 0.2s;
+  }
+
+  .booking-button--available {
+    background-color: #059669;
+    color: white;
+  }
+
+  .booking-button--available:hover {
+    background-color: #047857;
+  }
+
+  .booking-button--select-dates {
+    background-color: #f3f4f6;
+    color: #4b5563;
+    border: 1px solid #d1d5db;
+  }
+
+  .booking-button--select-dates:hover {
+    background-color: #e5e7eb;
+  }
+
+  .selected-dates {
+    text-align: center;
+    color: #6b7280;
+  }
+</style>

package/src/components/PropertySearchGrid.astro

@@ -0,0 +1,315 @@
+---
+import { searchProperties } from '../index.js';
+import PropertyBookingWidget from './PropertyBookingWidget.astro';
+import client from 'virtual:more-apartments/client';
+
+interface Props {
+  // Search parameters
+  arrival?: string;
+  departure?: string;
+  guests?: number;
+  destination?: string;
+  segment?: string;
+  
+  // Display options
+  showBookingWidgets?: boolean;
+  maxResults?: number;
+  className?: string;
+}
+
+const {
+  arrival,
+  departure,
+  guests,
+  destination,
+  segment,
+  showBookingWidgets = false,
+  maxResults,
+  className = ''
+} = Astro.props;
+
+// Build search parameters
+const searchParams: any = {};
+if (arrival) searchParams.arrival = arrival;
+if (departure) searchParams.departure = departure;
+if (guests) searchParams.guests = guests;
+if (destination) searchParams.destination = destination;
+if (segment) searchParams.segment = segment;
+
+// Search for properties
+let properties = await searchProperties(client, searchParams);
+
+// Apply maxResults limit if specified
+if (maxResults && properties.length > maxResults) {
+  properties = properties.slice(0, maxResults);
+}
+
+const hasSearchParams = Object.keys(searchParams).length > 0;
+---
+
+<div class={`property-search-grid ${className}`.trim()}>
+  {hasSearchParams && (
+    <div class="search-summary">
+      <h2>Search Results</h2>
+      <div class="search-details">
+        {destination && <span class="search-param">📍 {destination}</span>}
+        {arrival && departure && (
+          <span class="search-param">
+            📅 {new Date(arrival).toLocaleDateString()} - {new Date(departure).toLocaleDateString()}
+          </span>
+        )}
+        {guests && <span class="search-param">👥 {guests} guest{guests !== 1 ? 's' : ''}</span>}
+      </div>
+      <p class="results-count">
+        {properties.length === 0 ? 'No properties found' : `${properties.length} propert${properties.length !== 1 ? 'ies' : 'y'} found`}
+      </p>
+    </div>
+  )}
+
+  {properties.length === 0 ? (
+    <div class="no-results">
+      <div class="no-results-content">
+        <h3>No Properties Found</h3>
+        <p>Try adjusting your search criteria:</p>
+        <ul>
+          <li>Check different dates</li>
+          <li>Try a different destination</li>
+          <li>Adjust the number of guests</li>
+        </ul>
+      </div>
+    </div>
+  ) : (
+    <div class="properties-grid">
+      {properties.map((property) => (
+        <div class="property-card" key={property.id}>
+          <div class="property-header">
+            <h3 class="property-name">
+              <a href={`/properties/${property.slug}`}>
+                {property.name}
+              </a>
+            </h3>
+            <p class="property-type">{property.type}</p>
+          </div>
+          
+          <div class="property-details">
+            <div class="location">
+              <span class="city">{property.city}</span>
+              {property.country && <span class="country">, {property.country}</span>}
+            </div>
+            
+            <div class="occupancy">
+              <span>Up to {property.max_occupancy} guests</span>
+            </div>
+            
+            {property.description && (
+              <p class="description">
+                {property.description.length > 150 
+                  ? `${property.description.substring(0, 150)}...`
+                  : property.description
+                }
+              </p>
+            )}
+          </div>
+
+          {showBookingWidgets && arrival && departure && (
+            <div class="booking-widget-container">
+              <PropertyBookingWidget
+                propertyExternalId={property.external_id || property.id}
+                propertyName={property.name}
+                arrival={arrival}
+                departure={departure}
+                guests={guests || 2}
+                buttonText="Book Now"
+                className="compact-widget"
+              />
+            </div>
+          )}
+          
+          {!showBookingWidgets && (
+            <div class="property-actions">
+              <a href={`/properties/${property.slug}`} class="view-details-btn">
+                View Details
+              </a>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  )}
+</div>
+
+<style>
+  .property-search-grid {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1rem;
+  }
+
+  .search-summary {
+    margin-bottom: 2rem;
+    padding: 1.5rem;
+    background: #f8fafc;
+    border-radius: 8px;
+    border-left: 4px solid #3b82f6;
+  }
+
+  .search-summary h2 {
+    margin: 0 0 1rem 0;
+    color: #1f2937;
+    font-size: 1.5rem;
+  }
+
+  .search-details {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .search-param {
+    background: white;
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.875rem;
+    border: 1px solid #e5e7eb;
+  }
+
+  .results-count {
+    margin: 0;
+    color: #6b7280;
+    font-weight: 500;
+  }
+
+  .no-results {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 300px;
+  }
+
+  .no-results-content {
+    text-align: center;
+    max-width: 400px;
+  }
+
+  .no-results-content h3 {
+    color: #374151;
+    margin-bottom: 1rem;
+  }
+
+  .no-results-content ul {
+    text-align: left;
+    color: #6b7280;
+  }
+
+  .properties-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 1.5rem;
+  }
+
+  .property-card {
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 1.5rem;
+    transition: box-shadow 0.2s;
+  }
+
+  .property-card:hover {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+
+  .property-header {
+    margin-bottom: 1rem;
+  }
+
+  .property-name {
+    margin: 0 0 0.25rem 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+
+  .property-name a {
+    color: #1f2937;
+    text-decoration: none;
+  }
+
+  .property-name a:hover {
+    color: #3b82f6;
+  }
+
+  .property-type {
+    margin: 0;
+    color: #6b7280;
+    font-size: 0.875rem;
+    text-transform: capitalize;
+  }
+
+  .property-details {
+    margin-bottom: 1.5rem;
+  }
+
+  .location {
+    margin-bottom: 0.5rem;
+    color: #4b5563;
+    font-size: 0.875rem;
+  }
+
+  .occupancy {
+    margin-bottom: 1rem;
+    color: #6b7280;
+    font-size: 0.875rem;
+  }
+
+  .description {
+    margin: 0;
+    color: #4b5563;
+    line-height: 1.5;
+    font-size: 0.875rem;
+  }
+
+  .booking-widget-container {
+    margin-top: 1rem;
+  }
+
+  :global(.compact-widget) {
+    padding: 1rem;
+  }
+
+  :global(.compact-widget .widget-title) {
+    font-size: 1rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .property-actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .view-details-btn {
+    background: #3b82f6;
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    text-decoration: none;
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition: background-color 0.2s;
+  }
+
+  .view-details-btn:hover {
+    background: #2563eb;
+  }
+
+  @media (max-width: 768px) {
+    .properties-grid {
+      grid-template-columns: 1fr;
+    }
+    
+    .search-details {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+</style>

package/src/pages/booking-complete.astro

@@ -0,0 +1,155 @@
+---
+// This is an example booking complete page
+// Users can copy this to their Astro project's src/pages/ directory
+const title = 'Booking Complete';
+---
+
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{title}</title>
+    <style>
+      body {
+        font-family: system-ui, -apple-system, sans-serif;
+        background: #f9fafb;
+        margin: 0;
+        padding: 0;
+      }
+      .container {
+        max-width: 600px;
+        margin: 0 auto;
+        padding: 2rem 1rem;
+        text-align: center;
+      }
+      .success-card {
+        background: white;
+        border-radius: 12px;
+        padding: 3rem 2rem;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      }
+      .success-icon {
+        width: 64px;
+        height: 64px;
+        background: #10b981;
+        border-radius: 50%;
+        margin: 0 auto 1.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .success-icon svg {
+        width: 32px;
+        height: 32px;
+        color: white;
+      }
+      .success-title {
+        font-size: 2rem;
+        font-weight: 700;
+        color: #111827;
+        margin: 0 0 1rem 0;
+      }
+      .success-message {
+        color: #6b7280;
+        font-size: 1.125rem;
+        line-height: 1.6;
+        margin: 0 0 2rem 0;
+      }
+      .next-steps {
+        text-align: left;
+        margin: 2rem 0;
+        padding: 1.5rem;
+        background: #f3f4f6;
+        border-radius: 8px;
+      }
+      .next-steps h3 {
+        margin: 0 0 1rem 0;
+        color: #374151;
+      }
+      .next-steps ul {
+        margin: 0;
+        padding-left: 1.5rem;
+        color: #4b5563;
+      }
+      .next-steps li {
+        margin-bottom: 0.5rem;
+      }
+      .button-group {
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+        flex-wrap: wrap;
+      }
+      .button {
+        padding: 0.75rem 1.5rem;
+        border-radius: 6px;
+        font-weight: 600;
+        text-decoration: none;
+        display: inline-block;
+        transition: all 0.2s;
+      }
+      .button-primary {
+        background: #2563eb;
+        color: white;
+      }
+      .button-primary:hover {
+        background: #1d4ed8;
+      }
+      .button-secondary {
+        background: white;
+        color: #374151;
+        border: 1px solid #d1d5db;
+      }
+      .button-secondary:hover {
+        background: #f9fafb;
+      }
+      .contact-info {
+        margin-top: 2rem;
+        padding-top: 2rem;
+        border-top: 1px solid #e5e7eb;
+        font-size: 0.875rem;
+        color: #6b7280;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="success-card">
+        <div class="success-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+          </svg>
+        </div>
+        
+        <h1 class="success-title">Booking Confirmed!</h1>
+        
+        <p class="success-message">
+          Thank you for your reservation! Your booking has been successfully processed and confirmed.
+          You should receive a confirmation email shortly with all the details of your stay.
+        </p>
+
+        <div class="next-steps">
+          <h3>What happens next?</h3>
+          <ul>
+            <li>You'll receive a confirmation email within the next few minutes</li>
+            <li>Check-in instructions will be sent 24 hours before your arrival</li>
+            <li>If you have any questions, don't hesitate to contact us</li>
+          </ul>
+        </div>
+
+        <div class="button-group">
+          <a href="/" class="button button-primary">
+            Return to Home
+          </a>
+          <a href="/properties" class="button button-secondary">
+            View More Properties
+          </a>
+        </div>
+
+        <div class="contact-info">
+          <p>Need help? Contact us at support@more-apartments.com</p>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>