pcm-shared-components 0.0.228 → 0.0.230

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

@@ -1,3 +1,5 @@
+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); }
+
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider } from '@mui/system';
@@ -9,6 +11,7 @@ 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
@@ -27,11 +30,11 @@ export const PlatformPaymentPlans = props => {
     platformPricingModels,
     onClickPlanSelection,
     saveYearlyImgPath,
-    i18next,
-    theme
-  } = props;
-  console.log('debug Platform payment plans:', 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')];
+    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')];
   const compTheme = theme ? theme : useTheme();
   const defaultTheme = createTheme(compTheme); //---------------------------------------------------
   // Hooks 
@@ -162,7 +165,7 @@ export const PlatformPaymentPlans = props => {
         marginTop: Number(platform_plan_type_id) !== 2 ? 15 : 0,
         zIndex: Number(platform_plan_type_id) === 2 ? 500 : 100
       }
-    }, "something else here ", /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "flex m-4  ",
       style: {
         marginTop: Number(platform_plan_type_id) === 2 ? 21 : 6
@@ -190,12 +193,12 @@ export const PlatformPaymentPlans = props => {
     }, /*#__PURE__*/React.createElement(PriceDescription, {
       color: color,
       price: monthly_fee,
-      description: Number(billing_period_id) === 1 ? i18next.t('common.app.monthly_abbreviation') : i18next.t('common.app.yearly_abbreviation'),
+      description: Number(billing_period_id) === 1 ? t('common.app.monthly_abbreviation') : t('common.app.yearly_abbreviation'),
       expected_price: expected_monthly_fee
     }), /*#__PURE__*/React.createElement(PriceDescription, {
       color: color,
       price: per_reservation_fee,
-      description: i18next.t('common.app.per_reservation'),
+      description: t('common.app.per_reservation'),
       expected_price: expected_per_reservation_fee
     })), /*#__PURE__*/React.createElement("div", {
       className: "w-full text-center my-12"
@@ -208,7 +211,7 @@ export const PlatformPaymentPlans = props => {
       onClick: () => {
         onClickPlanSelection(platform_pricing_model_id);
       }
-    }, i18next.t('common.app.start_today'))), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement("div", {
+    }, 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 "
@@ -219,48 +222,75 @@ export const PlatformPaymentPlans = props => {
       onClick: () => {
         setShowMoreInfo(!showMoreInfo);
       }
-    }, 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", {
+    }, 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", {
       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: i18next.t(`platform_plan_feature.feature_names.${plan.feature_key}`),
+      text: 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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "This is a user:", i18next.t('common.app.user')), /*#__PURE__*/React.createElement("div", null, "This is a search:", i18next.t('common.app.search')), /*#__PURE__*/React.createElement("div", null, "This is a yes:", i18next.t('common.app.yes')), /*#__PURE__*/React.createElement("div", null, "This is a per reservation:", i18next.t('common.app.per_reservation'))) //     <ThemeProvider theme={defaultTheme} >
-  //       <div className='flex flex-col w-full h-full'>
-  //         {hasMonthlyAndYearlyBillingPeriod && (
-  //           <div className='flex flex-col m-auto' >
-  //             {saveYearlyImgPath && (
-  //               <div className='flex justify-end w-full '>
-  //                 <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) }} />
-  //               </div>
-  //             )}
-  //             <div className='mb-12' >
-  //               <PriceToggleButton isChecked={selectedBillingPeriod === 2} onCheck={(checked) => { setSelectedBillingPeriod(checked ? 2 : 1) }} />
-  //             </div>
-  //           </div>
-  //         )}
-  //         <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) => (
-  //             <PriceCard key={`price_card_${idx}`} {...model} />
-  //           ))}
-  //         </div>
-  // something here
-  //       </div>
-  //     </ThemeProvider>
-  ;
+  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))))))
+  );
 };
-export default PlatformPaymentPlans;
+export default withTranslation()(PlatformPaymentPlans);
 PlatformPaymentPlans.defaultProps = {
   platformPlanFeatures: [],
   platformPricingModels: [],
   onClickPlanSelection: () => {},
   saveYearlyImgPath: undefined,
-  i18next: undefined,
   theme: undefined
 };
 PlatformPaymentPlans.propTypes = {
@@ -276,9 +306,6 @@ PlatformPaymentPlans.propTypes = {
   /** Callback when a plan is selected.  Returns the platform pricing model id. */
   onClickPlanSelection: PropTypes.func,
 
-  /** The i18next needs to be passed in by the component or else they will be blank */
-  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.228",
+  "version": "0.0.230",
   "private": false,
   "main": "dist/index.js",
   "babel": {