paypal

public/index.html → Client/public/index.html

@@ -44,6 +44,7 @@
   <script> var _ctct_m = "62bc47f1e8186a0767c554771fd8db76"; </script>
   <script id="signupScript" src="//static.ctctcdn.com/js/signup-form-widget/current/signup-form-widget.min.js" async
     defer></script>
+    <script src="https://www.paypal.com/sdk/js?client-id=AUgmJJNkO3cRmnWl2gHs-Fho4sAOEPgIH2PXW2HQKaVDRpEZUZdciclNiAq-ip9MGmAQM2RCnbFPkiwI"></script>
   <!-- End Constant Contact Active Forms -->
   <!--
       Notice the use of %PUBLIC_URL% in the tags above.

Client/src/components/book/book.js

@@ -0,0 +1,192 @@
+import React, { useMemo, useState, useEffect } from "react";
+import Styled from "./book.style";
+import { useParams } from "react-router";
+import { trips } from "../../utils/trips";
+import axios from "axios";
+import Fuse from "fuse.js";
+import { Button, Form, FormGroup, Label, Input, FormText } from "reactstrap";
+import Paypal from "../paypal/paypal";
+
+const BookTrip = (props) => {
+  const { trip } = useParams();
+
+  const tripData = useMemo(() => {
+    const tripDataString = decodeURIComponent(escape(window.atob(trip)));
+    console.log(tripDataString)
+    const td = JSON.parse(tripDataString);
+    const tripDate = new Date(parseInt(td.timeStamp));
+    console.log(td);
+    return {
+      ...td,
+      dateTime: tripDate.toUTCString(),
+    };
+  }, [trip]);
+
+  const [tripDetails, setTripDetails] = useState();
+  const [selectedTrip, setSelectedTrip] = useState();
+  const [allTrips, setAllTrips] = useState();
+  const [pageData, setPageData] = useState({
+    name: "",
+    email: "",
+    phone: "",
+  });
+
+  const onInputUpdate = (e) => {
+    setPageData({
+      ...pageData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const tripDate = useMemo(() => {
+    if (selectedTrip) {
+      const date = new Date(selectedTrip.start.dateTime);
+      return date.toUTCString();
+    }
+  }, [selectedTrip]);
+
+  useEffect(() => {
+    const load = async () => {
+      const { source } = tripData || {};
+      const calendarData = await axios.get(
+        `https://www.googleapis.com/calendar/v3/calendars/[email protected]/events?maxResults=2500&key=${process.env.REACT_APP_GOOGLE_API_KEY}`
+      );
+
+      if (source === "calendar") {
+        const filtered = calendarData.data.items.filter((x) => {
+          return x.id === tripData.id;
+        });
+
+        const filterByName = calendarData.data.items
+          .filter((x) => {
+            return x.summary === tripData.title;
+          })
+          .filter((x) => {
+            return x.id !== tripData.id;
+          })
+          .sort((a, b) => {
+            return new Date(a.start.dateTime) - new Date(b.start.dateTime);
+          });
+
+        const filterTripData = Object.keys(trips)
+          .filter((x) => {
+            if (trips[x].calendarTitle) {
+              return trips[x].calendarTitle.includes(tripData.title);
+            }
+            return false;
+          })
+          .map((x) => trips[x])[0];
+          console.log(filterTripData);
+        setTripDetails(filterTripData);
+        setAllTrips(filterByName);
+        setSelectedTrip(filtered[0]);
+      } else if (source === "booking") {
+        try {
+          const events = calendarData.data.items;
+
+          const calendarTitles = tripData.calendarTitle;
+
+          const getResults = () => {
+            const dat = [];
+            calendarTitles.map((x) => {
+              const filtered = events.filter((y) => {
+                return y.summary.trim() === x.trim();
+              });
+
+              dat.push(filtered);
+            });
+            return dat.flat();
+          };
+
+          const res = getResults();
+          console.log(tripData)
+          setTripDetails(tripData);
+
+          setAllTrips(res);
+
+          console.log(res);
+        } catch (e) {
+          console.log(e);
+        }
+      }
+    };
+
+    load();
+  }, [trips, tripData]);
+
+  if (tripDetails) {
+    return (
+      <Styled.Container>
+        <Styled.Title>Book now!</Styled.Title>
+        <Styled.FormContainer>
+          <Form>
+            <FormGroup>
+              <Label for="exampleSelect">Select a date</Label>
+              <Input type="select" name="select" id="exampleSelect">
+                {tripDate && <option>{tripDate}</option>}
+                {allTrips &&
+                  allTrips.map((x) => {
+                    const date = new Date(x.start.dateTime);
+                    const formattedDate = date.toUTCString();
+                    return (
+                      <option value={Date.parse(date)}>{formattedDate}</option>
+                    );
+                  })}
+              </Input>
+            </FormGroup>
+            <FormGroup>
+              <Label for="name">Name</Label>
+              <Input
+                type="text"
+                name="name"
+                id="name"
+                placeholder="Enter your name"
+                onChange={onInputUpdate}
+              />
+            </FormGroup>
+            <FormGroup>
+              <Label for="email">Email</Label>
+              <Input
+                type="email"
+                name="email"
+                id="email"
+                placeholder="Enter your email"
+                onChange={onInputUpdate}
+              />
+            </FormGroup>
+            <FormGroup>
+              <Label for="phone">Phone Number</Label>
+              <Input
+                type="number"
+                name="phone"
+                id="phone"
+                placeholder="Enter your phone number"
+                onChange={onInputUpdate}
+              />
+            </FormGroup>
+            <FormGroup>
+              <Styled.ContainerVert>
+                <Styled.Text>
+                  Deposit Price: ${tripDetails?.price.deposit}
+                </Styled.Text>
+                <Styled.Text>
+                  Total Price: $
+                  {tripDetails?.price.deposit + tripDetails?.price.balance}
+                </Styled.Text>
+              </Styled.ContainerVert>
+            </FormGroup>
+
+            <Paypal id={tripDetails?.id} />
+            <Styled.Container>
+              Please call (732) - 344 - 8833 to book a charter
+            </Styled.Container>
+          </Form>
+        </Styled.FormContainer>
+      </Styled.Container>
+    );
+  }
+
+  return <></>;
+};
+
+export default BookTrip;

src/components/common/carousel/Carousel.js → Client/src/components/common/carousel/Carousel.js

@@ -1,63 +1,56 @@
-import React, { useState, useMemo } from 'react';
-import { Carousel } from 'react-bootstrap';
-import styled from 'styled-components';
-
+import React, { useState, useMemo } from "react";
+import { Carousel } from "react-bootstrap";
+import styled from "styled-components";
 
 const Container = styled.div`
   width: 100%;
   max-width: 600px;
   min-width: 599px;
-  height: auto; 
+  height: 100%;
   max-height: 400px;
   .carousel-control-prev,
   .carousel-control-next {
     display: none;
   }
   min-height: ${(props) => {
     if (props.height) {
-      return props.height + 'px'
+      return props.height + "px";
     }
-    return '399px';
+    return "399px";
   }};
-  @media screen and (max-width: 1024px) { 
+  @media screen and (max-width: 1024px) {
     max-width: 100%;
     min-width: 100%;
   }
-  .carousel-inner { 
+  .carousel-inner {
     min-width: 599px;
     max-height: 400px;
     min-height: ${(props) => {
-    if (props.height) {
-      return props.height + 'px'
-    }
-    return '399px';
-  }};
-    @media screen and (max-width: 1024px) { 
+      if (props.height) {
+        return props.height + "px";
+      }
+      return "399px";
+    }};
+    @media screen and (max-width: 1024px) {
       max-width: 100%;
       min-width: 100%;
     }
   }
 `;
 
-
 const CarouselComponent = (props) => {
-
-  const {
-    items,
-    height
-  } = props
+  const { items, height } = props;
 
   const [index, setIndex] = useState(0);
 
   const carouselItems = useMemo(() => {
-    return items && items.map((x) => {
-      return (
-        <Carousel.Item>
-          {x}
-        </Carousel.Item>
-      )
-    })
-  }, [items])
+    return (
+      items &&
+      items.map((x) => {
+        return <Carousel.Item>{x}</Carousel.Item>;
+      })
+    );
+  }, [items]);
 
   const handleSelect = (selectedIndex, e) => {
     setIndex(selectedIndex);
@@ -66,14 +59,13 @@ const CarouselComponent = (props) => {
   return (
     <Container height={height}>
       <Carousel activeIndex={index} onSelect={handleSelect}>
-        {
-          carouselItems && carouselItems.map((x, i) => {
+        {carouselItems &&
+          carouselItems.map((x, i) => {
             return x;
-          })
-        }
+          })}
       </Carousel>
     </Container>
   );
-}
+};
 
-export default CarouselComponent;
+export default CarouselComponent;