pcm-shared-components 2.0.41 → 2.0.42

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

@@ -0,0 +1,124 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { DayPicker } from 'react-day-picker';
+import 'react-day-picker/dist/style.css';
+import './css/style.css';
+import moment from 'moment';
+/**
+ * 
+ * ## Importing the component in your project
+ * 
+ ```js
+ import {PricingCalendar} from 'pcm-shared-components';
+ ```
+ *
+ */
+export const PricingCalendar = props => {
+  const {
+    i18next,
+    startDate,
+    endDate,
+    rateObject,
+    RenderDay,
+    setCurrentMonth
+  } = props;
+  const [month, setMonth] = useState(moment().toDate());
+  useEffect(() => {
+    setMonth(moment(startDate).toDate());
+  }, [startDate]);
+  useEffect(() => {
+    if (setCurrentMonth) {
+      setMonth(moment(setCurrentMonth).toDate());
+    }
+  }, [setCurrentMonth]);
+  const DefaultRenderDayComponent = ({
+    date,
+    foundRate
+  }) => {
+    let dayStyle;
+    if (date.getDay() === 6 || date.getDay() === 0) {
+      //Make saturday and sunday a different color
+      dayStyle = 'bg-grey-100 hover:bg-indigo-100/25';
+    } else {
+      dayStyle = 'transparent hover:bg-indigo-100/25';
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: `flex flex-col justify-start h-full w-full ${dayStyle}`
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `flex flex-row m-4 justify-between h-auto w-auto text-left font-800 text-14`
+    }, /*#__PURE__*/React.createElement("div", null, date.getDate())), foundRate && /*#__PURE__*/React.createElement("div", {
+      className: "w-full text-center my-auto text-1xl font-bold"
+    }, Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 0
+    }).format(foundRate.rate)));
+  };
+  function findObjectByDate(objectArray, dateString) {
+    // Generated by AI and is much faster then using the .find method.
+    // Create a lookup table with date strings as keys
+    const lookupTable = {};
+    for (const obj of objectArray) {
+      const dateStr = obj.date;
+      if (!lookupTable[dateStr]) {
+        lookupTable[dateStr] = obj;
+      }
+    }
+    // Look up the object by date string
+    return lookupTable[dateString] || null;
+  }
+  const handleDayRender = ({
+    date
+  }, ...props) => {
+    // const foundRate = rateObject.find((item)=> moment(date).isSame(item.date, "day") );
+    const foundRate = findObjectByDate(rateObject, moment(date).format('YYYY-MM-DD'));
+    if (foundRate && RenderDay) {
+      return /*#__PURE__*/React.createElement(RenderDay, {
+        date: date,
+        foundRate: foundRate
+      });
+    } else {
+      return /*#__PURE__*/React.createElement(DefaultRenderDayComponent, {
+        date: date,
+        foundRate: foundRate ? foundRate : undefined
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DayPicker, {
+    components: {
+      Day: handleDayRender
+    },
+    defaultMonth: moment(startDate).toDate(),
+    month: month,
+    onMonthChange: setMonth,
+    fromDate: moment(startDate).toDate(),
+    toDate: moment(endDate).toDate()
+
+    // captionLayout="dropdown-buttons" fromYear={moment().add(-5,'years').year()} toYear={moment().add(5, 'years').year()}
+    // selectedDays={[moment(startDate), { from: moment(startDate).toDate(), to: new moment(endDate).toDate() }]}
+  }));
+};
+export default PricingCalendar;
+PricingCalendar.defaultProps = {
+  i18next: undefined,
+  RenderDay: undefined,
+  rateObject: [],
+  startDate: moment(),
+  endDate: moment().add(1, 'days'),
+  i18next: undefined,
+  setCurrentMonth: moment().toDate()
+};
+PricingCalendar.propTypes = {
+  /** The current month to display */
+  setCurrentMonth: PropTypes.instanceOf(Date),
+  /** The component to render the day, receives one prop date and the rateObject if a match was found*/
+  RenderDay: PropTypes.elementType,
+  /** The daily rate object  */
+  rateObject: PropTypes.array,
+  /** The start date of the calendar */
+  startDate: PropTypes.instanceOf(Date),
+  /** The end date of the calendar */
+  endDate: PropTypes.instanceOf(Date),
+  /** i18next localization to use for the component. Don't use the library localization or else it won't load properly on the consuming application */
+  i18next: PropTypes.any
+};

package/dist/components/Dialogs/GenericAppBar/components/GenericAppBarSubMenu.js

@@ -21,7 +21,6 @@ const GenericAppBarSubMenu = ({
     }
     // handleMobileMenuClose();
   };
-
   useEffect(() => {
     setSubMenuOpen(Boolean(anchorSubMenu));
   }, [anchorSubMenu]);

package/dist/components/Drawing/ImageCanvasDraw/components/Controls.js

@@ -162,7 +162,6 @@ const Controls = props => {
       });
       // saveableCanvas.current.eraseAll();
     },
-
     marks: imageScaleMarks,
     min: 1.5,
     max: 2.5

package/dist/components/Icons/ImageAssets/index.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ThemeProvider } from '@mui/system';
+import { createTheme, useTheme } from '@mui/material/styles';
+import clsx from 'clsx';
+
+/**
+ * Simply loads up any image, svg etc into an image object.
+ * 
+ *
+ * ### Importing the component
+
+```//PitchCamp shared component
+import {ImageAssets} from 'pcm-shared-components';
+```
+
+ * 
+ */
+export const ImageAssets = props => {
+  const {
+    className,
+    theme,
+    imagePath
+  } = props;
+  const compTheme = theme ? theme : useTheme();
+  const defaultTheme = createTheme(compTheme);
+  const Image = () => {
+    // get the filename from the path and remove the extension
+    try {
+      const filename = imagePath.split('/').pop().split('.')[0];
+      return /*#__PURE__*/React.createElement("img", {
+        className: clsx(className),
+        src: imagePath,
+        alt: filename
+      });
+    } catch (err) {
+      console.log(err);
+    }
+    return null;
+  };
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: defaultTheme
+  }, /*#__PURE__*/React.createElement(Image, null));
+};
+export default ImageAssets;
+ImageAssets.defaultProps = {
+  className: '',
+  tooltipText: 'say something',
+  imagePath: '',
+  theme: undefined
+};
+ImageAssets.propTypes = {
+  /** className override */
+  className: PropTypes.string,
+  /** The path to the image we want to load */
+  imagePath: PropTypes.string,
+  /** Just a tooltip text */
+  tooltipText: PropTypes.string,
+  /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
+  theme: PropTypes.object
+};

package/dist/components/Images/HorizontalImageTile/index.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ThemeProvider } from '@mui/system';
+import { createTheme, useTheme } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import AppsIcon from '@mui/icons-material/Apps';
+import moment from 'moment';
+import FancyDate from '../../Date/FancyDate';
+export const HorizontalImageTile = ({
+  pictures,
+  event_date,
+  onImageClick,
+  view_all_images_str,
+  theme
+}) => {
+  const compTheme = theme ? theme : useTheme();
+  const defaultTheme = createTheme(compTheme);
+  const getImageRounded = (numImages, index) => {
+    if (numImages === 4 && index === 2 || numImages === 3 && index === 1 || numImages === 2 && index === 0) {
+      return "rounded-tr-lg rounded-br-lg";
+    } else if (numImages === 5 && index === 1) {
+      return "rounded-tr-lg";
+    } else if (numImages === 5 && index === 3) {
+      return "rounded-br-lg";
+    }
+  };
+  const ImageTile = ({
+    pictures,
+    height
+  }) => {
+    //limit the number of pictures to 5
+    const numImages = pictures.slice(0, 5).length;
+
+    // console.log("numImages",numImages)
+    if (numImages === 1) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "flex  ",
+        style: {
+          height: height,
+          maxHeight: height
+        }
+      }, /*#__PURE__*/React.createElement("img", {
+        src: pictures[0],
+        alt: "",
+        className: " w-full cursor-pointer duration-300 hover:brightness-75 h-auto object-cover rounded-lg shadow-md"
+      }));
+    }
+    let leftWidth = "w-1/2";
+    let rightWidth = "w-1/2";
+    if (numImages === 2) {
+      leftWidth = "w-1/2";
+      rightWidth = "w-1/2";
+    } else if (numImages === 3) {
+      leftWidth = "w-1/2";
+      rightWidth = "w-1/2 grid grid-cols-2 gap-6";
+    } else if (numImages === 4) {
+      leftWidth = "w-1/2";
+      rightWidth = "w-1/2 grid grid-cols-3 gap-6";
+    } else if (numImages >= 5) {
+      leftWidth = "w-1/2";
+      rightWidth = "w-1/2 grid grid-cols-2 grid-rows-2 gap-6";
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: "relative flex justify-between ",
+      style: {
+        height: height,
+        maxHeight: height
+      },
+      onClick: onImageClick
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${leftWidth} mr-6`
+    }, /*#__PURE__*/React.createElement("img", {
+      src: pictures[0],
+      alt: "",
+      className: "w-full h-full cursor-pointer duration-300 hover:brightness-75 object-cover rounded-tl-lg rounded-bl-lg shadow-md"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: rightWidth
+    }, pictures.slice(1, 5).map((image, index) => /*#__PURE__*/React.createElement("img", {
+      key: index,
+      src: image,
+      alt: "",
+      className: `w-full h-full cursor-pointer duration-300 hover:brightness-75 object-cover  shadow-md ${getImageRounded(numImages, index)}`
+    }))), numImages >= 2 && /*#__PURE__*/React.createElement("div", {
+      className: "absolute bottom-0 right-0 m-6"
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: "outlined",
+      className: 'bg-white hover:bg-grey-300',
+      startIcon: /*#__PURE__*/React.createElement(AppsIcon, null)
+    }, view_all_images_str)));
+  };
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: defaultTheme
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "w-full"
+  }, pictures?.length > 0 ? /*#__PURE__*/React.createElement(ImageTile, {
+    pictures: pictures,
+    height: 320
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: " h-136 "
+  }, /*#__PURE__*/React.createElement(FancyDate, {
+    date: event_date
+  }))));
+};
+HorizontalImageTile.propTypes = {
+  pictures: PropTypes.arrayOf(PropTypes.string),
+  onImageClick: PropTypes.func,
+  theme: PropTypes.object,
+  view_all_images_str: PropTypes.string
+};
+export default HorizontalImageTile;

package/dist/components/Images/VerticalImageTile/index.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ThemeProvider } from '@mui/system';
+import { createTheme, useTheme } from '@mui/material/styles';
+export const VerticalImageTile = ({
+  pictures,
+  theme
+}) => {
+  // limit the number of pictures to 5
+  const numImages = pictures.length;
+  if (numImages === 1) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "flex"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: pictures[0],
+      alt: "",
+      className: "w-full h-full max-h-512 duration-300  object-cover "
+    }));
+  }
+  let bottomHeight = "flex flex-wrap ";
+  const compTheme = theme ? theme : useTheme();
+  const defaultTheme = createTheme(compTheme);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: defaultTheme
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "relative flex flex-col justify-between"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ``
+  }, /*#__PURE__*/React.createElement("img", {
+    src: pictures[0],
+    alt: "",
+    className: "w-full h-400 duration-300  object-cover rounded-t-md "
+  })), /*#__PURE__*/React.createElement("div", {
+    className: `${bottomHeight} w-full flex flex-row `
+  }, pictures.slice(1, pictures.length).map((image, index) => {
+    // let imageHeight = "w-full h-auto";
+    let imageHeight = index % 3 === 0 ? "w-full h-400" : "w-1/2 h-200";
+
+    // make it so that the last image is full width if there are an odd number of pictures
+    if (pictures.length % 2 === 0 && index === pictures.length - 2 && index % 3 === 0) {
+      imageHeight = "w-full h-400";
+    }
+    return /*#__PURE__*/React.createElement("img", {
+      key: index,
+      src: image,
+      alt: "",
+      className: ` ${imageHeight} duration-300  object-cover `
+    });
+  })))));
+};
+VerticalImageTile.propTypes = {
+  pictures: PropTypes.arrayOf(PropTypes.string),
+  theme: PropTypes.object
+};
+export default VerticalImageTile;

package/dist/components/Layout/SimpleTab/index.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import AppBar from '@mui/material/AppBar';
@@ -22,14 +22,12 @@ const useStyles = makeStyles(() => ({
     // color: 'orange !important',
     // },
   },
-
   indicator: {
     height: 3,
     borderRadius: 25
     // backgroundColor: 'orange',
   }
 }));
-
 export const SimpleTab = props => {
   const {
     childrenTabs,

package/dist/components/Menus/ReusablePopupMenu/index.js

@@ -43,7 +43,7 @@ export const ReusablePopupMenu = props => {
   };
   const childrenWithProps = Children.map(children, child => {
     // Checking isValidElement is the safe way and avoids a typescript
-    if ( /*#__PURE__*/isValidElement(child)) {
+    if (/*#__PURE__*/isValidElement(child)) {
       return /*#__PURE__*/React.createElement(Tooltip, {
         title: tooltipTitle.length > 0 ? tooltipTitle : ''
       }, /*#__PURE__*/cloneElement(child, {

package/dist/components/Platform/PlatformPaymentPlans/index.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider } from '@mui/system';

package/dist/index.js

@@ -21,7 +21,8 @@ import DropdownButton from './components/Buttons/DropdownButton';
 import translationResources from './locals/translationResources';
 import coreLocals from './locals/coreLocals';
 import currencySymbol from './locals/currencySymbol';
-import DateRangeCalendar from './components/Date/DateRangeCalendar';
+import DateRangeCalendar from './components/Date/DatePickerReactStyled/DateRangeCalendar';
+import DateCalendar from './components/Date/DatePickerReactStyled/DateCalendar';
 import SimpleLabel from './components/Labels/SimpleLabel';
 import CurrencyTextInput from './components/TextBoxes/CurrencyTextInput';
 import ImageStack from './components/Images/ImageStack';
@@ -29,4 +30,10 @@ import PlatformPaymentPlans from './components/Platform/PlatformPaymentPlans';
 import PlatformPlanTitles from './components/Platform/PlatformPlanTitles';
 import PlatformPlanPrices from './components/Platform/PlatformPlanPrices';
 import LoadingBackdrop from './components/Loaders/LoadingBackdrop';
-export { TestButton, CodeHighlight, CustomFab, HelpButton, GenericDialogWindow, PcSharedComponentThemeInheritor, ImageCanvasDraw, PCMScrollbar, TwoColumnDisplay, SimpleTab, HrefLink, GenericAppBar, ReusablePopupMenu, SearchBar, TillButton, ProductItemButton, DropdownButton, translationResources, coreLocals, currencySymbol, DateRangeCalendar, SimpleLabel, CurrencyTextInput, ImageStack, PlatformPaymentPlans, PlatformPlanTitles, PlatformPlanPrices, LoadingBackdrop, SimpleAccordion };
+import PricingCalendar from './components/Date/PricingCalendar';
+import FancyDate from './components/Date/FancyDate';
+import HorizontalImageTile from './components/Images/HorizontalImageTile';
+import VerticalImageTile from './components/Images/VerticalImageTile';
+import EventCard from './components/Cards/EventCard';
+import ImageAssets from './components/Icons/ImageAssets';
+export { TestButton, CodeHighlight, CustomFab, HelpButton, GenericDialogWindow, PcSharedComponentThemeInheritor, ImageCanvasDraw, PCMScrollbar, TwoColumnDisplay, SimpleTab, HrefLink, GenericAppBar, ReusablePopupMenu, SearchBar, TillButton, ProductItemButton, DropdownButton, translationResources, coreLocals, currencySymbol, DateRangeCalendar, DateCalendar, SimpleLabel, CurrencyTextInput, ImageStack, PlatformPaymentPlans, PlatformPlanTitles, PlatformPlanPrices, LoadingBackdrop, SimpleAccordion, PricingCalendar, FancyDate, HorizontalImageTile, VerticalImageTile, EventCard, ImageAssets };