@rileybathurst/paddle 1.9.8 → 1.9.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.9.8",
+  "version": "1.9.11",
   "type": "module",
   "scripts": {
     "dev": "tsc --noEmit && stay-gold && vite",

package/src/index.tsx

@@ -8,7 +8,7 @@ export * from "./paddle-featured-sort";
 // Molecules
 export * from "./paddle-composition";
 export * from "./paddle-socials";
-export * from "./paddle-location-card";
+export * from "./paddle-location";
 export * from "./paddle-testimonials";
 export * from "./paddle-ticket";
 export * from "./paddle-sunset-tour-times";
@@ -34,8 +34,11 @@ export * from "./paddle-seo";
 
 // Types
 export * from "./types/paddle-ticket-types";
-export * from "./types/paddle-location-card-types";
+export * from "./types/paddle-location-types";
 export * from "./types/paddle-location-deck-types";
 export * from "./types/paddle-gatsby-image-type";
 export * from "./types/paddle-purchase-types";
-export * from "./types/paddle-brand-types";
+export * from "./types/paddle-purchase-image-types";
+export * from "./types/paddle-brand-types";
+export * from "./types/paddle-book-now-types";
+export * from "./types/paddle-testimonial-types";

package/src/paddle-location-deck.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { PaddleLocationCard } from "./paddle-location-card";
-import type { PaddleLocationCardTypes } from "./types/paddle-location-card-types";
+import { PaddleLocation } from "./paddle-location";
+import type { PaddleLocationTypes } from "./types/paddle-location-types";
 import type { PaddleLocationDeckTypes } from "./types/paddle-location-deck-types";
 
 export const PaddleLocationDeck = ({
@@ -11,12 +11,12 @@ export const PaddleLocationDeck = ({
 }: PaddleLocationDeckTypes) => {
   return (
     <section className="location-deck">
-      {nodes.map((location: PaddleLocationCardTypes) => (
-        <PaddleLocationCard
+      {nodes.map((location: PaddleLocationTypes) => (
+        <PaddleLocation
           key={location.id}
           season_start={season_start}
           season_end={season_end}
-          phoneNumber={phone}
+          phone={phone}
           {...location}
         />
       ))}

package/src/paddle-location.tsx

@@ -0,0 +1,224 @@
+import React from "react"
+import { Link } from "gatsby";
+import Markdown from "react-markdown";
+
+import HourMin from "./hour-min";
+import Phone from "./phone";
+import type { PaddleLocationTypes } from "./types/paddle-location-types";
+import SVG from 'react-inlinesvg';
+
+type SeasonTypes = {
+  season_start?: string;
+  season_end?: string;
+
+  opening_time: string;
+  closing_time: string;
+  name: string;
+  offSeasonDetails?: string;
+  weatherPermitting?: boolean;
+}
+const Season = ({
+  name,
+  season_start,
+  season_end,
+  opening_time,
+  closing_time,
+  offSeasonDetails,
+  weatherPermitting
+}: SeasonTypes) => {
+  // TODO: these need a query but thats not the most important first step
+  if (
+    name === "Free Parking Lot" ||
+    name === "Parking" ||
+    name === "Delivery"
+  ) {
+    return null;
+  }
+
+  if (season_start && season_end) {
+    const currentDay = new Date();
+    const seasonStartDate = new Date(season_start);
+    const seasonEndDate = new Date(season_end);
+
+    if (currentDay >= seasonStartDate && currentDay <= seasonEndDate) {
+      return (
+        <p>
+          {opening_time ? "Open Daily: " : null}
+          {opening_time && closing_time ? (
+            <><HourMin time={opening_time} /> - <HourMin time={closing_time} />&nbsp;</>
+          ) : null}
+          {weatherPermitting ? "Weather Permitting" : null}
+        </p>
+      );
+    }
+
+    return (
+      <div>
+        <p>We&apos;re closed for the season</p>
+
+        {currentDay < seasonStartDate ? (
+          <p>We will reopen {season_start}, Weather Permitting</p>
+        ) : null}
+
+        {offSeasonDetails ? <p>{offSeasonDetails}</p> : null}
+      </div>
+    );
+  }
+
+  console.warn(`No season start or end date provided for ${name}. Defaulting to off season.`);
+  return (
+    <div>
+      <p>We&apos;re closed for the season</p>
+      {offSeasonDetails ? <p>{offSeasonDetails}</p> : null}
+    </div>
+  );
+};
+
+type ContentTypes = {
+  link?: string;
+  svg: string;
+  name: string;
+
+  description: {
+    data: {
+      description: string;
+    };
+  };
+  opening_time: string;
+  closing_time: string;
+
+  season_start?: string;
+  season_end?: string;
+
+  offSeasonDetails?: string;
+  phone?: number;
+  weatherPermitting?: boolean;
+
+  streetAddress?: string;
+  addressLocality?: string;
+  addressRegion?: string;
+  postalCode?: string;
+  commonName?: string;
+}
+
+const Content = ({
+  svg,
+  name,
+  description,
+  opening_time,
+  closing_time,
+  streetAddress,
+  addressLocality,
+  addressRegion,
+  postalCode,
+  commonName,
+  weatherPermitting,
+  season_start,
+  season_end,
+  offSeasonDetails,
+  phone,
+}: ContentTypes) => {
+  return (
+    <>
+      <div className="svg">
+        <SVG src={svg} />
+      </div>
+
+      <div className="location_details">
+        <h3>{name}</h3>
+
+        {streetAddress ||
+          addressLocality ||
+          addressRegion ||
+          postalCode ||
+          commonName ? (
+          <address>
+            {commonName ? (<>{commonName},<br /></>) : null}
+            {streetAddress ? (<>{streetAddress},<br /></>) : null}
+            {addressLocality ? (<>{addressLocality},<br /></>) : null}
+            {addressRegion ? (<>{addressRegion},&nbsp;</>) : null}
+            {postalCode ? (<>{postalCode}</>) : null}
+          </address>
+        ) : 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}
+            weatherPermitting={weatherPermitting}
+          />
+        ) : (
+          <div className="react-markdown">
+            <Markdown>{description.data.description}</Markdown>
+          </div>
+        )}
+
+        {phone && (
+          <Phone phone={phone} />
+        )}
+      </div>
+    </>
+  );
+};
+
+export const PaddleLocation = ({
+  svg,
+  name,
+  link,
+  description,
+  opening_time,
+  closing_time,
+  streetAddress,
+  addressLocality,
+  addressRegion,
+  postalCode,
+  commonName,
+  season_start,
+  season_end,
+  phone,
+  offSeasonDetails,
+  weatherPermitting
+}: PaddleLocationTypes) => {
+
+  const phoneDidgits = Number(phone);
+
+  const content = (
+    <Content
+      svg={svg}
+      name={name}
+      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}
+      weatherPermitting={weatherPermitting}
+      phone={phoneDidgits}
+    />
+  );
+
+  return link.includes("http") ? (
+    <a
+      href={link}
+      className="location"
+      target="_blank"
+      rel="noopener noreferrer"
+      title={name}
+    >
+      {content}
+    </a>
+  ) : (
+    <Link to={link} className="location">
+      {content}
+    </Link>
+  );
+};

package/src/paddle-purchase.tsx

@@ -4,6 +4,8 @@ import { GatsbyImage } from "gatsby-plugin-image";
 import type { PaddleGatsbyImageType } from "./types/paddle-gatsby-image-type";
 import { PaddleInchesRemainder } from "./paddle-inches-remainder";
 import { PaddleTextureBackgrounds } from "./paddle-texture-backgrounds";
+import { PaddlePurchaseTypes } from "./types/paddle-purchase-types";
+import { PaddlePurchaseAndImageTypes } from "./types/paddle-purchase-image-types";
 
 // TODO: I'm not sure if this is needed or I can loop it easier
 interface NameTypes {
@@ -45,28 +47,27 @@ const Badges = ({ inflatable, demo, discount }: BadgeTypes) => {
   return null;
 }
 
-type purchaseTypes = {
-  id: React.Key;
-  title: string;
-  slug: string;
-  excerpt: string;
-  length: number;
-  width: number;
-  inflatable: boolean;
-  capacity: number;
-  demo: boolean;
-  discount?: number;
-  cutout: PaddleGatsbyImageType;
-  sportSlug: string;
-  brandSlug: string;
-  baseOne: { image: PaddleGatsbyImageType };
-  baseTwo: { image: PaddleGatsbyImageType };
-  baseThree: { image: PaddleGatsbyImageType };
-  topOne: { image: PaddleGatsbyImageType };
-  topTwo: { image: PaddleGatsbyImageType };
-  topThree: { image: PaddleGatsbyImageType };
-};
-export const PaddlePurchase = ({ id, title, slug, excerpt, length, width, inflatable, capacity, demo, discount, cutout, sportSlug, brandSlug, baseOne, baseTwo, baseThree, topOne, topTwo, topThree }: purchaseTypes) => {
+
+export const PaddlePurchase = ({
+  id,
+  title,
+  slug,
+  excerpt,
+  length,
+  width,
+  inflatable,
+  capacity,
+  demo,
+  discount,
+  cutout,
+  sportSlug,
+  brandSlug,
+  baseOne,
+  baseTwo,
+  baseThree,
+  topOne,
+  topTwo,
+  topThree }: PaddlePurchaseAndImageTypes) => {
 
   return (
     <article key={id} className="purchase">

package/src/paddle-texture-backgrounds.tsx

@@ -3,12 +3,12 @@ import { GatsbyImage } from "gatsby-plugin-image";
 import type { PaddleGatsbyImageType } from "./types/paddle-gatsby-image-type";
 
 type textureTypes = {
-  baseOne: { image: PaddleGatsbyImageType };
-  baseTwo: { image: PaddleGatsbyImageType };
-  baseThree: { image: PaddleGatsbyImageType };
-  topOne: { image: PaddleGatsbyImageType };
-  topTwo: { image: PaddleGatsbyImageType };
-  topThree: { image: PaddleGatsbyImageType };
+  baseOne: PaddleGatsbyImageType;
+  baseTwo: PaddleGatsbyImageType;
+  baseThree: PaddleGatsbyImageType;
+  topOne: PaddleGatsbyImageType;
+  topTwo: PaddleGatsbyImageType;
+  topThree: PaddleGatsbyImageType;
 };
 export const PaddleTextureBackgrounds = ({ baseOne, baseTwo, baseThree, topOne, topTwo, topThree }: textureTypes) => {
   const baseTextures = [
@@ -30,13 +30,13 @@ export const PaddleTextureBackgrounds = ({ baseOne, baseTwo, baseThree, topOne,
   return (
     <>
       <GatsbyImage
-        image={baseTextures[baseRandom].image.localFile.childImageSharp.gatsbyImageData}
+        image={baseTextures[baseRandom].localFile.childImageSharp.gatsbyImageData}
         alt="splash texture"
         className="texture-slice"
         objectFit="contain"
       />
       <GatsbyImage
-        image={topTextures[topRandom].image.localFile.childImageSharp.gatsbyImageData}
+        image={topTextures[topRandom].localFile.childImageSharp.gatsbyImageData}
         alt="sand texture"
         className="texture-slice crop"
         objectFit="contain"

package/src/types/paddle-location-deck-types.ts

@@ -1,9 +1,9 @@
-import type { PaddleLocationCardTypes } from "./paddle-location-card-types";
+import type { PaddleLocationTypes } from "./paddle-location-types";
 
 export type PaddleLocationDeckTypes = {
   background?: string;
   season_start?: string; // ? should this be optional? it created a problem with tours
   season_end?: string;
   phone?: string;
-  nodes: PaddleLocationCardTypes[];
+  nodes: PaddleLocationTypes[];
 };

package/src/types/{paddle-location-card-types.ts → paddle-location-types.ts}

@@ -1,4 +1,4 @@
-export interface PaddleLocationCardTypes {
+export interface PaddleLocationTypes {
   id: React.Key;
   svg: string;
   name: string;
@@ -25,9 +25,8 @@ export interface PaddleLocationCardTypes {
 
   season_start?: string;
   season_end?: string;
-  phoneNumber?: string;
+  phone?: string;
 
   offSeasonDetails?: string;
-  phone?: boolean;
   weatherPermitting?: boolean;
 }

package/src/types/paddle-purchase-image-types.ts

@@ -0,0 +1,11 @@
+import type { PaddleGatsbyImageType } from "./paddle-gatsby-image-type";
+import type { PaddlePurchaseTypes } from "./paddle-purchase-types";
+
+export type PaddlePurchaseAndImageTypes = PaddlePurchaseTypes & {
+  baseOne: { image: PaddleGatsbyImageType };
+  baseTwo: { image: PaddleGatsbyImageType };
+  baseThree: { image: PaddleGatsbyImageType };
+  topOne: { image: PaddleGatsbyImageType };
+  topTwo: { image: PaddleGatsbyImageType };
+  topThree: { image: PaddleGatsbyImageType };
+};

package/src/types/paddle-purchase-types.ts

@@ -1,6 +1,6 @@
 import type { PaddleGatsbyImageType } from "./paddle-gatsby-image-type";
 
-export type PaddlePurchaseTypes = {
+type BasePaddlePurchaseTypes = {
   id: React.Key;
   title: string;
   slug: string;
@@ -12,10 +12,19 @@ export type PaddlePurchaseTypes = {
   demo: boolean;
   discount?: number;
   cutout: PaddleGatsbyImageType;
-  sport: {
-    slug: string;
-  };
-  brand: {
-    slug: string;
-  };
+
+  baseOne: { image: PaddleGatsbyImageType };
+  baseTwo: { image: PaddleGatsbyImageType };
+  baseThree: { image: PaddleGatsbyImageType };
+  topOne: { image: PaddleGatsbyImageType };
+  topTwo: { image: PaddleGatsbyImageType };
+  topThree: { image: PaddleGatsbyImageType };
 };
+
+export type PaddlePurchaseTypes = BasePaddlePurchaseTypes & (
+  | { sport: { slug: string }; sportSlug?: string }
+  | { sportSlug: string; sport?: { slug: string } }
+) & (
+  | { brand: { slug: string }; brandSlug?: string }
+  | { brandSlug: string; brand?: { slug: string } }
+);

package/src/paddle-location-card.tsx

@@ -1,399 +0,0 @@
-import React from "react"
-import { Link } from "gatsby";
-import Markdown from "react-markdown";
-
-import HourMin from "./hour-min";
-import Phone from "./phone";
-import type { PaddleLocationCardTypes } from "./types/paddle-location-card-types";
-import SVG from 'react-inlinesvg';
-
-// 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 ? (<>{commonName},&nbsp;</>) : null}
-      {streetAddress ? (<>{streetAddress},&nbsp;</>) : null}
-      {addressLocality ? (<>{addressLocality},&nbsp;</>) : null}
-      {addressRegion ? (<>{addressRegion},&nbsp;</>) : null}
-      {postalCode ? (<>{postalCode},&nbsp;</>) : null}
-    </address>
-  )
-}
-
-interface SeasonTypes {
-  season_start?: string;
-  season_end?: string;
-
-  opening_time: string;
-  closing_time: string;
-  name: string;
-  offSeasonDetails?: string;
-  weatherPermitting?: boolean;
-}
-const Season = ({
-  name,
-  season_start,
-  season_end,
-  opening_time,
-  closing_time,
-  offSeasonDetails,
-  weatherPermitting
-}: SeasonTypes) => {
-  // TODO: these need a query but thats not the most important first step
-  if (
-    name === "Free Parking Lot" ||
-    name === "Parking" ||
-    name === "Delivery"
-  ) {
-    return null;
-  }
-
-  if (season_start && season_end) {
-    const currentDay = new Date();
-    const seasonStartDate = new Date(season_start);
-    const seasonEndDate = new Date(season_end);
-
-    if (currentDay >= seasonStartDate && currentDay <= seasonEndDate) {
-      return (
-        <p>
-          {opening_time ? "Open Daily: " : null}
-          {opening_time && closing_time ? (
-            <><HourMin time={opening_time} /> - <HourMin time={closing_time} />&nbsp;</>
-          ) : null}
-          {weatherPermitting ? "Weather Permitting" : null}
-        </p>
-      );
-    }
-
-    // * outside of season
-    return (
-      <div>
-        <p>We&apos;re closed for the season</p>
-
-        {currentDay < seasonStartDate ? (
-          <p>We will reopen {season_start}, Weather Permitting</p>
-        ) : null}
-
-        {offSeasonDetails ? <p>{offSeasonDetails}</p> : null}
-      </div>
-    );
-  }
-
-  // * 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}
-    </div>
-  );
-};
-
-interface ContentTypes {
-  link?: string;
-  svg: string;
-  name: string;
-
-  description: {
-    data: {
-      description: string;
-    };
-  };
-  opening_time: string;
-  closing_time: string;
-
-  season_start?: string;
-  season_end?: string;
-
-  offSeasonDetails?: string;
-  phoneNumber?: number;
-  weatherPermitting?: boolean;
-
-  streetAddress?: string;
-  addressLocality?: string;
-  addressRegion?: string;
-  postalCode?: string;
-  commonName?: string;
-}
-const PhoneContent = ({
-  link,
-  svg,
-  name,
-  description,
-  opening_time,
-  closing_time,
-  streetAddress,
-  addressLocality,
-  addressRegion,
-  postalCode,
-  commonName,
-  season_start,
-  season_end,
-  offSeasonDetails,
-  phoneNumber,
-  weatherPermitting
-}: ContentTypes) => {
-  return (
-    <>
-      {link?.includes("http") ? (
-        <a
-          href={link}
-          className="svg"
-          target="_blank"
-          rel="noopener noreferrer"
-          title={name}
-        >
-          <SVG src={svg} />
-        </a>
-      ) : (
-        link && (
-          <Link to={link} className="svg">
-            <SVG src={svg} />
-          </Link>
-        )
-      )}
-
-      <div className="location_details">
-        <div className="multi_button">
-          {link?.includes("http") ? (
-            <a
-              href={link}
-              target="_blank"
-              rel="noopener noreferrer"
-              title={name}
-            >
-              <h3>{name}</h3>
-            </a>
-          ) : (
-            link && (
-              <Link to={link} title={name}>
-                <h3>{name}</h3>
-              </Link>
-            )
-          )}
-          {phoneNumber && (
-            <Phone phone={phoneNumber} />
-          )}
-        </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 && (
-              <Link to={link} title={name}>
-                <Place
-                  commonName={commonName}
-                  streetAddress={streetAddress}
-                  addressLocality={addressLocality}
-                  addressRegion={addressRegion}
-                  postalCode={postalCode}
-                />
-              </Link>
-            )
-          )
-        ) : 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}
-            weatherPermitting={weatherPermitting}
-          />
-        ) : (
-          <div className="react-markdown">
-            <Markdown>{description.data.description}</Markdown>
-          </div>
-        )}
-      </div>
-    </>
-  );
-};
-
-const Content = ({
-  svg,
-  name,
-  description,
-  opening_time,
-  closing_time,
-  streetAddress,
-  addressLocality,
-  addressRegion,
-  postalCode,
-  commonName,
-  weatherPermitting,
-  season_start,
-  season_end,
-  offSeasonDetails,
-}: ContentTypes) => {
-  return (
-    <>
-      <div className="svg">
-        <SVG src={svg} />
-      </div>
-
-      <div className="location_details">
-        <div className="multi_button">
-          <h3>{name}</h3>
-        </div>
-
-        {streetAddress ||
-          addressLocality ||
-          addressRegion ||
-          postalCode ||
-          commonName ? (
-          <Place
-            commonName={commonName}
-            streetAddress={streetAddress}
-            addressLocality={addressLocality}
-            addressRegion={addressRegion}
-            postalCode={postalCode}
-          />
-        ) : 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}
-            weatherPermitting={weatherPermitting}
-          />
-        ) : (
-          <div className="react-markdown">
-            <Markdown>{description.data.description}</Markdown>
-          </div>
-        )}
-      </div>
-    </>
-  );
-};
-
-export const PaddleLocationCard = ({
-  svg,
-  name,
-  link,
-  description,
-  opening_time,
-  closing_time,
-  streetAddress,
-  addressLocality,
-  addressRegion,
-  postalCode,
-  commonName,
-  season_start,
-  season_end,
-  phone,
-  phoneNumber,
-  offSeasonDetails,
-  weatherPermitting
-}: PaddleLocationCardTypes) => {
-
-  const phoneDidgits = Number(phoneNumber);
-
-  if (phone) {
-    return (
-      <div className="location">
-        <PhoneContent
-          link={link}
-          svg={svg}
-          name={name}
-          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}
-          phoneNumber={phoneDidgits}
-          weatherPermitting={weatherPermitting}
-        />
-      </div>
-    );
-  }
-
-  if (link.includes("http")) {
-    return (
-      <a
-        href={link}
-        className="location"
-        target="_blank"
-        rel="noopener noreferrer"
-        title={name}
-      >
-        <Content
-          svg={svg}
-          name={name}
-          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}
-          weatherPermitting={weatherPermitting}
-        />
-      </a>
-    );
-  }
-  return (
-    <Link to={link} className="location">
-      <Content
-        svg={svg}
-        name={name}
-        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}
-        weatherPermitting={weatherPermitting}
-      />
-    </Link>
-  );
-};