@rileybathurst/paddle 0.0.104 → 0.0.105

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "0.0.104",
+  "version": "0.0.105",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/PaddleLocationCard.tsx

@@ -1,5 +1,3 @@
-// TODO: Season is super broken
-
 import * as React from "react"
 import { Link } from 'gatsby';
 import Markdown from "react-markdown";
@@ -76,7 +74,7 @@ interface ContentTypes {
   season_end?: string;
 
 }
-function Content({ svg, name, address, description, opening_time, closing_time, streetAddress, addressLocality, addressRegion, postalCode, commonName, season_start, season_end }: ContentTypes) {
+function Content({ svg, name, address, description, opening_time, closing_time, streetAddress, addressLocality, addressRegion, postalCode, commonName, season_start, season_end, phone }: ContentTypes) {
   return (
     <>
       <div
@@ -97,7 +95,7 @@ function Content({ svg, name, address, description, opening_time, closing_time,
               {postalCode ? <span>{postalCode}<br /></span> : null}
             </address>
 
-            {name === "On Water Rental" ? <Phone /> : null}
+            {name === "On Water Rental" ? <Phone phone={phone} /> : null}
           </>
         ) :
 
@@ -131,7 +129,7 @@ function Content({ svg, name, address, description, opening_time, closing_time,
   )
 }
 
-export function PaddleLocationCard({ svg, name, link, address, description, opening_time, closing_time, background, streetAddress, addressLocality, addressRegion, postalCode, commonName, season_start, season_end }: LocationCardTypes) {
+export function PaddleLocationCard({ svg, name, link, address, description, opening_time, closing_time, background, streetAddress, addressLocality, addressRegion, postalCode, commonName, season_start, season_end, phone }: LocationCardTypes) {
 
   if (link.includes('http')) {
     return (
@@ -157,6 +155,7 @@ export function PaddleLocationCard({ svg, name, link, address, description, open
 
           season_start={season_start}
           season_end={season_end}
+          phone={phone}
 
         />
       </a>
@@ -183,6 +182,8 @@ export function PaddleLocationCard({ svg, name, link, address, description, open
 
         season_start={season_start}
         season_end={season_end}
+        phone={phone}
+
       />
     </Link>
   )

package/src/PaddleLocationDeck.tsx

@@ -6,9 +6,10 @@ interface LocationDeckTypes {
   background?: string;
   season_start?: string;
   season_end?: string;
+  phone?: string;
   nodes: LocationCardTypes[];
 }
-export function PaddleLocationDeck({ nodes, season_start, season_end, background }: LocationDeckTypes) {
+export function PaddleLocationDeck({ nodes, season_start, season_end, phone, background }: LocationDeckTypes) {
 
   return (
     <section className="location-deck">
@@ -19,6 +20,7 @@ export function PaddleLocationDeck({ nodes, season_start, season_end, background
           background={background}
           season_start={season_start}
           season_end={season_end}
+          phone={phone}
         />
       ))}
     </section>

package/src/phone.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+
+interface FormatPhoneNumberTypes {
+  phoneNumberString: number;
+}
+function FormatPhoneNumber({ phoneNumberString }: FormatPhoneNumberTypes) {
+  const cleaned = `${phoneNumberString}`.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"
+    >
+      Phone: <FormatPhoneNumber phoneNumberString={phone} />
+    </a>
+  )
+}
+
+export default Phone

package/src/types/location-card-types.ts

@@ -30,4 +30,5 @@ export interface LocationCardTypes {
 
   season_start?: string;
   season_end?: string;
+  phone?: string;
 }