pcm-shared-components 0.0.230 → 0.0.232

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

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { orange } from '@mui/material/colors';
 import { DateRangeInput } from '@datepicker-react/styled';
 import { ThemeProvider } from 'styled-components';
-import i18next from 'i18next';
 import './css/style.css';
 /**
  * example with styling https://codesandbox.io/s/react-date-picker-rangeinput-jw726?from-embed=&file=/src/index.js:2503-2537 
@@ -31,7 +30,8 @@ export const DateRangeCalendar = props => {
     endDate,
     variant,
     vertical,
-    zIndex
+    zIndex,
+    i18next
   } = props;
 
   const handleOnDayRender = date => {
@@ -146,7 +146,8 @@ DateRangeCalendar.defaultProps = {
   focusedInput: null,
   variant: 'standard',
   vertical: false,
-  zIndex: 1000
+  zIndex: 1000,
+  i18next: undefined
 };
 DateRangeCalendar.propTypes = {
   /** Used to provide the minimum booking date.  To allow date selection past todays date simply pas it an old past date example 'new Date('1999-10-02')' */
@@ -189,5 +190,8 @@ DateRangeCalendar.propTypes = {
   vertical: PropTypes.bool,
 
   /** Controls the z-index of the calendar dropdown date selection */
-  zIndex: PropTypes.number
+  zIndex: PropTypes.number,
+
+  /** 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/Platform/PlatformPaymentPlans/components/PriceToggleButton/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import './style.css';
-import i18next from 'i18next';
 
 const PriceToggleButton = props => {
   const {
     isChecked = true,
-    onCheck = () => {}
+    onCheck = () => {},
+    i18next
   } = props;
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",

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

@@ -11,7 +11,6 @@ import PriceToggleButton from './components/PriceToggleButton';
 import Icon from '@mdi/react';
 import { mdiRocket, mdiShimmer, mdiFire, mdiTorch } from '@mdi/js';
 import { Button } from '@mui/material';
-import { useTranslation, withTranslation } from 'react-i18next';
 const platformPricingIcons = [mdiShimmer, mdiFire, mdiTorch];
 /**
  * ## Importing the component in your project
@@ -30,11 +29,10 @@ export const PlatformPaymentPlans = props => {
     platformPricingModels,
     onClickPlanSelection,
     saveYearlyImgPath,
-    theme,
-    t
-  } = props; // const { t} = useTranslation();
-
-  const planTypeDescriptions = [t('platform_plan_feature.plan_type_descriptions.free'), t('platform_plan_feature.plan_type_descriptions.standard'), t('platform_plan_feature.plan_type_descriptions.premium')];
+    i18next,
+    theme
+  } = props;
+  const planTypeDescriptions = [i18next.t('platform_plan_feature.plan_type_descriptions.free'), i18next.t('platform_plan_feature.plan_type_descriptions.standard'), i18next.t('platform_plan_feature.plan_type_descriptions.premium')];
   const compTheme = theme ? theme : useTheme();
   const defaultTheme = createTheme(compTheme); //---------------------------------------------------
   // Hooks 
@@ -193,12 +191,12 @@ export const PlatformPaymentPlans = props => {
     }, /*#__PURE__*/React.createElement(PriceDescription, {
       color: color,
       price: monthly_fee,
-      description: Number(billing_period_id) === 1 ? t('common.app.monthly_abbreviation') : t('common.app.yearly_abbreviation'),
+      description: Number(billing_period_id) === 1 ? i18next.t('common.app.monthly_abbreviation') : i18next.t('common.app.yearly_abbreviation'),
       expected_price: expected_monthly_fee
     }), /*#__PURE__*/React.createElement(PriceDescription, {
       color: color,
       price: per_reservation_fee,
-      description: t('common.app.per_reservation'),
+      description: i18next.t('common.app.per_reservation'),
       expected_price: expected_per_reservation_fee
     })), /*#__PURE__*/React.createElement("div", {
       className: "w-full text-center my-12"
@@ -211,7 +209,7 @@ export const PlatformPaymentPlans = props => {
       onClick: () => {
         onClickPlanSelection(platform_pricing_model_id);
       }
-    }, t('common.app.start_today'))), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement("div", {
+    }, i18next.t('common.app.start_today'))), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement("div", {
       className: "flex flex-col my-8 w-full max-w-fill md:max-w-192 text-center md:min-h-128 "
     }, /*#__PURE__*/React.createElement("span", {
       className: "my-auto text-gray-600 text-11 whitespace-pre-line "
@@ -222,74 +220,55 @@ export const PlatformPaymentPlans = props => {
       onClick: () => {
         setShowMoreInfo(!showMoreInfo);
       }
-    }, showMoreInfo ? t('common.app.less_information') : t('common.app.more_information')))), showMoreInfo && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement("ul", {
+    }, showMoreInfo ? i18next.t('common.app.less_information') : i18next.t('common.app.more_information')))), showMoreInfo && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement("ul", {
       className: "my-12 space-y-10 list-none hover:list-disc pl-8"
     }, (platformPlanFeatures || []).filter(feature => Number(feature.show_in_pricing_table) === 1).sort((a, b) => a.platform_plan_type_id - b.platform_plan_type_id).map(plan => /*#__PURE__*/React.createElement(PlatformListItem, {
       active: Number(platform_plan_type_id) >= Number(plan.platform_plan_type_id),
-      text: t(`platform_plan_feature.feature_names.${plan.feature_key}`),
+      text: i18next.t(`platform_plan_feature.feature_names.${plan.feature_key}`),
       show_as_new_in_pricing_table: plan.show_as_new_in_pricing_table,
       key_item: `list_items_${billing_period_id}_${plan.platform_plan_type_id}_${plan.feature_key}`,
       key: `list_item_${billing_period_id}_${plan.platform_plan_type_id}_${plan.feature_key}`
     })))));
   };
 
-  return (
-    /*#__PURE__*/
-    // <>
-    // <div>
-    //   This is a user: 
-    //   {t('common.app.user')}
-    // </div>
-    // <div>
-    //   This is a search: 
-    //   {t('common.app.search')}
-    // </div>
-    // <div>
-    //   This is a yes: 
-    //   {t('common.app.yes')}
-    // </div>
-    // <div>
-    //   This is a per reservation: 
-    //   {t('common.app.per_reservation')}
-    // </div>
-    // </>
-    React.createElement(ThemeProvider, {
-      theme: defaultTheme
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "flex flex-col w-full h-full"
-    }, hasMonthlyAndYearlyBillingPeriod && /*#__PURE__*/React.createElement("div", {
-      className: "flex flex-col m-auto"
-    }, saveYearlyImgPath && /*#__PURE__*/React.createElement("div", {
-      className: "flex justify-end w-full "
-    }, /*#__PURE__*/React.createElement("img", {
-      className: "mr-24 cursor-pointer  hover:rotate-3 hover:scale-105 hover:translate-y-1 hover:skew-y-3 transition-all",
-      src: saveYearlyImgPath,
-      alt: "save on yr plans",
-      style: {
-        height: 80
-      },
-      onClick: () => {
-        setSelectedBillingPeriod(2);
-      }
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "mb-12"
-    }, /*#__PURE__*/React.createElement(PriceToggleButton, {
-      isChecked: selectedBillingPeriod === 2,
-      onCheck: checked => {
-        setSelectedBillingPeriod(checked ? 2 : 1);
-      }
-    }))), /*#__PURE__*/React.createElement("div", {
-      className: "flex flex-wrap justify-center max-w-max mx-auto pt-12"
-    }, platformPricingModels.filter(price => Number(price.billing_period_id) === selectedBillingPeriod).map((model, idx) => /*#__PURE__*/React.createElement(PriceCard, _extends({
-      key: `price_card_${idx}`
-    }, model))))))
-  );
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: defaultTheme
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col w-full h-full"
+  }, hasMonthlyAndYearlyBillingPeriod && /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col m-auto"
+  }, saveYearlyImgPath && /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-end w-full "
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "mr-24 cursor-pointer  hover:rotate-3 hover:scale-105 hover:translate-y-1 hover:skew-y-3 transition-all",
+    src: saveYearlyImgPath,
+    alt: "save on yr plans",
+    style: {
+      height: 80
+    },
+    onClick: () => {
+      setSelectedBillingPeriod(2);
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "mb-12"
+  }, /*#__PURE__*/React.createElement(PriceToggleButton, {
+    i18next: i18next,
+    isChecked: selectedBillingPeriod === 2,
+    onCheck: checked => {
+      setSelectedBillingPeriod(checked ? 2 : 1);
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-wrap justify-center max-w-max mx-auto pt-12"
+  }, platformPricingModels.filter(price => Number(price.billing_period_id) === selectedBillingPeriod).map((model, idx) => /*#__PURE__*/React.createElement(PriceCard, _extends({
+    key: `price_card_${idx}`
+  }, model))))));
 };
-export default withTranslation()(PlatformPaymentPlans);
+export default PlatformPaymentPlans;
 PlatformPaymentPlans.defaultProps = {
   platformPlanFeatures: [],
   platformPricingModels: [],
   onClickPlanSelection: () => {},
+  i18next: undefined,
   saveYearlyImgPath: undefined,
   theme: undefined
 };
@@ -306,6 +285,9 @@ PlatformPaymentPlans.propTypes = {
   /** Callback when a plan is selected.  Returns the platform pricing model id. */
   onClickPlanSelection: PropTypes.func,
 
+  /** 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,
+
   /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used */
   theme: PropTypes.object
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pcm-shared-components",
-  "version": "0.0.230",
+  "version": "0.0.232",
   "private": false,
   "main": "dist/index.js",
   "babel": {