keystone-design-bootstrap 1.0.48 → 1.0.49

package/src/design_system/sections/offers-grid.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import React from 'react';
+import { PhotoWithFallback } from '../elements';
+import type { OfferPublic } from '../../lib/server-api';
+import type { WebsitePhotos } from '../../types/api/website-photos';
+import type { CompanyInformation } from '../../types/api/company-information';
+
+export interface OffersGridProps {
+  offers: OfferPublic[] | null;
+  title?: string;
+  subtitle?: string;
+  websitePhotos?: WebsitePhotos | null;
+  companyInformation?: CompanyInformation | null;
+  backgroundColor?: string;
+}
+
+/** Full offers page: grid of cards with photo or gradient fallback (view-only). */
+export function OffersGrid({
+  offers,
+  title = 'Offers',
+  subtitle = 'See our current offers.',
+  websitePhotos,
+  companyInformation,
+  backgroundColor = 'bg-primary',
+}: OffersGridProps) {
+  const list = Array.isArray(offers) ? offers : [];
+  const displayList = list.filter((o) => !o.expired);
+
+  return (
+    <section className={`${backgroundColor} py-16 md:py-24`}>
+      <div className="mx-auto max-w-container px-4 md:px-8">
+        <div className="mx-auto max-w-3xl text-center">
+          <h1 className="text-display-sm font-semibold text-primary md:text-display-md">
+            {title}
+          </h1>
+          {subtitle && (
+            <p className="mt-4 text-lg text-tertiary md:mt-5 md:text-xl">{subtitle}</p>
+          )}
+        </div>
+
+        {displayList.length > 0 ? (
+          <ul className="mx-auto mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+            {displayList.map((offer, index) => (
+              <li key={offer.id}>
+                <OffersGridCard
+                  offer={offer}
+                  index={index}
+                  websitePhotos={websitePhotos}
+                  companyInformation={companyInformation}
+                />
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <div className="mx-auto mt-12 max-w-md text-center">
+            <p className="text-tertiary">No offers available at the moment. Check back later.</p>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+function OffersGridCard({
+  offer,
+  index,
+  websitePhotos,
+  companyInformation,
+}: {
+  offer: OfferPublic;
+  index: number;
+  websitePhotos?: WebsitePhotos | null;
+  companyInformation?: CompanyInformation | null;
+}) {
+  return (
+    <article className="flex flex-col overflow-hidden rounded-2xl border border-secondary bg-secondary/30">
+      <div className="aspect-[4/3] w-full overflow-hidden">
+        <PhotoWithFallback
+          item={undefined}
+          fallbackId={offer.id ?? index}
+          alt={offer.name}
+          className="size-full object-cover"
+          websitePhotos={websitePhotos}
+          companyInformation={companyInformation}
+        />
+      </div>
+      <div className="flex flex-1 flex-col gap-3 p-5 md:p-6">
+        <h2 className="text-lg font-semibold text-primary">{offer.name}</h2>
+        {offer.description && (
+          <p className="text-tertiary line-clamp-2">{offer.description}</p>
+        )}
+        {offer.value_terms && (
+          <p className="text-sm font-medium text-primary">{offer.value_terms}</p>
+        )}
+        {offer.expires_at && (() => {
+          const d = new Date(offer.expires_at);
+          if (Number.isNaN(d.getTime())) return null;
+          return (
+            <p className="text-xs text-tertiary">
+              Expires {d.toLocaleDateString()}
+            </p>
+          );
+        })()}
+      </div>
+    </article>
+  );
+}

package/src/design_system/sections/offers-section.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import type { OfferPublic } from '../../lib/server-api';
+import type { WebsitePhotos } from '../../types/api/website-photos';
+import type { CompanyInformation } from '../../types/api/company-information';
+import { Button } from '../elements';
+
+export interface OffersSectionProps {
+  offers: OfferPublic[] | null;
+  title?: string;
+  subtitle?: string;
+  maxOffers?: number;
+  backgroundColor?: string;
+  showViewAll?: boolean;
+  websitePhotos?: WebsitePhotos | null;
+  companyInformation?: CompanyInformation | null;
+}
+
+/** Embeddable offers section (view-only). Renders nothing if no offers. */
+export function OffersSection({
+  offers,
+  title = 'Offers',
+  subtitle = 'See our current offers.',
+  maxOffers = 6,
+  backgroundColor = 'bg-primary',
+  showViewAll = true,
+}: OffersSectionProps) {
+  const list = Array.isArray(offers) ? offers : [];
+  const displayList = list.filter((o) => !o.expired).slice(0, maxOffers);
+
+  if (list.length === 0) {
+    return null;
+  }
+
+  return (
+    <section className={`${backgroundColor} py-16 md:py-24`}>
+      <div className="mx-auto max-w-container px-4 md:px-8">
+        <div className="flex flex-col items-start justify-between lg:flex-row">
+          <div className="max-w-3xl">
+            <p className="text-sm font-semibold text-brand-secondary md:text-md">Current offers</p>
+            <h2 className="mt-3 text-display-sm font-semibold text-primary md:text-display-md">
+              {title}
+            </h2>
+            <p className="mt-4 text-lg text-tertiary md:mt-5 md:text-xl">{subtitle}</p>
+          </div>
+          {showViewAll && (
+            <div className="hidden gap-3 lg:flex">
+              <Button size="xl" href="/offers">View all offers</Button>
+            </div>
+          )}
+        </div>
+        <div className="mx-auto mt-12 max-w-2xl space-y-6">
+          {displayList.map((offer) => (
+            <OfferCard key={offer.id} offer={offer} />
+          ))}
+        </div>
+        {showViewAll && (
+          <div className="mt-12 flex flex-col gap-3 lg:hidden">
+            <Button size="xl" href="/offers">View all offers</Button>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+function OfferCard({ offer }: { offer: OfferPublic }) {
+  return (
+    <div className="rounded-2xl border border-secondary bg-secondary/30 p-5 md:p-6">
+      <div className="flex flex-col gap-3">
+        <h3 className="text-lg font-semibold text-primary">{offer.name}</h3>
+        {offer.description && (
+          <p className="text-tertiary">{offer.description}</p>
+        )}
+        {offer.value_terms && (
+          <p className="text-sm font-medium text-primary">{offer.value_terms}</p>
+        )}
+        {offer.expires_at && (() => {
+          const d = new Date(offer.expires_at);
+          if (Number.isNaN(d.getTime())) return null;
+          return (
+            <p className="text-xs text-tertiary">
+              Expires {d.toLocaleDateString()}
+            </p>
+          );
+        })()}
+      </div>
+    </div>
+  );
+}