@rileybathurst/paddle 1.0.3 → 1.0.5

package/README.md

@@ -1,5 +1,3 @@
 # Paddle
 
-Components for a couple kayak and paddleboard sites.
-
-- I'm working on adding controls to change the theme between locations but it's not quite there yet.
+Components for kayak and paddleboard sites.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.0.3",
+  "version": "1.0.5",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -23,6 +23,7 @@
     "react-markdown": "^10.1.0"
   },
   "devDependencies": {
+    "@biomejs/biome": "2.0.2",
     "@chromatic-com/storybook": "^4.0.0",
     "@faker-js/faker": "^9.8.0",
     "@storybook/addon-docs": "^9.0.11",

package/src/PaddleBrandList.tsx

@@ -23,18 +23,25 @@ type BrandListTypes = {
 const PaddleBrandList = ({ nodes, sport }: BrandListTypes) => {
 
   const BrandSet = new Set();
-  
-  nodes.map((brand) => {
-    brand.retail.map((retail) => {
-      if (retail.sport.slug === sport) {
-        BrandSet.add(brand);
-      }
-    })
-  });
+  let BrandArray = [];
+
+  if (sport) {
+    nodes.map((brand) => {
+      brand.retail.map((retail) => {
+
+        if (retail.sport.slug === sport) {
+          BrandSet.add(brand);
+        }
 
-  const BrandArray = (Array.from(BrandSet));
+        return BrandSet;
+      })
+    });
 
-// TODO: if I only want a specific sport 
+    BrandArray = (Array.from(BrandSet));
+  } else {
+    // TODO: this needs a check if anything is published in the brand if no sport is passed
+    BrandArray = (Array.from(nodes));
+  }
 
   return (
     <ul className='brand_list'>

package/src/PaddleLocationCard.tsx

@@ -1,9 +1,46 @@
-import * as React from "react"
-import { Link } from 'gatsby';
+import React from "react"
+import { Link } from "gatsby";
 import Markdown from "react-markdown";
-import type { LocationCardTypes } from "./types/location-card-types";
+
 import HourMin from "./hour-min";
 import Phone from "./phone";
+import type { PaddleLocationCardTypes } from "./types/location-card-types";
+
+// merged types are possible to dry this up but its also a lot
+// type UpdatedUser = Merge<User, Updates>;
+type PlaceTypes = {
+  commonName?: string;
+  streetAddress?: string;
+  addressLocality?: string;
+  addressRegion?: string;
+  postalCode?: string;
+};
+const Place = ({ commonName, streetAddress, addressLocality, addressRegion, postalCode }: PlaceTypes) => {
+  return (
+    <address>
+      {commonName ? (
+        <span>
+          {commonName}
+          <br />
+        </span>
+      ) : null}
+      {streetAddress ? (
+        <span>
+          {streetAddress}
+          <br />
+        </span>
+      ) : null}
+      {addressLocality ? <span>{addressLocality}, </span> : null}
+      {addressRegion ? <span>{addressRegion} </span> : null}
+      {postalCode ? (
+        <span>
+          {postalCode}
+          <br />
+        </span>
+      ) : null}
+    </address>
+  )
+}
 
 interface SeasonTypes {
   season_start?: string;
@@ -14,10 +51,20 @@ interface SeasonTypes {
   name: string;
   offSeasonDetails?: string;
 }
-function Season({ name, season_start, season_end, opening_time, closing_time, offSeasonDetails }: SeasonTypes) {
-
+const Season = ({
+  name,
+  season_start,
+  season_end,
+  opening_time,
+  closing_time,
+  offSeasonDetails,
+}: SeasonTypes) => {
   // TODO: these need a query but thats not the most important first step
-  if (name === "Free Parking Lot" || name === "Parking" || name === "Delivery") {
+  if (
+    name === "Free Parking Lot" ||
+    name === "Parking" ||
+    name === "Delivery"
+  ) {
     return null;
   }
 
@@ -29,119 +76,169 @@ function Season({ name, season_start, season_end, opening_time, closing_time, of
     if (currentDay >= seasonStartDate && currentDay <= seasonEndDate) {
       return (
         <p>
-          {opening_time ? "Open Daily: " : null}<br />
+          {opening_time ? "Open Daily: " : null}
+          <br />
           {opening_time && closing_time ? (
-            <span><HourMin time={opening_time} /> - <HourMin time={closing_time} /></span>
-          )
-            : null}<br />
+            <span>
+              <HourMin time={opening_time} /> - <HourMin time={closing_time} />
+            </span>
+          ) : null}
+          <br />
           Weather Permitting
         </p>
-      )
+      );
     }
 
-    // outside of season
+    // * outside of season
     return (
       <div>
         <p>We&apos;re closed for the season</p>
 
         {currentDay < seasonStartDate ? (
           <p>
-            We will reopen<br />
-            {season_start}<br />
+            We will reopen
+            <br />
+            {season_start}
+            <br />
             Weather Permitting
           </p>
         ) : null}
 
-        {offSeasonDetails ? (
-          <p>{offSeasonDetails}</p>
-        ) : null}
+        {offSeasonDetails ? <p>{offSeasonDetails}</p> : null}
       </div>
-    )
+    );
   }
 
-  // no season defaults to off season
-  // TODO: add some enum error messages here for if this is allowed to not have a season
+  // * no season defaults to off season
+  // TODO: v1.3 add some enum error messages here for if this is allowed to not have a season
   return (
     <div>
       <p>We&apos;re closed for the season</p>
-      {offSeasonDetails ? (
-        <p>{offSeasonDetails}</p>
-      ) : null}
+      {offSeasonDetails ? <p>{offSeasonDetails}</p> : null}
     </div>
-  )
-
-}
+  );
+};
 
 interface ContentTypes {
+  link?: string;
   svg: string;
   name: string;
+
   address: {
     data: {
       address: string;
-    }
+    };
   };
+
   description: {
     data: {
       description: string;
-    }
+    };
   };
   opening_time: string;
   closing_time: string;
 
-  streetAddress?: string;
-  addressLocality?: string;
-  addressRegion?: string;
-  postalCode?: string;
-  commonName?: string;
-
   season_start?: string;
   season_end?: string;
 
   offSeasonDetails?: string;
+  phone?: number;
 
+  streetAddress?: string;
+  addressLocality?: string;
+  addressRegion?: string;
+  postalCode?: string;
+  commonName?: string;
 }
-function Content({ svg, name, address, description, opening_time, closing_time, streetAddress, addressLocality, addressRegion, postalCode, commonName, season_start, season_end, offSeasonDetails }: ContentTypes) {
+const PhoneContent = ({
+  link,
+  svg,
+  name,
+  address,
+  description,
+  opening_time,
+  closing_time,
+  streetAddress,
+  addressLocality,
+  addressRegion,
+  postalCode,
+  commonName,
+  season_start,
+  season_end,
+  offSeasonDetails,
+  phone,
+}: ContentTypes) => {
   return (
     <>
-      <div
-        className="svg"
-        dangerouslySetInnerHTML={{ __html: svg }}
-      />
+      {link?.includes("http") ? (
+        <a
+          href={link}
+          className="location"
+          target="_blank"
+          rel="noopener noreferrer"
+          title={name}
+        >
+          <div className="svg" dangerouslySetInnerHTML={{ __html: svg }} />
+        </a>
+      ) : (
+        <Link to={link} className="location">
+          <div className="svg" dangerouslySetInnerHTML={{ __html: svg }} />
+        </Link>
+      )}
 
       <div>
-
-        {streetAddress || addressLocality || addressRegion || postalCode || commonName ? (
-          <>
-            <h3 className="elbrus">{name}</h3>
-            <address>
-              {commonName ? <span>{commonName}<br /></span> : null}
-              {streetAddress ? <span>{streetAddress}<br /></span> : null}
-              {addressLocality ? <span>{addressLocality}, </span> : null}
-              {addressRegion ? <span>{addressRegion} </span> : null}
-              {postalCode ? <span>{postalCode}<br /></span> : null}
-            </address>
-          </>
-        ) :
-
-          (<>
-            <h3 className="elbrus">{name}</h3>
-            
-            <Markdown 
-              components={{
-                div: ({ children, ...props }) => (
-                  <div className="react-markdown" {...props}>
-                    {children}
-                  </div>
-                )
-              }}
+        <div className="multi_button">
+          {link?.includes("http") ? (
+            <a
+              href={link}
+              target="_blank"
+              rel="noopener noreferrer"
+              title={name}
             >
-              {address.data.address}
-            </Markdown>
-          </>)}
+              <h3>{name}</h3>
+            </a>
+          ) : (
+            <Link to={link} title={name}>
+              <h3>{name}</h3>
+            </Link>
+          )}
+          <Phone phone={phone} />
+        </div>
 
-      </div>
+        {streetAddress ||
+          addressLocality ||
+          addressRegion ||
+          postalCode ||
+          commonName ? (
+
+          link?.includes("http") ? (
+            <a
+              href={link}
+              target="_blank"
+              rel="noopener noreferrer"
+              title={name}
+            >
+              <Place
+                commonName={commonName}
+                streetAddress={streetAddress}
+                addressLocality={addressLocality}
+                addressRegion={addressRegion}
+                postalCode={postalCode}
+              />
+            </a>
+          ) : (
+            <Link to={link} title={name}>
+              <Place
+                commonName={commonName}
+                streetAddress={streetAddress}
+                addressLocality={addressLocality}
+                addressRegion={addressRegion}
+                postalCode={postalCode}
+              />
+            </Link>
+          )
+        ) : null}
 
-      <div>
         {opening_time && closing_time ? (
           <Season
             season_start={season_start}
@@ -153,59 +250,122 @@ function Content({ svg, name, address, description, opening_time, closing_time,
           />
         ) : (
           <div className="react-markdown">
-          <Markdown>
-            {description.data.description}
-          </Markdown>
+            <Markdown>{description.data.description}</Markdown>
           </div>
         )}
       </div>
     </>
-  )
-}
+  );
+};
 
-export function PaddleLocationCard({ svg, name, link, address, description, opening_time, closing_time, background, streetAddress, addressLocality, addressRegion, postalCode, commonName, season_start, season_end, phone, offSeasonDetails }: LocationCardTypes) {
-
-  const phoneNumber = Number(phone);
-
-  if (link.includes('http')) {
-    return (
-      <div className="location-wrapper">
-        <a href={link}
-          className={`location ${background}`}
-          target="_blank"
-          rel="noopener noreferrer"
-          title={name}
-        >
-          <Content
-            svg={svg}
-            name={name}
-            address={address}
-            description={description}
-            opening_time={opening_time}
-            closing_time={closing_time}
+const Content = ({
+  svg,
+  name,
+  address,
+  description,
+  opening_time,
+  closing_time,
+  streetAddress,
+  addressLocality,
+  addressRegion,
+  postalCode,
+  commonName,
+  season_start,
+  season_end,
+  offSeasonDetails,
+}: ContentTypes) => {
+  return (
+    <>
+      <div className="svg" dangerouslySetInnerHTML={{ __html: svg }} />
 
+      <h3 className="elbrus">{name}</h3>
+      <div>
+        {streetAddress ||
+          addressLocality ||
+          addressRegion ||
+          postalCode ||
+          commonName ? (
+          <Place
+            commonName={commonName}
             streetAddress={streetAddress}
             addressLocality={addressLocality}
             addressRegion={addressRegion}
             postalCode={postalCode}
-            commonName={commonName}
+          />
+        ) : null}
 
+        {opening_time && closing_time ? (
+          <Season
             season_start={season_start}
             season_end={season_end}
-
+            opening_time={opening_time}
+            closing_time={closing_time}
+            name={name}
             offSeasonDetails={offSeasonDetails}
-
           />
-        </a>
-        {name === "On Water Rental" && phone ? <Phone phone={phoneNumber} /> : null}
+        ) : (
+          <div className="react-markdown">
+            <Markdown>{description.data.description}</Markdown>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export const PaddleLocationCard = ({
+  svg,
+  name,
+  link,
+  address,
+  description,
+  opening_time,
+  closing_time,
+  streetAddress,
+  addressLocality,
+  addressRegion,
+  postalCode,
+  commonName,
+  season_start,
+  season_end,
+  phone,
+  offSeasonDetails,
+}: PaddleLocationCardTypes) => {
+  const phoneNumber = Number(phone);
+
+  if (phone) {
+    return (
+      <div className="location">
+        <PhoneContent
+          link={link}
+          svg={svg}
+          name={name}
+          address={address}
+          description={description}
+          opening_time={opening_time}
+          closing_time={closing_time}
+          streetAddress={streetAddress}
+          addressLocality={addressLocality}
+          addressRegion={addressRegion}
+          postalCode={postalCode}
+          commonName={commonName}
+          season_start={season_start}
+          season_end={season_end}
+          offSeasonDetails={offSeasonDetails}
+          phone={phoneNumber}
+        />
       </div>
-    )
+    );
   }
-  return (
-    <div className="location-wrapper">
-      <Link
-        to={link}
-        className={`location ${background}`}
+
+  if (link.includes("http")) {
+    return (
+      <a
+        href={link}
+        className="location"
+        target="_blank"
+        rel="noopener noreferrer"
+        title={name}
       >
         <Content
           svg={svg}
@@ -214,21 +374,36 @@ export function PaddleLocationCard({ svg, name, link, address, description, open
           description={description}
           opening_time={opening_time}
           closing_time={closing_time}
-
           streetAddress={streetAddress}
           addressLocality={addressLocality}
           addressRegion={addressRegion}
           postalCode={postalCode}
           commonName={commonName}
-
           season_start={season_start}
           season_end={season_end}
-
           offSeasonDetails={offSeasonDetails}
-
         />
-      </Link>
-      {name === "On Water Rental" && phone ? <Phone phone={phoneNumber} /> : null}
-    </div>
-  )
-}
+      </a>
+    );
+  }
+  return (
+    <Link to={link} className="location">
+      <Content
+        svg={svg}
+        name={name}
+        address={address}
+        description={description}
+        opening_time={opening_time}
+        closing_time={closing_time}
+        streetAddress={streetAddress}
+        addressLocality={addressLocality}
+        addressRegion={addressRegion}
+        postalCode={postalCode}
+        commonName={commonName}
+        season_start={season_start}
+        season_end={season_end}
+        offSeasonDetails={offSeasonDetails}
+      />
+    </Link>
+  );
+};

package/src/PaddleLocationDeck.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import * as React from "react";
 import { PaddleLocationCard } from "./PaddleLocationCard";
 import type { PaddleLocationCardTypes } from "./types/location-card-types";
 
@@ -9,8 +9,13 @@ interface LocationDeckTypes {
   phone?: string;
   nodes: PaddleLocationCardTypes[];
 }
-export function PaddleLocationDeck({ nodes, season_start, season_end, phone, background }: LocationDeckTypes) {
-
+export const PaddleLocationDeck = ({
+  nodes,
+  season_start,
+  season_end,
+  phone,
+  background,
+}: LocationDeckTypes) => {
   return (
     <section className="location-deck">
       {nodes.map((location: PaddleLocationCardTypes) => (
@@ -24,5 +29,5 @@ export function PaddleLocationDeck({ nodes, season_start, season_end, phone, bac
         />
       ))}
     </section>
-  )
-}
+  );
+};

package/src/PaddleSEO.tsx

@@ -7,10 +7,10 @@ interface BreadcrumbsTypes {
     name?: string;
     item?: string;
   };
-}[]
+}
+[];
 // I could probably pass it two arguments instead but for now
-function Breadcrumbs(breadcrumbs: BreadcrumbsTypes) {
-
+const Breadcrumbs = (breadcrumbs: BreadcrumbsTypes) => {
   // remove the breadcrumbs.url from the Object.entries
   // console.log(breadcrumbs.url);
   const { url, ...rest } = breadcrumbs;
@@ -19,7 +19,6 @@ function Breadcrumbs(breadcrumbs: BreadcrumbsTypes) {
     return null;
   }
 
-
   return (
     <Script type="application/ld+json">
       {`
@@ -28,19 +27,19 @@ function Breadcrumbs(breadcrumbs: BreadcrumbsTypes) {
           "@type": "BreadcrumbList",
           "itemListElement": [
             ${Object.entries(rest).map(([key, breadcrumb]) => {
-        return `{
+              return `{
           "@type": "ListItem",
           "position": ${Number.parseInt(key) + 1},
           "name": "${breadcrumb.name}",
           "item": "${url}/${breadcrumb.item}"
-        }`
-      })}
+        }`;
+            })}
           ]
         }
       `}
     </Script>
   );
-}
+};
 
 type SEOtypes = {
   title?: string;
@@ -96,13 +95,24 @@ type SEOtypes = {
   };
 
   children: React.ReactNode;
-}
-
-export const PaddleSEO = ({ title, description, ogImage, ogImageDescription, breadcrumbs, strapiLocale, strapiLocation, allStrapiLocation, children }: SEOtypes) => {
+};
 
+export const PaddleSEO = ({
+  title,
+  description,
+  ogImage,
+  ogImageDescription,
+  breadcrumbs,
+  strapiLocale,
+  strapiLocation,
+  allStrapiLocation,
+  children,
+}: SEOtypes) => {
   const businessName = `${strapiLocale.name} Kayak & Paddleboard rentals and tours`;
 
-  const PaddleTitle = title ? `${title} | ${businessName}` : `${businessName} | ${strapiLocale.topbar.data.topbar} `;
+  const PaddleTitle = title
+    ? `${title} | ${businessName}`
+    : `${businessName} | ${strapiLocale.topbar.data.topbar} `;
   // TODO: tagline would be a better fallback description
   const PaddleDescription = description || strapiLocale.slogan;
   // url: `${strapiLocale.url}${SE0.url}` || strapiLocale.url,
@@ -116,8 +126,13 @@ export const PaddleSEO = ({ title, description, ogImage, ogImageDescription, bre
   // TODO: this is now allStrapiLocation.nodes
   // TODO: I think this will be a keylocation piece
   // console.log(strapiLocale.paymentAccepted);
-  const paymentAcceptedQuery = strapiLocale.paymentAccepted ? strapiLocale.paymentAccepted : '';
-  const paymentAcceptedFormatted = paymentAcceptedQuery.split('\n').map((payment: string) => payment.trim().replace('- ', '')).join(', ');
+  const paymentAcceptedQuery = strapiLocale.paymentAccepted
+    ? strapiLocale.paymentAccepted
+    : "";
+  const paymentAcceptedFormatted = paymentAcceptedQuery
+    .split("\n")
+    .map((payment: string) => payment.trim().replace("- ", ""))
+    .join(", ");
   // console.log(paymentAcceptedFormatted);
 
   // console.log(breadcrumbs);
@@ -152,10 +167,12 @@ export const PaddleSEO = ({ title, description, ogImage, ogImageDescription, bre
               "postalCode": "${strapiLocation?.postalCode}",
               "addressCountry": "US"
             },
-            ${allStrapiLocation ? `
+            ${
+              allStrapiLocation
+                ? `
             "department": [
             ${allStrapiLocation.nodes.map((location) => {
-          return `{
+              return `{
                   "name": "${location.name}",
                   "@type": "${location.schemaType}",
                   "address": {
@@ -166,10 +183,12 @@ export const PaddleSEO = ({ title, description, ogImage, ogImageDescription, bre
                     "postalCode": "${location.postalCode}",
                     "addressCountry": "US"
                   }
-                }`
-        })}
+                }`;
+            })}
             ],
-            ` : ''}
+            `
+                : ""
+            }
             "areaServed": {
               "@type": "GeoCircle",
               "geoMidpoint": {
@@ -189,10 +208,7 @@ export const PaddleSEO = ({ title, description, ogImage, ogImageDescription, bre
         `}
       </Script>
 
-      <Breadcrumbs
-        url={strapiLocale.url}
-        {...breadcrumbs}
-      />
+      <Breadcrumbs url={strapiLocale.url} {...breadcrumbs} />
       {children}
     </>
   );
@@ -217,4 +233,4 @@ return `{
     "closes": "${location.closing_time}"
   }`
   })}
-], */
+], */

package/src/PaddleTestimonial.tsx

@@ -1,16 +1,24 @@
-import * as React from "react"
-import { TestimonialTypes } from "./types/testimonial-types"
+import * as React from "react";
+import { TestimonialTypes } from "./types/testimonial-types";
 
-export function PaddleTestimonial({ id, testimonial, customer, sign, location }: TestimonialTypes) {
+export const PaddleTestimonial = ({
+  id,
+  testimonial,
+  customer,
+  sign,
+  location,
+}: TestimonialTypes) => {
   return (
-        <li key={id}>
-          <p className='elbrus'>
-            <span className='denali font-serif'>&ldquo;</span>
-            {testimonial}
-            <span className='denali font-serif'>&rdquo;</span>
-          </p>
-          <p>{sign} {customer}</p>
-          <p className='kosciuszko'>{location}</p>
-        </li>
-  )
-}
+    <li key={id}>
+      <p className="elbrus">
+        <span className="denali font-serif">&ldquo;</span>
+        {testimonial}
+        <span className="denali font-serif">&rdquo;</span>
+      </p>
+      <p>
+        {sign} {customer}
+      </p>
+      <p className="kosciuszko">{location}</p>
+    </li>
+  );
+};

package/src/PaddleTestimonials.tsx

@@ -1,16 +1,16 @@
-import * as React from "react"
-import { PaddleTestimonial } from "./PaddleTestimonial"
-import { type TestimonialTypes } from "./types/testimonial-types"
+import * as React from "react";
+import { PaddleTestimonial } from "./PaddleTestimonial";
+import { type TestimonialTypes } from "./types/testimonial-types";
 
 interface TestimonialsTypes {
   nodes: TestimonialTypes[];
 }
-export function PaddleTestimonials({ nodes }: TestimonialsTypes) {
+export const PaddleTestimonials = ({ nodes }: TestimonialsTypes) => {
   return (
-    <ul className='testimonials condor'>
+    <ul className="testimonials condor">
       {nodes.map((testimonial) => (
         <PaddleTestimonial key={testimonial.id} {...testimonial} />
       ))}
     </ul>
-  )
-}
+  );
+};

package/src/PaddleTicket.tsx

@@ -1,12 +1,27 @@
-import * as React from "react"
-import { Link } from "gatsby"
-import { GatsbyImage } from "gatsby-plugin-image"
-import type { PaddleTicketTypes } from "./types/ticket-types"
-import { PaddleTime } from "./PaddleTime"
-import { PaddleBookNow } from "./PaddleBookNow"
-
-export function PaddleTicket({ ogimage, slug, name, start, finish, duration, timeframe, fitness, excerpt, price, peek, peek_tours_fall_back, tour_page, allStrapiSunsetTourTime, strapiLocaleName }: PaddleTicketTypes) {
+import * as React from "react";
+import { Link } from "gatsby";
+import { GatsbyImage } from "gatsby-plugin-image";
+import type { PaddleTicketTypes } from "./types/ticket-types";
+import { PaddleTime } from "./PaddleTime";
+import { PaddleBookNow } from "./PaddleBookNow";
 
+export const PaddleTicket = ({
+  ogimage,
+  slug,
+  name,
+  start,
+  finish,
+  duration,
+  timeframe,
+  fitness,
+  excerpt,
+  price,
+  peek,
+  peek_tours_fall_back,
+  tour_page,
+  allStrapiSunsetTourTime,
+  strapiLocaleName,
+}: PaddleTicketTypes) => {
   const time = PaddleTime({
     start: start,
     finish: finish,
@@ -14,7 +29,7 @@ export function PaddleTicket({ ogimage, slug, name, start, finish, duration, tim
     timeframe: timeframe,
     allStrapiSunsetTourTime: allStrapiSunsetTourTime,
     allStrapiMoonlightTourDateTime: { nodes: [] }, // Provide an empty nodes array or the correct data as needed
-    slug: slug
+    slug: slug,
   });
 
   return (
@@ -27,19 +42,17 @@ export function PaddleTicket({ ogimage, slug, name, start, finish, duration, tim
           className="card__image"
         />
       </Link>
-      <div className='ticket__header'>
+      <div className="ticket__header">
         <h4 className="card__title">
-          <Link to={`/${tour_page}/${slug}`}>
-            {name}
-          </Link>
+          <Link to={`/${tour_page}/${slug}`}>{name}</Link>
         </h4>
-        
-        <div className='ticket__money'>
-        <h5>${price}</h5>
-        <PaddleBookNow
-          peek_base={peek || peek_tours_fall_back}
-          strapiLocaleName={strapiLocaleName}
-        />
+
+        <div className="ticket__money">
+          <h5>${price}</h5>
+          <PaddleBookNow
+            peek_base={peek || peek_tours_fall_back}
+            strapiLocaleName={strapiLocaleName}
+          />
         </div>
       </div>
 
@@ -47,15 +60,18 @@ export function PaddleTicket({ ogimage, slug, name, start, finish, duration, tim
         {/* // TODO: heavy handed but once the backup is there we can work on this */}
         {/* // TODO: I'd like a spec backup here */}
 
-        {slug !== '2hour' && slug !== '3hour' ? (
+        {slug !== "2hour" && slug !== "3hour" ? (
           <>
             <h4>{time.entry}</h4>
-            {fitness ? <h4 className="capitalize">{fitness} <span>Fitness</span></h4> : null}
+            {fitness ? (
+              <h4 className="capitalize">
+                {fitness} <span>Fitness</span>
+              </h4>
+            ) : null}
           </>
-        ) : null }
-      <p>{excerpt}</p>
+        ) : null}
+        <p>{excerpt}</p>
       </div>
-
     </section>
-  )
-}
+  );
+};

package/src/phone.tsx

@@ -1,33 +1,28 @@
-import * as React from "react"
+import * as React from "react";
 
 interface FormatPhoneNumberTypes {
   phoneNumberString: number;
 }
-function FormatPhoneNumber({ phoneNumberString }: FormatPhoneNumberTypes) {
+const FormatPhoneNumber = ({ phoneNumberString }: FormatPhoneNumberTypes) => {
   const phoneNumber = String(phoneNumberString);
-  const cleaned = `${phoneNumber}`.replace(/\D/g, '');
+  const cleaned = `${phoneNumber}`.replace(/\D/g, "");
   const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
   if (match) {
     return `(${match[1]}) ${match[2]}-${match[3]}`;
   }
   return null;
-}
+};
 
 type PhoneTypes = {
   phone: number;
-}
+};
 
 const Phone = ({ phone }: PhoneTypes) => {
-
   return (
-    <a
-      href={`tel:${phone}`}
-      rel="norel norefferer"
-      className="button"
-    >
+    <a href={`tel:${phone}`} rel="norel norefferer" className="button">
       Phone: <FormatPhoneNumber phoneNumberString={phone} />
     </a>
-  )
-}
+  );
+};
 
-export default Phone
+export default Phone;