pcm-shared-components 2.0.40 → 2.0.42

package/dist/components/Date/DatePickerReactStyled/DateRangeCalendar/css/style.css

@@ -0,0 +1,119 @@
+.login_splash{
+    /* Login splash screen */
+    /* background-image: linear-gradient( rgba(18, 100, 36, 0.6) , rgba(245, 160, 3, 0.6)),url('/assets/images/backgrounds/marshmellows.jpg') !important; */
+  background-repeat: no-repeat;
+  background-size: cover;
+  
+  }
+  
+  [class^="withRouter-Login"]{
+    /* controls the gradient background when in mobile view the area behind the login box */
+    background: linear-gradient(to right, rgb(70, 83, 52) 0%, #526B33 100%) !important;
+  }
+  
+  /* Override the grid drop down so it's not long when in vertical mode so the next calendar button are always near the bottom of the dropdown */
+  [data-testid="MonthGrid"] {
+    height: 100% !important; /* Adjust as necessary */
+  }
+
+  
+  .back_blocks_small{
+  background-color:#f1632f;
+  border-radius: 13px;
+  padding: 2px;
+  margin: auto;
+  height: 20px;
+  color:#fff;
+  width: 80px;
+  }
+  
+  
+  .small_header {
+    height: 350px !important; /* any arbitrary height but best at the minimum initial height you would want. */
+    overflow: hidden;
+    transition: all 0.5s ease;
+  }
+  .small_title {
+    padding-top: 0px !important; /* any arbitrary height but best at the minimum initial height you would want. */
+    transition: all 0.5s ease;
+  }
+  
+  .white_stroke{
+    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
+               0px 8px 13px rgba(0, 0, 0, 0.1),
+               0px 18px 23px rgba(0, 0, 0, 0.1);
+    color:white;
+  }
+  
+  .bottom_border input{
+    border-bottom: solid 1px #a0a0a0;
+  }
+  
+  .gated_day_style{
+    display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: center;
+      -webkit-justify-content: center;
+      -ms-flex-pack: center;
+      justify-content: center;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      height: 100%;
+      width: 100%;
+      border: 1px dashed white;
+  }
+  .non_gated_day_style{
+    display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: center;
+      -webkit-justify-content: center;
+      -ms-flex-pack: center;
+      justify-content: center;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      height: 100%;
+      width: 100%;
+  }
+  
+  /* Kinda stuck at version 1.5.0 for the date picker.  In the newest version the z index is working fine with the material ui components.  
+  this css will make it so the date picker range box is over the material ui components */
+  .zme > div{
+    z-index: 9999;
+  }
+  
+  
+  .sticky_menu {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    background-color: #fff;
+    
+    
+  }
+  @media only screen and (min-width: 780px) {
+    .sticky_menu {
+      top: 0;
+      position: -webkit-sticky;
+      position: sticky;
+    }
+    .sticky_search_bar {
+      top: -60px;
+      position: -webkit-sticky;
+      position: sticky;
+    }
+  }
+  
+  .sticky_search_bar {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    /* background-color: #BFFFF3; */
+  }

package/dist/components/Date/{DateRangeCalendar → DatePickerReactStyled/DateRangeCalendar}/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { orange } from '@mui/material/colors';
 import { DateRangeInput } from '@datepicker-react/styled';
 import { ThemeProvider } from 'styled-components';
+import { commonCalendarTheme } from '../common/theme';
 import './css/style.css';
 
 /**
@@ -72,27 +73,9 @@ export const DateRangeCalendar = props => {
       zIndex: 100
     }
   }, /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: {
-      breakpoints: ['32em', '48em', '64em'],
-      reactDatepicker: {
-        daySize: [36, 40],
-        fontFamily: 'system-ui, -apple-system',
-        colors: {
-          accessibility: orange[900],
-          selectedDay: orange[400],
-          selectedDayHover: orange[900],
-          primaryColor: orange[700]
-        },
-        inputFontSize: 16,
-        selectDateDateFontSize: 18,
-        dateRangeArrowIconColor: orange[700],
-        inputLabelBorder: variant === 'outlined' ? undefined : 'none',
-        datepickerBorderRadius: 5,
-        datepickerZIndex: zIndex,
-        dateRangeZIndex: zIndex,
-        dateSingleZIndex: zIndex
-      }
-    }
+    theme: commonCalendarTheme({
+      ...props
+    })
   }, /*#__PURE__*/React.createElement(DateRangeInput, {
     phrases: {
       datepickerStartDateLabel: i18next.t('common.app.arrival_date'),

package/dist/components/Date/DatePickerReactStyled/DateRangeCalendar/storybook/index.docs.mdx

@@ -0,0 +1,122 @@
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+import DateRangeCalendar from '..'
+
+
+# DateRangeCalendar
+
+## Importing the component in your project.
+
+```js
+import {DateRangeCalendar} from 'pcm-shared-components';
+```
+
+### Usage
+Check out the index.stories.jsx file DateRangeCalendarComp to see a full simple example of how it whould be used in.
+
+#### Minimum REQUIRED setup NEEDED to get the DateRangeCalendar working:
+```js
+import React, {useState} from 'react'
+import {DateRangeCalendar } from 'pcm-shared-components';
+
+function App() {
+
+  //States
+  const [state, setState] = useState({ startDate: null, endDate: null, focusedInput: 'startDate' })
+
+  //Functions
+  const handleDatesChange = (data) => {
+    setState(data)
+  }
+  const handleOnFocusChange = (data) =>{
+    setState((previousState)=>{return{...previousState,focusedInput:data}});
+  }
+
+  return (
+    <DateRangeCalendar
+      onDatesChange={handleDatesChange}
+      onFocusChange={handleOnFocusChange}
+      startDate={state.startDate} // Date or null
+      endDate={state.endDate} // Date or null
+      focusedInput={state.focusedInput} // START_DATE, END_DATE or null
+      i18next={i18next}
+    />
+  )
+}
+```
+### See a Codesandbox example with styling
+https://codesandbox.io/s/react-date-picker-rangeinput-jw726?from-embed=&file=/src/index.js:2503-2537 
+
+### Styling Props
+The following are the theme props taken form the codesandbox from above so I have a local copy of the possible props.
+```js
+ <ThemeProvider
+      theme={{
+        breakpoints: ["32em", "48em", "64em"],
+        reactDatepicker: {
+          daySize: [36, 36],
+          fontFamily: "system-ui, -apple-system",
+          colors: {
+            primaryColor: "#4B35D2",
+            accessibility: "#4B35D2",
+            selectedDay: "#EEEDFD",
+            selectedDayHover: "#faf9fd",
+            normalDayHover: "#faf9fd"
+          },
+
+          dayLabelFontSize: 10,
+          dayLabelColor: "#8F8B9B",
+
+          selectDateLabelFontSize: 10,
+          selectDateLabelColor: "#D0CED5",
+          selectDateDateFontSize: 14,
+          selectDateDateColor: "#34323A",
+          selectDateBorderColor: "#4B35D2",
+
+          navButtonBorder: "none",
+
+          monthLabelFontSize: 16,
+          monthLabelFontWeight: 600,
+
+          dayBackground: "#ffffff",
+          dayBorderColor: "transparent",
+          dayColor: "#34323A",
+          dayFontSize: 15,
+          daySelectedBorderColor: "transparent",
+          daySelectedColor: "#34323A",
+          daySelectedHoverColor: "#000000",
+          dayHoverColor: "#000000",
+          dayHoverBackground: "#EEEDFD",
+          //dayHoverRangeColor: "#000000", // attention
+          dayHoverRangeBackground: "#EEEDFD",
+          dayAccessibilityBorderColor: "none",
+
+          inputLabelDisplay: "flex",
+          inputLabelBorder: "none",
+          inputLabelMargin: 0,
+          inputPadding: 0,
+          inputBorder: "none",
+          inputFontSize: 14,
+          inputColor: "#34323A",
+          inputActiveBoxShadow: "none",
+          inputBackground: "none",
+
+          datepickerZIndex: 1,
+          datepickerBoxShadow: "0px 5px 15px #28128733",
+          datepickerBorderRadius: 5,
+          datepickerPadding: 25,
+          datepickerPosition: "absolute",
+          datepickerMonthsGridGap: 10,
+
+          dateRangeBorder: "none",
+          dateRangeArrowIconColor: "#34323A",
+          dateRangeStartDateInputPadding: 0,
+          dateRangeEndDateInputPadding: 0,
+          dateRangeDatepickerWrapperLeft: 30,
+          dateRangeDatepickerWrapperTop: 80
+        }
+      }}
+    >
+```
+
+
+<ArgsTable of={DateRangeCalendar} />

package/dist/components/Date/DatePickerReactStyled/DateRangeCalendar/storybook/index.stories.js

@@ -0,0 +1,74 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { useState } from 'react';
+import DateRangeCalendar from '..';
+import IndexDocs from './index.docs.mdx';
+import i18next from 'i18next';
+const DateRangeCalendarComp = props => {
+  //State
+  const [state, setState] = useState({
+    startDate: null,
+    endDate: null,
+    focusedInput: null
+  });
+
+  //Functions
+  const handleOnDayRender = date => {
+    if (new Date(date).getDate() == 20 || new Date(date).getDate() == 21) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "flex flex-col bg-yellow-100/50 h-full w-full m-auto"
+      }, /*#__PURE__*/React.createElement("span", null, "\uD83E\uDD81"), /*#__PURE__*/React.createElement("span", {
+        className: "h-full text-center m-auto "
+      }, new Date(date).getDate()));
+    } else {
+      return /*#__PURE__*/React.createElement("span", null, new Date(date).getDate());
+    }
+  };
+  const handleIsDateBlocked = date => {
+    try {
+      return new Date(date).getDate() == 16;
+    } catch (error) {
+      console.error(error);
+    }
+    return false;
+  };
+  const handleOnDatesChange = data => {
+    setState(data);
+  };
+  const handleOnFocusChange = data => {
+    setState(previousState => {
+      return {
+        ...previousState,
+        focusedInput: data
+      };
+    });
+  };
+  return /*#__PURE__*/React.createElement(DateRangeCalendar, _extends({
+    onDayRender: date => handleOnDayRender(date),
+    isDateBlocked: handleIsDateBlocked,
+    onDatesChange: handleOnDatesChange,
+    onFocusChange: handleOnFocusChange,
+    startDate: state.startDate,
+    endDate: state.endDate,
+    focusedInput: state.focusedInput,
+    minBookingDays: 2,
+    i18next: i18next
+  }, props));
+};
+export default {
+  title: 'Date/DateRangeCalendar',
+  component: DateRangeCalendarComp,
+  argTypes: {},
+  parameters: {
+    docs: {
+      // inlineStories: true,
+      page: IndexDocs
+    }
+  }
+};
+const DateRangeCalendarTemplate = args => /*#__PURE__*/React.createElement(DateRangeCalendarComp, args);
+export const DateRangeCalendarExample = DateRangeCalendarTemplate.bind({});
+DateRangeCalendarExample.args = {
+  Help: 'Note not all props listed see docs for full list...',
+  variant: 'standard',
+  numberOfMonthsVisible: 2
+};

package/dist/components/Date/DatePickerReactStyled/common/theme.js

@@ -0,0 +1,49 @@
+import { orange } from '@mui/material/colors';
+
+// Common settings shared across themes
+const baseThemeSettings = {
+  breakpoints: ['32em', '48em', '64em'],
+  reactDatepicker: {
+    fontFamily: 'system-ui, -apple-system',
+    dayLabelFontSize: 12,
+    dayLabelColor: "#8F8B9B",
+    dayBorderColor: "transparent",
+    dayFontSize: 15,
+    daySelectedBorderColor: "transparent",
+    inputFontSize: 16,
+    selectDateDateFontSize: 18,
+    datepickerBorderRadius: 5,
+    dayAccessibilityBorderColor: "none"
+  }
+};
+
+// Main function to get the common calendar theme with variations
+export const commonCalendarTheme = ({
+  variant = 'outlined',
+  zIndex = 1000,
+  daySize = [36, 40],
+  datepickerPadding = 25
+}, themeConfig = {}) => {
+  const theme = {
+    ...baseThemeSettings,
+    reactDatepicker: {
+      ...baseThemeSettings.reactDatepicker,
+      daySize: daySize,
+      colors: {
+        primaryColor: orange[900],
+        accessibility: orange[400],
+        selectedDay: orange[400],
+        selectedDayHover: orange[900],
+        // normalDayHover: 'transparent',
+        ...themeConfig.colors // Allows overriding color settings
+      },
+      inputLabelBorder: variant === 'outlined' ? undefined : 'none',
+      datepickerZIndex: zIndex,
+      dateRangeZIndex: zIndex,
+      dateSingleZIndex: zIndex,
+      datepickerPadding: datepickerPadding,
+      ...themeConfig // Spread additional custom configuration
+    }
+  };
+  return theme;
+};

package/dist/components/Date/FancyDate/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import moment from 'moment';
+export const FancyDate = ({
+  date
+}) => {
+  const formattedDate = moment(date).locale('en').format('dddd MMMM Do');
+  const dateParts = formattedDate.split(' ');
+  const month = dateParts[1].toUpperCase();
+  const day = dateParts[2];
+  const weekday = dateParts[0].toUpperCase();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col justify-center items-center px-8 py-6 w-full h-full text-white font-fancy-date",
+    style: {
+      background: 'linear-gradient(45deg,  rgb(92, 132, 48) 0%, rgb(124, 179, 66) 40%, rgb(241, 100, 47) 100%)',
+      backgroundSize: 'cover',
+      backdropFilter: 'blur(10px)'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "absolute top-20 font-bold text-6xl z-10"
+  }, month), /*#__PURE__*/React.createElement("div", {
+    className: "absolute top-64"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "mt-4 font-bold text-grey-800 text-2xl z-10"
+  }, weekday), /*#__PURE__*/React.createElement("span", {
+    className: "ml-8 mt-4 font-bold text-4xl z-10"
+  }, day)));
+};
+export default FancyDate;

package/dist/components/Date/PricingCalendar/css/style.css

@@ -0,0 +1,210 @@
+/* reference
+https://stackoverflow.com/questions/54170313/how-to-make-the-react-day-picker-wide-to-fill-all-the-screen-in-a-web-app-mobile */
+
+
+:root {
+    --green_50: #e8f5e9; 
+    --green_200: #c8e6c9; 
+    --green_300: #81c784; 
+    --green_400: #66bb6a; 
+    --green_500: #4caf50; 
+    --green_600: #43a047; 
+    --green_pitchcamp: #72ae63;
+    --orange_0: #f1632f;
+  }
+
+  
+
+.arrow_box {
+	position: relative;
+	background: transparent;
+	border: none;
+}
+.arrow_box:after, .arrow_box:before {
+	left: 45%;
+	top: -50px;
+	border: solid transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+}
+
+.arrow_box:after {
+	border-color: rgba(212, 209, 213, 0);
+	border-left-color: var(--green_pitchcamp);
+	border-width: 50px;
+	margin-top: -50px;
+}
+.arrow_box:before {
+	border-color: rgba(255, 255, 255, 0);
+	border-left-color: #ffffff;
+	border-width: 51px;
+	margin-top: -51px;
+}
+
+  .DayPicker-Caption{
+      background-color: var(--green_pitchcamp) !important;
+      /* padding:10px; */
+      margin: 0px;      
+      color: #fff;
+      border-top-right-radius: 5px;
+      border-top-left-radius: 5px;
+
+  }
+.DayPicker-WeekdaysRow{
+    /* background-color: var(--green_50); */
+    border-bottom: solid 2px #fff !important;  
+}
+.rdp-month{
+    margin-top: 0px !important;   
+    margin-bottom: 0px !important; 
+    margin-right: 0px !important;
+
+    /* Used for Firefox PITCH-53 */
+    width: 100% !important;
+
+  }
+  @media screen and (max-width: 600px) {
+    .rdp-month {
+        margin-top: 5px !important; 
+        padding:0px;
+        margin: 0px;
+    }
+  }
+
+.rdp-nav_button_previous{
+    /* background-image: url('/assets/images/icons/left_arrow.svg') !important;   */
+    background-color: white; 
+    /* margin-right: 40px !important;  */
+    /* border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px; */
+
+    border: solid #ededed 1px;
+    border-top-right-radius: 1px;
+    border-bottom-right-radius: 1px;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+  }
+
+  .rdp-nav_button_next{
+    /* background-image: url('/assets/images/icons/right_arrow.svg') !important;    */
+    background-color: white; 
+    border: solid #ededed 1px;
+    border-top-left-radius: 1px;
+    border-bottom-left-radius: 1px;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+/* .rdp-nav{
+    top: 5px !important;;
+    height: 40px !important;
+    width: 40px !important;
+} */
+
+.rdp-table {
+  width: 100%;
+  height: 100%;
+  max-width: 100% !important;
+  /* border-collapse: unset !important; */
+  border-collapse: collapse;
+  border-spacing: 0;
+  border: solid #ededed 1px;
+
+}
+
+.rdp-months {
+  font-size: 14px;
+  
+}
+@media screen and (max-width: 600px) {
+  .rdp-months {
+      font-size: 9px;
+    }
+  }
+
+.rdp {
+    position: relative;
+    flex-direction: row;
+    user-select: none;
+    outline: none;
+    width: 100%;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+
+.DayPicker-Months {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+.rdp-row{
+  
+  height: 100px !important;
+  border-top: solid #ededed 1px;
+  height: 100px !important;
+  
+}
+@media screen and (max-width: 800px) {
+  .rdp-row {
+    height: 70px !important;
+    }
+  }
+
+
+.rdp-cell{
+  /* padding: 12px !important; */
+  border-left: solid #ededed 1px;
+}
+.rdp-cell:hover{
+  background-color: #e6eefd;
+  border: solid #0069ff 1px;
+}
+
+.Selectable .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
+    background-color: #dbdbdb !important;
+    color: #000;
+  }
+  .Selectable .DayPicker-Day {
+    border-radius: 0 !important;
+  }
+  .Selectable .DayPicker-Day--start {
+      background-color: var(--green_400) !important;
+      border-top-left-radius: 5% !important;
+      border-bottom-left-radius: 5% !important;
+    }
+    
+    .Selectable .DayPicker-Day--end {
+        background-color: var(--green_400) !important;
+    border-top-right-radius: 5% !important;
+    border-bottom-right-radius: 5% !important;
+  }
+  
+  .DayPicker-Day.DayPicker-Day--end.DayPicker-Day--selected.DayPicker-Day--outside, .DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected.DayPicker-Day--outside{
+      /* color: #ecf6fb !important; */
+      background-color: transparent !important;
+  }
+  .DayPicker-Day.DayPicker-Day--today{
+      color: var(--orange_0) !important;
+  }
+
+  
+
+
+  /* .DayPicker-Day{
+
+    height: 60px !important;
+    width: 60px !important;
+  } */
+
+
+
+
+
+
+