pcm-shared-components 0.0.229 → 0.0.231

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 } from 'react-i18next';
 const platformPricingIcons = [mdiShimmer, mdiFire, mdiTorch];
 /**
  * ## Importing the component in your project
@@ -30,12 +29,10 @@ export const PlatformPaymentPlans = props => {
     platformPricingModels,
     onClickPlanSelection,
     saveYearlyImgPath,
+    i18next,
     theme
   } = 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')];
+  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 
@@ -194,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"
@@ -212,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 "
@@ -223,7 +220,7 @@ 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),
@@ -239,19 +236,19 @@ export const PlatformPaymentPlans = props => {
     // <>
     // <div>
     //   This is a user: 
-    //   {t('common.app.user')}
+    //   {i18next.t('common.app.user')}
     // </div>
     // <div>
     //   This is a search: 
-    //   {t('common.app.search')}
+    //   {i18next.t('common.app.search')}
     // </div>
     // <div>
     //   This is a yes: 
-    //   {t('common.app.yes')}
+    //   {i18next.t('common.app.yes')}
     // </div>
     // <div>
     //   This is a per reservation: 
-    //   {t('common.app.per_reservation')}
+    //   {i18next.t('common.app.per_reservation')}
     // </div>
     // </>
     React.createElement(ThemeProvider, {
@@ -291,6 +288,7 @@ PlatformPaymentPlans.defaultProps = {
   platformPlanFeatures: [],
   platformPricingModels: [],
   onClickPlanSelection: () => {},
+  i18next: undefined,
   saveYearlyImgPath: undefined,
   theme: undefined
 };
@@ -307,6 +305,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.229",
+  "version": "0.0.231",
   "private": false,
   "main": "dist/index.js",
   "babel": {