@rileybathurst/paddle 1.9.4 → 1.9.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.9.4",
+  "version": "1.9.6",
   "type": "module",
   "scripts": {
     "dev": "tsc --noEmit && stay-gold && vite",
@@ -23,7 +23,8 @@
     "react-dom": "^18.3.1",
     "react-inlinesvg": "^4.2.0",
     "react-markdown": "^10.1.0",
-    "stay-gold": "^1.1.8"
+    "stay-gold": "^1.1.8",
+    "publish": "npm version patch && npm login && npm publish"
   },
   "devDependencies": {
     "@biomejs/biome": "2.0.2",

package/src/App.tsx

@@ -1,6 +1,9 @@
+// * this is the opening vite page to test functions with
+
 import { useState } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
+import { PaddlePricingChart } from './paddle-pricing-chart'
 
 function App() {
   const [count, setCount] = useState(0)
@@ -27,6 +30,70 @@ function App() {
       <p className="read-the-docs">
         Click on the Vite and React logos to learn more
       </p>
+
+      {/* testing */}
+      <PaddlePricingChart
+        rentalRates={{
+          nodes: [
+            {
+                "id": "0bcc4411-43e9-55a4-9a61-313a27198c23",
+                "item": "Single Kayak",
+                "oneHour": 32,
+                "threeHour": 64,
+                "fullDay": 96,
+                "pedalAdd": 10,
+                "branches": [],
+                "retail": null
+            },
+            {
+                "id": "dad19f3d-3381-573a-b37d-6c4970e60c61",
+                "item": "Double Kayak",
+                "oneHour": 48,
+                "threeHour": 96,
+                "fullDay": 110,
+                "pedalAdd": 20,
+                "branches": [],
+                "retail": null
+            },
+            {
+                "id": "531d03f2-2348-564f-b4e5-d00fc2810f6b",
+                "item": "Paddle board",
+                "oneHour": 32,
+                "threeHour": 64,
+                "fullDay": 96,
+                "pedalAdd": null,
+                "branches": [],
+                "retail": null
+            },
+            {
+                "id": "cc6bb238-1c66-56d7-89ae-3cd3d99e5502",
+                "item": "Inflatable Paddle Board*",
+                "oneHour": null,
+                "threeHour": null,
+                "fullDay": 96,
+                "pedalAdd": null,
+                "branches": [
+                    {
+                        "slug": "tahoe-city"
+                    }
+                ],
+                "retail": {
+                    "slug": "breeze-wing",
+                    "sport": {
+                        "slug": "paddleboard"
+                    },
+                    "brand": {
+                        "slug": "tahe"
+                    }
+                }
+            }
+          ]
+        }}
+        branches={{
+          // slug: 'south-tahoe'
+          slug: 'tahoe-city'
+        }}
+      />
     </>
   )
 }

package/src/paddle-pricing-chart.tsx

@@ -36,14 +36,12 @@ const LineBreaker = ({ text }: { text: string; }) => {
 }
 
 export const PaddlePricingChart = ({ rentalRates, branches }: paddlePricingChartTypes) => {
+  
+  // console.log(branches);
 
-  console.log('paddle pricing chart testing');
-  console.log('🦄');
-  console.log(rentalRates);
-  console.log(branches);
-  console.log('🦖');
-
-  console.log(rentalRates.nodes.map(rate => rate.branches?.map(branch => branch.slug)));
+  /* console.log(rentalRates.nodes.map(rate => rate.branches?.map(
+    branch => branch.slug
+  ).flat().some(slug => slug === branches?.slug) && console.log("found a match"))); */
 
   return (
     <div className="pricing-chart">
@@ -59,7 +57,7 @@ export const PaddlePricingChart = ({ rentalRates, branches }: paddlePricingChart
 
       {rentalRates.nodes.map((rate) => (
         <div key={rate.id} className="column">
-          {rate.retail && rate.branches?.some(branch => branch.slug === branches?.slug) ? (
+          {rate.retail && rate.branches?.flat().some(branch => branch.slug === branches?.slug) ? (
             <Link to={`/retail/${rate.retail.sport.slug}/${rate.retail.brand.slug}/${rate.retail.slug}`}>
               <LineBreaker text={rate.item} />
             </Link>

package/src/styles/typography.css

@@ -60,7 +60,7 @@ h4,
 
 h5,
 .elbrus {
-  font-size: var(--kosciuszko); /* 20px */
+  font-size: var(--elbrus); /* 20px */
   margin-bottom: 0.625rem; /* 10px */
 }
 

package/src/types/paddle-pricing-chart-types.ts

@@ -5,10 +5,10 @@ export type paddlePricingChartTypes = {
     nodes: {
       id: React.Key;
       item: string;
-      oneHour: number;
-      threeHour: number;
-      fullDay: number;
-      pedalAdd?: number;
+      oneHour?: number | null;
+      threeHour?: number | null;
+      fullDay?: number | null;
+      pedalAdd?: number | null;
 
       branches?: {
         slug: string;
@@ -22,10 +22,10 @@ export type paddlePricingChartTypes = {
         brand: {
           slug: string;
         };
-      };
+      } | null;
     }[];
   };
   branches?: {
     slug: string;
-  }
+  } | null;
 };