@hulkapps/app-manager-vue 2.3.3 → 2.3.4

package/README.md

@@ -25,8 +25,8 @@ Vue.use(AppManager);
 ```vue
 <Banners type="header" />
 <Banners type="footer" />
-<AppManagerPlan @handlePlanSelect="handlePlanSelectListener" :shop_domain="shop_domain" />
-<AppManagerSliderPlan @handlePlanSelect="handlePlanSelectListener" :shop_domain="shop_domain" />
+<AppManagerPlan @handlePlanSelect="handlePlanSelectListener" :shop_domain="shop_domain" :translations="translations"/>
+<AppManagerSliderPlan @handlePlanSelect="handlePlanSelectListener" :shop_domain="shop_domain" :translations="translations"/>
 ```
 The AppManagerPlan component requires a Shop Domain
 
@@ -40,7 +40,7 @@ The AppManagerPlan component requires a Shop Domain
 
 <div id="app" class="app-manager">
     <Banners type="header"  />
-    <app-manager-plan shop_domain="<%= @store.shopify_domain %>" />
+    <app-manager-plan translations="<%= @store.translations %>" shop_domain="<%= @store.shopify_domain %>" />
 </div>
 
 <script>

package/dist/app-manager-vue.esm.js

@@ -22993,6 +22993,10 @@ var script$R = {
     base_url: {
       type: String,
       default: null
+    },
+    translations: {
+      type: Object,
+      default: {}
     }
   },
 
@@ -23024,6 +23028,10 @@ var script$R = {
       var compareDate = new Date(published_on_obj[2] + '/' + published_on_obj[0] + '/' + published_on_obj[1]);
       var isShow = now.getTime() >= compareDate.getTime();
       return isShow;
+    },
+
+    translateMe(message) {
+      return this.$translations.hasOwnProperty(message) ? this.$translations[message] : message;
     }
 
   },
@@ -23047,6 +23055,10 @@ var script$R = {
   },
 
   created() {
+    if (Object.keys(this.translations).length > 0) {
+      Vue.prototype.$translations = this.translations;
+    }
+
     if (this.base_url != null) {
       let config = {
         baseUrl: this.base_url
@@ -23074,7 +23086,7 @@ var __vue_render__$P = function () {
       attrs: {
         "id": "static-content-header-" + key,
         "status": header.status,
-        "title": header.title
+        "title": _vm.translateMe(header.title)
       },
       on: {
         "dismiss": function () {
@@ -23083,7 +23095,7 @@ var __vue_render__$P = function () {
       }
     }, [_c('span', {
       domProps: {
-        "innerHTML": _vm._s(header.content)
+        "innerHTML": _vm._s(_vm.translateMe(header.content))
       }
     })]) : _vm._e();
   }), 1) : _vm._e();
@@ -23095,7 +23107,7 @@ var __vue_staticRenderFns__$P = [];
 const __vue_inject_styles__$R = undefined;
 /* scoped */
 
-const __vue_scope_id__$R = "data-v-d8ccb5a2";
+const __vue_scope_id__$R = "data-v-56382236";
 /* module identifier */
 
 const __vue_module_identifier__$R = undefined;
@@ -23238,6 +23250,12 @@ var script$P = {
       return this.staticContent['yearlyPlanPromotions'];
     }
 
+  },
+  methods: {
+    translateMe(message) {
+      return this.$translations.hasOwnProperty(message) ? this.$translations[message] : message;
+    }
+
   },
 
   async mounted() {
@@ -23290,7 +23308,7 @@ var __vue_render__$N = function () {
       "slot": "default"
     },
     slot: "default"
-  }, [_vm._v(_vm._s('Annually'))])]);
+  }, [_vm._v(_vm._s(_vm.translateMe('Annually')))])]);
 };
 
 var __vue_staticRenderFns__$N = [];
@@ -23299,7 +23317,7 @@ var __vue_staticRenderFns__$N = [];
 const __vue_inject_styles__$P = undefined;
 /* scoped */
 
-const __vue_scope_id__$P = "data-v-6baa003e";
+const __vue_scope_id__$P = "data-v-5ec6f95c";
 /* module identifier */
 
 const __vue_module_identifier__$P = undefined;
@@ -41663,10 +41681,10 @@ var script$2 = {
     },
 
     headings() {
-      let headings = ['Plans & Features'];
+      let headings = [this.translateMe('Plans & Features')];
       this.plans.forEach(plan => {
         let heading = plan.name;
-        if (plan.price > 0) heading += ` ($${plan.price}/mo)`;
+        if (plan.price > 0) heading += ` ($${plan.price}/` + this.translateMe('mo') + ')';
         headings.push(heading);
       });
       return headings;
@@ -41698,6 +41716,10 @@ var script$2 = {
 
   },
   methods: {
+    translateMe(message) {
+      return this.$translations.hasOwnProperty(message) ? this.$translations[message] : message;
+    },
+
     activePlanStyle(plan) {
       return [plan.shopify_plans.includes(this.shop.shopify_plan) || !plan.store_base_plan ? {
         backgroundColor: '#f0f8f5',
@@ -41718,17 +41740,17 @@ var script$2 = {
         if (feature.format === 'percentage') {
           return `${feature.value}%`;
         } else if (feature.format === 'count') {
-          return feature.value < 0 ? `Unlimited` : feature.value;
+          return feature.value < 0 ? this.translateMe(`Unlimited`) : feature.value;
         } else return feature.value;
       } else if ((feature === null || feature === void 0 ? void 0 : feature.value_type) === 'array') {
         let values = JSON.parse(feature.value);
         let that = this;
         values = values.map(function (value) {
-          return that.featureValues[feature.feature_id][value];
+          return that.translateMe(that.featureValues[feature.feature_id][value]);
         });
         return values.join(', ');
       } else if ((feature === null || feature === void 0 ? void 0 : feature.value_type) === 'string') {
-        return feature.value.replace('"', '').replace('"', '');
+        return this.translateMe(feature.value.replace('"', '').replace('"', ''));
       }
     },
 
@@ -41855,7 +41877,7 @@ var script$2 = {
         this.plans = (_this$plans = this.plans) === null || _this$plans === void 0 ? void 0 : _this$plans.sort((planA, planB) => parseFloat(planA.price) - parseFloat(planB.price));
 
         if (this.plans[0].store_base_plan) {
-          this.subtitleContent = 'App plans are based on your existing shopify plan';
+          this.subtitleContent = this.translateMe('App plans are based on your existing shopify plan');
         }
 
         this.plan = data.plan;
@@ -41928,7 +41950,7 @@ var __vue_render__$2 = function () {
 
   return _vm.planLoading ? _c('PSkeletonPage', {
     attrs: {
-      "title": "Plans",
+      "title": _vm.translateMe('Plans'),
       "fullWidth": false,
       "primaryAction": "",
       "secondaryActions": 2,
@@ -41992,13 +42014,13 @@ var __vue_render__$2 = function () {
     }
   }, [_c('PSkeletonBodyText')], 1)], 1)], 1)], 1) : !this.planLoading && this.plans.length === 0 ? _c('PEmptyState', {
     attrs: {
-      "heading": "No Plans",
+      "heading": _vm.translateMe('No Plans'),
       "image": "https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"
     }
   }) : _c('PPage', {
     staticClass: "app-manager-plan-page custom-title",
     attrs: {
-      "title": "Plans",
+      "title": _vm.translateMe('Plans'),
       "subtitle": _vm.subtitleContent
     }
   }, [_c('PStack', {
@@ -42031,7 +42053,7 @@ var __vue_render__$2 = function () {
       "slot": "default"
     },
     slot: "default"
-  }, [_vm._v(_vm._s('Monthly'))])]) : _vm._e(), _vm._v(" "), _vm.yearlyPlan.length && _vm.monthlyPlan.length ? _c('PButton', {
+  }, [_vm._v(_vm._s(_vm.translateMe('Monthly')))])]) : _vm._e(), _vm._v(" "), _vm.yearlyPlan.length && _vm.monthlyPlan.length ? _c('PButton', {
     style: _vm.selectedPlan === 'annually' ? _vm.yearlySelectedStyle : _vm.yearlyStyle,
     attrs: {
       "primary": _vm.selectedPlan === 'annually'
@@ -42065,7 +42087,7 @@ var __vue_render__$2 = function () {
       "visibility": "hidden",
       "border": "0 !important"
     }
-  }, [_c('b', [_vm._v(_vm._s('features'))])]), _vm._v(" "), _vm._l(_vm.monthlyPlan, function (plan, key) {
+  }, [_c('b', [_vm._v(_vm._s(_vm.translateMe('features')))])]), _vm._v(" "), _vm._l(_vm.monthlyPlan, function (plan, key) {
     return [_c('PDataTableCol', {
       class: {
         'first-column': key === 0,
@@ -42077,7 +42099,7 @@ var __vue_render__$2 = function () {
       staticStyle: {
         "font-size": "16px"
       }
-    }, [_vm._v(_vm._s(plan.name))]) : _vm._e(), _vm._v(" "), plan.price === 0 ? _c('div', [_c('p', {
+    }, [_vm._v(_vm._s(_vm.translateMe(plan.name)))]) : _vm._e(), _vm._v(" "), plan.price === 0 ? _c('div', [_c('p', {
       staticStyle: {
         "display": "flex",
         "margin-top": "10px"
@@ -42087,7 +42109,7 @@ var __vue_render__$2 = function () {
         "font-size": "25px",
         "font-weight": "700"
       }
-    }, [_vm._v("Free")])], 1)]) : plan.discount && plan.discount > 0 && !_vm.isCurrentPlan(plan) ? _c('div', [_c('p', {
+    }, [_vm._v(_vm._s(_vm.translateMe('Free')))])], 1)]) : plan.discount && plan.discount > 0 && !_vm.isCurrentPlan(plan) ? _c('div', [_c('p', {
       staticStyle: {
         "display": "flex",
         "margin-top": "10px"
@@ -42102,7 +42124,7 @@ var __vue_render__$2 = function () {
         "margin-top": "5px",
         "font-size": "17px"
       }
-    }, [_vm._v("/" + _vm._s("mo"))])], 1), _vm._v(" "), _c('p', {
+    }, [_vm._v("/" + _vm._s(_vm.translateMe("mo")))])], 1), _vm._v(" "), _c('p', {
       staticStyle: {
         "display": "flex",
         "margin-top": "7px"
@@ -42118,7 +42140,7 @@ var __vue_render__$2 = function () {
         "margin-top": "3px",
         "font-size": "14px"
       }
-    }, [_vm._v("/" + _vm._s("mo"))])], 1)]) : _c('div', [_c('p', {
+    }, [_vm._v("/" + _vm._s(_vm.translateMe("mo")))])], 1)]) : _c('div', [_c('p', {
       staticStyle: {
         "display": "flex",
         "margin-top": "10px"
@@ -42133,7 +42155,7 @@ var __vue_render__$2 = function () {
         "margin-top": "5px",
         "font-size": "17px"
       }
-    }, [_vm._v("/" + _vm._s("mo"))])], 1)])])];
+    }, [_vm._v("/" + _vm._s(_vm.translateMe("mo")))])], 1)])])];
   })], 2) : _c('PDataTableRow', [_c('PDataTableCol', {
     staticClass: "plan-heading",
     staticStyle: {
@@ -42141,7 +42163,7 @@ var __vue_render__$2 = function () {
       "visibility": "hidden",
       "border": "0 !important"
     }
-  }, [_c('b', [_vm._v(_vm._s('features'))])]), _vm._v(" "), _vm._l(_vm.yearlyPlan, function (plan, key) {
+  }, [_c('b', [_vm._v(_vm._s(_vm.translateMe('features')))])]), _vm._v(" "), _vm._l(_vm.yearlyPlan, function (plan, key) {
     return [_c('PDataTableCol', {
       class: {
         'first-column': key === 0,
@@ -42153,7 +42175,7 @@ var __vue_render__$2 = function () {
       staticStyle: {
         "font-size": "16px"
       }
-    }, [_vm._v(_vm._s(plan.name))]) : _vm._e(), _vm._v(" "), plan.price === 0 ? _c('div', [_c('p', {
+    }, [_vm._v(_vm._s(_vm.translateMe(plan.name)))]) : _vm._e(), _vm._v(" "), plan.price === 0 ? _c('div', [_c('p', {
       staticStyle: {
         "display": "flex",
         "margin-top": "10px"
@@ -42163,7 +42185,7 @@ var __vue_render__$2 = function () {
         "font-size": "25px",
         "font-weight": "700"
       }
-    }, [_vm._v("Free")])], 1)]) : plan.discount && plan.discount > 0 && !_vm.isCurrentPlan(plan) ? _c('div', [_c('p', {
+    }, [_vm._v(_vm._s(_vm.translateMe('Free')))])], 1)]) : plan.discount && plan.discount > 0 && !_vm.isCurrentPlan(plan) ? _c('div', [_c('p', {
       staticStyle: {
         "display": "flex",
         "margin-top": "10px"
@@ -42178,7 +42200,7 @@ var __vue_render__$2 = function () {
         "margin-top": "5px",
         "font-size": "17px"
       }
-    }, [_vm._v("/" + _vm._s("year"))])], 1), _vm._v(" "), _c('p', {
+    }, [_vm._v("/" + _vm._s(_vm.translateMe("year")))])], 1), _vm._v(" "), _c('p', {
       staticStyle: {
         "display": "flex",
         "margin-top": "7px"
@@ -42194,7 +42216,7 @@ var __vue_render__$2 = function () {
         "margin-top": "3px",
         "font-size": "14px"
       }
-    }, [_vm._v("/" + _vm._s("year"))])], 1)]) : _c('div', [_c('p', {
+    }, [_vm._v("/" + _vm._s(_vm.translateMe("year")))])], 1)]) : _c('div', [_c('p', {
       staticStyle: {
         "display": "flex",
         "margin-top": "10px"
@@ -42209,7 +42231,7 @@ var __vue_render__$2 = function () {
         "margin-top": "5px",
         "font-size": "17px"
       }
-    }, [_vm._v("/" + _vm._s("year"))])], 1)])])];
+    }, [_vm._v("/" + _vm._s(_vm.translateMe("year")))])], 1)])])];
   })], 2)], 1), _vm._v(" "), _c('template', {
     slot: "body"
   }, [_vm._l(_vm.featuresByGroup, function (featureGroup, groupKey) {
@@ -42220,12 +42242,12 @@ var __vue_render__$2 = function () {
       attrs: {
         "colspan": _vm.selectedPlan === 'monthly' ? _vm.monthlyPlan.length + 1 : _vm.yearlyPlan.length + 1
       }
-    }, [_vm._v(_vm._s(groupKey))])], 1) : _vm._e(), _vm._v(" "), _vm._l(featureGroup, function (feature, rIndex) {
+    }, [_vm._v(_vm._s(_vm.translateMe(groupKey)))])], 1) : _vm._e(), _vm._v(" "), _vm._l(featureGroup, function (feature, rIndex) {
       return _c('PDataTableRow', {
         key: "row-" + (rIndex + groupKey)
       }, [_c('PDataTableCol', {
         class: "feature__type__" + feature.value_type + " feature__class"
-      }, [_vm._v(_vm._s(feature.name))]), _vm._v(" "), _vm._l(_vm.selectedPlan === 'monthly' ? _vm.monthlyPlan : _vm.yearlyPlan, function (plan, cIndex) {
+      }, [_vm._v(_vm._s(_vm.translateMe(feature.name)))]), _vm._v(" "), _vm._l(_vm.selectedPlan === 'monthly' ? _vm.monthlyPlan : _vm.yearlyPlan, function (plan, cIndex) {
         return _c('PDataTableCol', {
           key: "cell-" + cIndex + "-row-" + rIndex,
           class: "feature__type__" + feature.value_type,
@@ -42240,7 +42262,7 @@ var __vue_render__$2 = function () {
             "color": "subdued",
             "source": "MinusMinor"
           }
-        })] : [plan.features[feature.uuid] ? _c('span', [_vm._v(_vm._s(_vm.format(plan.features[feature.uuid])))]) : _c('PIcon', {
+        })] : [plan.features[feature.uuid] ? _c('span', [_vm._v(_vm._s(_vm.translateMe(_vm.format(plan.features[feature.uuid]))))]) : _c('PIcon', {
           attrs: {
             "color": "subdued",
             "source": "MinusMinor"
@@ -42267,7 +42289,7 @@ var __vue_render__$2 = function () {
         "full-width": "",
         "pressed": _vm.isCurrentPlan(plan)
       }
-    }, [_vm._v("\n                                        " + _vm._s('Current Plan') + "\n                                    ")]) : !plan.store_base_plan || plan.shopify_plans.includes(_vm.shop.shopify_plan) ? _c('PButton', {
+    }, [_vm._v("\n                                        " + _vm._s(_vm.translateMe('Current Plan')) + "\n                                    ")]) : !plan.store_base_plan || plan.shopify_plans.includes(_vm.shop.shopify_plan) ? _c('PButton', {
       class: _vm.planChooseButtonClass(plan),
       attrs: {
         "full-width": "",
@@ -42278,17 +42300,17 @@ var __vue_render__$2 = function () {
           plan ? _vm.getPlanUrl(plan) : 'javascript:void';
         }
       }
-    }, [_vm._v("\n                                        " + _vm._s('Choose Plan') + "\n                                    ")]) : _c('PButton', {
+    }, [_vm._v("\n                                        " + _vm._s(_vm.translateMe('Choose Plan')) + "\n                                    ")]) : _c('PButton', {
       attrs: {
         "disabled": true,
         "full-width": "",
         "pressed": true
       }
-    }, [_vm._v("\n                                        " + _vm._s('Not applicable') + "\n                                    ")]), _vm._v(" "), plan.store_base_plan && _vm.shop.plan && plan.shopify_plans.includes(_vm.shop.shopify_plan) && !_vm.isCurrentPlan(plan) ? _c('PTextContainer', {
+    }, [_vm._v("\n                                        " + _vm._s(_vm.translateMe('Not applicable')) + "\n                                    ")]), _vm._v(" "), plan.store_base_plan && _vm.shop.plan && plan.shopify_plans.includes(_vm.shop.shopify_plan) && !_vm.isCurrentPlan(plan) ? _c('PTextContainer', {
       staticClass: "footer-note-container"
     }, [plan.store_base_plan && !plan.shopify_plans.includes(_vm.shop.shopify_plan) && !_vm.isCurrentPlan(plan) && !_vm.isSamePlanInOtherInterval(plan) ? _c('PTextStyle', {
       staticClass: "text-break"
-    }, [_vm._v("Note: On account of your recent Shopify plan upgrade, you should consider upgrading your current app plan")]) : _vm._e()], 1) : _vm._e()], 1);
+    }, [_vm._v(_vm._s(_vm.translateMe('Note: On account of your recent Shopify plan upgrade, you should consider upgrading your current app plan')))]) : _vm._e()], 1) : _vm._e()], 1);
   })], 2) : _vm._e()], 2)], 2)]], _vm._v(" "), _vm.onboard ? _c('PStack', {
     staticClass: "choose-plan-btn",
     attrs: {
@@ -42307,7 +42329,7 @@ var __vue_render__$2 = function () {
     on: {
       "click": _vm.activePlan
     }
-  }, [_vm._v(_vm._s('I will choose the plan later'))])], 1)], 1) : _vm._e(), _vm._v(" "), _c('PlanBanners')], 2)], 1)], 1);
+  }, [_vm._v(_vm._s(_vm.translateMe('I will choose the plan later')))])], 1)], 1) : _vm._e(), _vm._v(" "), _c('PlanBanners')], 2)], 1)], 1);
 };
 
 var __vue_staticRenderFns__$2 = [];
@@ -42315,7 +42337,7 @@ var __vue_staticRenderFns__$2 = [];
 
 const __vue_inject_styles__$2 = function (inject) {
   if (!inject) return;
-  inject("data-v-b297faf0_0", {
+  inject("data-v-13e88eae_0", {
     source: "@import url(https://fonts.googleapis.com/css2?family=Satisfy&display=swap);.app-manager .app-manager-plan-page .plan-table td:last-child>[data-v-5a078dbb],.app-manager .app-manager-plan-page .plan-table td:last-child>[data-v-7d902277]{float:none}.app-manager .app-manager-plan-page .active{background:#f0f8f5}.app-manager .app-manager-plan-page .plan-table td:last-child>[data-v-0d1b0d63]{float:none}.app-manager .app-manager-plan-page .plan-table td{border:.01px solid #ececee!important;border-collapse:collapse!important}.app-manager .app-manager-plan-page .plan-table .Polaris-DataTable__ScrollContainer{border-radius:12px;overflow:visible}.app-manager .app-manager-plan-page .plan-table table{border-collapse:collapse!important}.app-manager .app-manager-plan-page .custom-plan table{border-collapse:collapse!important}.app-manager .app-manager-plan-page .custom-plan table thead .first-column{border-radius:12px 0 0 0;border-top:0!important;border-left:0!important}.app-manager .app-manager-plan-page .custom-plan table thead .plan-heading.last-column{text-align:left!important;border-radius:0 12px 0 0;border-top:0!important}.app-manager .app-manager-plan-page .custom-plan table thead .plan-heading{background-color:#fff;box-shadow:rgba(23,24,24,.05) 1px 0 8px,rgba(0,0,0,.15) 0 0 2px}.app-manager .app-manager-plan-page .custom-plan table tbody tr:first-child{background-color:#fff;box-shadow:0 0 5px rgba(23,24,24,.05),0 1px 2px rgba(0,0,0,.15);border-radius:12px 0 0 0;overflow:hidden}.app-manager .app-manager-plan-page .custom-plan table tbody tr:not(:first-child:last-child){background-color:#fff;overflow:hidden}.app-manager .app-manager-plan-page .custom-plan table tbody tr:not(:first-child:last-child){background-color:#fff;box-shadow:0 0 5px rgba(23,24,24,.05),0 1px 2px rgba(0,0,0,.15);overflow:hidden}.app-manager .app-manager-plan-page .custom-plan table tbody tr:not(:nth-last-child(2)){background-color:#fff;overflow:hidden}.app-manager .app-manager-plan-page .custom-plan table tbody tr:not(:nth-last-child(2)){border-bottom:0}.app-manager .app-manager-plan-page .custom-plan table tbody tr:last-child{border-bottom:0;background-color:transparent!important;box-shadow:none!important}.app-manager .app-manager-plan-page .custom-plan table tbody tr:not(:last-child){pointer-events:none}.app-manager .app-manager-plan-page .custom-plan table thead tr td{pointer-events:none}.app-manager .app-manager-plan-page .custom-plan table tbody tr:first-child td:first-child{overflow:hidden;border-radius:12px 0 0 0}.app-manager .app-manager-plan-page .custom-plan table tbody tr:nth-last-child(2){overflow:hidden;border-bottom-right-radius:12px;border-bottom-left-radius:12px}.app-manager .app-manager-plan-page .custom-plan table tbody tr:nth-last-child(2) td:first-child{overflow:hidden;border-bottom:0!important;border-radius:0 0 0 12px}.app-manager .app-manager-plan-page .custom-plan table tbody tr:nth-last-child(2) td:last-child{overflow:hidden;border-radius:0 0 12px}.app-manager .app-manager-plan-page .custom-plan table tbody tr td:first-child{border-left:0!important;border-top:0!important;padding-left:20px}.app-manager .app-manager-plan-page .custom-plan table tbody tr td:last-child{border-right:0!important;border-bottom:0!important;text-align:center!important}.app-manager .app-manager-plan-page .custom-plan table thead tr td:last-child{border-right:0!important;border-bottom:0!important;text-align:center!important}.app-manager .app-manager-plan-page .custom-plan table tbody td:not(:first-child){text-align:center!important}.app-manager .app-manager-plan-page .custom-plan table tbody tr:last-child td:last-child{background:0 0;border-radius:0 0 12px 0}.app-manager .app-manager-plan-page .custom-plan table tbody tr:last-child td{border:0!important;background:0 0}.app-manager .app-manager-plan-page .custom-plan table tbody tr:last-child td:hover{border:0!important;background:0 0}.app-manager .app-manager-plan-page .custom-plan tbody tr:last-child td.Polaris-DataTable__Cell--verticalAlignTop{background:0 0!important}.app-manager .app-manager-plan-page .custom-plan table tbody tr:last-child{background:0 0;opacity:1}.app-manager .app-manager-plan-page .custom-plan table tbody tr:last-child td:first-child{visibility:hidden}.app-manager .app-manager-plan-page .plan-heading{padding-top:30px}.app-manager .app-manager-plan-page .custom-plan .Polaris-Layout__Section{max-width:calc(100% - 2rem)!important}.app-manager .app-manager-plan-page .later-link{text-align:center;clear:both;padding-top:15px}.app-manager .app-manager-plan-page .plan-badge ul{text-align:center;padding-top:2rem;border-top:.1rem solid #e1e3e5}.app-manager .app-manager-plan-page .plan-badge ul li{list-style:none;display:inline-block;padding-right:25px}.app-manager .app-manager-plan-page .plan-badge ul li img{max-width:133px}.app-manager .app-manager-plan-page .btn-group .Polaris-ButtonGroup__Item{margin-left:0!important;z-index:unset!important}.app-manager .app-manager-plan-page.custom-title .Polaris-HorizontalDivider{background-color:#e2e3e4}.app-manager .app-manager-plan-page .Polaris-Page__Content hr{border:1px solid #e2e3e4}.app-manager .app-manager-plan-page .app-manager-group-row{background:0 0!important;padding:16px 16px 16px 20px!important}.app-manager .app-manager-plan-page .feature__type__array{vertical-align:middle!important;word-spacing:999px;white-space:pre-line!important}.app-manager .app-manager-plan-page .Polaris-DataTable__Table{table-layout:fixed!important}.app-manager .app-manager-plan-page td{vertical-align:middle!important}.app-manager .app-manager-plan-page td.feature__class{word-wrap:break-word!important;white-space:normal!important}.app-manager .app-manager-plan-page .light-green-cell{background-color:#f0f8f5;color:#257f60}.app-manager .app-manager-plan-page .plan-heading b{overflow-wrap:break-word;word-wrap:break-word;white-space:initial}.app-manager .app-manager-plan-page .custom-choose-button:hover{background:#006e52;border-color:transparent;color:#fff}",
     map: undefined,
     media: undefined
@@ -42447,7 +42469,7 @@ var script$1 = {
     },
 
     headings() {
-      let headings = ['Plans & Features'];
+      let headings = [this.translateMe('Plans & Features')];
       this.plans.forEach(plan => {
         let heading = plan.name;
         if (plan.price > 0) heading += ` ($${plan.price}/mo)`;
@@ -42482,6 +42504,10 @@ var script$1 = {
 
   },
   methods: {
+    translateMe(message) {
+      return this.$translations.hasOwnProperty(message) ? this.$translations[message] : message;
+    },
+
     handleNavigationClick($event) {
       const activeSlideIds = [];
       let activeSlides = document.getElementsByClassName('VueCarousel-slide-active');
@@ -42536,17 +42562,17 @@ var script$1 = {
         if (feature.format === 'percentage') {
           return `${feature.value}%`;
         } else if (feature.format === 'count') {
-          return feature.value < 0 ? `Unlimited` : feature.value;
-        } else return feature.value;
+          return feature.value < 0 ? this.translateMe(`Unlimited`) : feature.value;
+        } else return this.translateMe(feature.value);
       } else if ((feature === null || feature === void 0 ? void 0 : feature.value_type) === 'array') {
         let values = JSON.parse(feature.value);
         let that = this;
         values = values.map(function (value) {
-          return that.featureValues[feature.feature_id][value];
+          return that.translateMe(that.featureValues[feature.feature_id][value]);
         });
         return values.join(', ');
       } else if ((feature === null || feature === void 0 ? void 0 : feature.value_type) === 'string') {
-        return feature.value.replace('"', '').replace('"', '');
+        return this.translateMe(feature.value.replace('"', '').replace('"', ''));
       }
     },
 
@@ -42710,7 +42736,7 @@ var script$1 = {
         this.plans = (_this$plans = this.plans) === null || _this$plans === void 0 ? void 0 : _this$plans.sort((planA, planB) => parseFloat(planA.price) - parseFloat(planB.price));
 
         if (this.plans[0].store_base_plan) {
-          this.subtitleContent = 'App plans are based on your existing shopify plan';
+          this.subtitleContent = this.translateMe('App plans are based on your existing shopify plan');
         }
 
         this.plan = data.plan;
@@ -42843,7 +42869,7 @@ var __vue_render__$1 = function () {
 
   return _vm.planLoading ? _c('PSkeletonPage', {
     attrs: {
-      "title": "Plans",
+      "title": _vm.translateMe('Plans'),
       "fullWidth": false,
       "primaryAction": "",
       "secondaryActions": 2,
@@ -42907,13 +42933,13 @@ var __vue_render__$1 = function () {
     }
   }, [_c('PSkeletonBodyText')], 1)], 1)], 1)], 1) : !this.planLoading && this.plans.length === 0 ? _c('PEmptyState', {
     attrs: {
-      "heading": "No Plans",
+      "heading": _vm.translateMe('No Plans'),
       "image": "https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"
     }
   }) : _c('PPage', {
     staticClass: "app-manager-plan-page-slider custom-title",
     attrs: {
-      "title": "Plans",
+      "title": _vm.translateMe('Plans'),
       "subtitle": _vm.subtitleContent
     }
   }, [_c('PStack', {
@@ -42946,7 +42972,7 @@ var __vue_render__$1 = function () {
       "slot": "default"
     },
     slot: "default"
-  }, [_vm._v(_vm._s('Monthly'))])]) : _vm._e(), _vm._v(" "), _vm.yearlyPlan.length && _vm.monthlyPlan.length ? _c('PButton', {
+  }, [_vm._v(_vm._s(_vm.translateMe('Monthly')))])]) : _vm._e(), _vm._v(" "), _vm.yearlyPlan.length && _vm.monthlyPlan.length ? _c('PButton', {
     style: _vm.selectedPlan === 'annually' ? _vm.yearlySelectedStyle : _vm.yearlyStyle,
     attrs: {
       "primary": _vm.selectedPlan === 'annually'
@@ -42990,7 +43016,7 @@ var __vue_render__$1 = function () {
       staticClass: "Polaris-ResourceList-Item__Content"
     }, [_c('h1', {
       staticClass: "for-price-per-month"
-    }, [_c('span', [_vm._v(_vm._s(feature.name))])])])])]);
+    }, [_c('span', [_vm._v(_vm._s(_vm.translateMe(feature.name)))])])])])]);
   }), 0)])], _vm._v(" "), _c('carousel', {
     staticStyle: {
       "width": "70%"
@@ -43021,7 +43047,7 @@ var __vue_render__$1 = function () {
       staticStyle: {
         "font-size": "16px"
       }
-    }, [_vm._v(_vm._s(plan.name))]) : _vm._e(), _vm._v(" "), _c('p', {
+    }, [_vm._v(_vm._s(_vm.translateMe(plan.name)))]) : _vm._e(), _vm._v(" "), _c('p', {
       staticStyle: {
         "display": "flex",
         "margin-top": "10px"
@@ -43031,11 +43057,11 @@ var __vue_render__$1 = function () {
         "font-size": "25px",
         "font-weight": "700"
       }
-    }, [_vm._v("Free")])], 1)]) : plan.discount && plan.discount > 0 && !_vm.isCurrentPlan(plan) ? _c('div', [_c('b', {
+    }, [_vm._v(_vm._s(_vm.translateMe('Free')))])], 1)]) : plan.discount && plan.discount > 0 && !_vm.isCurrentPlan(plan) ? _c('div', [_c('b', {
       staticStyle: {
         "font-size": "16px"
       }
-    }, [_vm._v(_vm._s(plan.name))]), _vm._v(" "), _c('p', {
+    }, [_vm._v(_vm._s(_vm.translateMe(plan.name)))]), _vm._v(" "), _c('p', {
       staticStyle: {
         "display": "flex",
         "margin-top": "10px"
@@ -43050,7 +43076,7 @@ var __vue_render__$1 = function () {
         "margin-top": "5px",
         "font-size": "17px"
       }
-    }, [_vm._v("/" + _vm._s(_vm.selectedPlan === 'monthly' ? "mo" : "year"))])], 1), _vm._v(" "), _c('p', {
+    }, [_vm._v("/" + _vm._s(_vm.translateMe(_vm.selectedPlan === 'monthly' ? "mo" : "year")))])], 1), _vm._v(" "), _c('p', {
       staticStyle: {
         "display": "flex",
         "margin-top": "7px"
@@ -43066,11 +43092,11 @@ var __vue_render__$1 = function () {
         "margin-top": "3px",
         "font-size": "14px"
       }
-    }, [_vm._v("/" + _vm._s(_vm.selectedPlan === 'monthly' ? "mo" : "year"))])], 1)]) : _c('div', [_c('b', {
+    }, [_vm._v("/" + _vm._s(_vm.translateMe(_vm.selectedPlan === 'monthly' ? "mo" : "year")))])], 1)]) : _c('div', [_c('b', {
       staticStyle: {
         "font-size": "16px"
       }
-    }, [_vm._v(_vm._s(plan.name))]), _vm._v(" "), _c('p', {
+    }, [_vm._v(_vm._s(_vm.translateMe(plan.name)))]), _vm._v(" "), _c('p', {
       staticStyle: {
         "display": "flex",
         "margin-top": "10px"
@@ -43085,7 +43111,7 @@ var __vue_render__$1 = function () {
         "margin-top": "5px",
         "font-size": "17px"
       }
-    }, [_vm._v("/" + _vm._s(_vm.selectedPlan === 'monthly' ? "mo" : "year"))])], 1)])]), _vm._v(" "), _c('div', [_c('ul', [_vm._l(_vm.features, function (feature, key) {
+    }, [_vm._v("/" + _vm._s(_vm.translateMe(_vm.selectedPlan === 'monthly' ? "mo" : "year")))])], 1)])]), _vm._v(" "), _c('div', [_c('ul', [_vm._l(_vm.features, function (feature, key) {
       return _c('li', {
         key: key,
         class: feature.value_type + "__type__" + feature.slug + " feature__list feature__type__" + feature.value_type,
@@ -43117,7 +43143,7 @@ var __vue_render__$1 = function () {
         "full-width": "",
         "pressed": _vm.isCurrentPlan(plan)
       }
-    }, [_vm._v("\n                                            " + _vm._s('Current Plan') + "\n                                        ")]) : !plan.store_base_plan || plan.shopify_plans.includes(_vm.shop.shopify_plan) ? _c('PButton', {
+    }, [_vm._v("\n                                            " + _vm._s(_vm.translateMe('Current Plan')) + "\n                                        ")]) : !plan.store_base_plan || plan.shopify_plans.includes(_vm.shop.shopify_plan) ? _c('PButton', {
       class: _vm.planChooseButtonClass(plan),
       attrs: {
         "full-width": "",
@@ -43128,13 +43154,13 @@ var __vue_render__$1 = function () {
           plan ? _vm.getPlanUrl(plan) : 'javascript:void';
         }
       }
-    }, [_vm._v("\n                                            " + _vm._s('Choose Plan') + "\n                                        ")]) : _c('PButton', {
+    }, [_vm._v("\n                                            " + _vm._s(_vm.translateMe('Choose Plan')) + "\n                                        ")]) : _c('PButton', {
       attrs: {
         "disabled": true,
         "full-width": "",
         "pressed": true
       }
-    }, [_vm._v("\n                                            " + _vm._s('Not applicable') + "\n                                        ")])], 1)], 2)])]);
+    }, [_vm._v("\n                                            " + _vm._s(_vm.translateMe('Not applicable')) + "\n                                        ")])], 1)], 2)])]);
   })], 2)]], 2)], 1), _vm._v(" "), _vm.onboard ? _c('PStack', {
     staticClass: "choose-plan-btn",
     attrs: {
@@ -43153,7 +43179,7 @@ var __vue_render__$1 = function () {
     on: {
       "click": _vm.activePlan
     }
-  }, [_vm._v(_vm._s('I will choose the plan later'))])], 1)], 1) : _vm._e(), _vm._v(" "), _c('PlanBanners')], 1);
+  }, [_vm._v(_vm._s(_vm.translateMe('I will choose the plan later')))])], 1)], 1) : _vm._e(), _vm._v(" "), _c('PlanBanners')], 1);
 };
 
 var __vue_staticRenderFns__$1 = [];
@@ -43161,7 +43187,7 @@ var __vue_staticRenderFns__$1 = [];
 
 const __vue_inject_styles__$1 = function (inject) {
   if (!inject) return;
-  inject("data-v-dd2e95cc_0", {
+  inject("data-v-1207c1e9_0", {
     source: "@import url(https://fonts.googleapis.com/css2?family=Satisfy&display=swap);.app-manager .app-manager-plan-page-slider ul{list-style:none;margin:0;padding:0}.app-manager .app-manager-plan-page-slider .Polaris-Layout__Section .VueCarousel-slide li,.app-manager .app-manager-plan-page-slider .Polaris-ResourceList__ResourceListWrapper.features li,.app-manager .app-manager-plan-page-slider .plan__price{padding:16px 16px 16px 20px}.app-manager .app-manager-plan-page-slider .Polaris-Layout.custom-plan .VueCarousel .plan__price,.app-manager .app-manager-plan-page-slider .Polaris-Layout__Section .VueCarousel-slide li:not(:last-child),.app-manager .app-manager-plan-page-slider .Polaris-ResourceList__ResourceListWrapper.features li{border-top:1px solid #ddd;border-right:1px solid #ddd;background:#fff}.app-manager .app-manager-plan-page-slider .Polaris-ResourceList__ResourceListWrapper.features li{border-right:none;border-left:1px solid #ddd}.app-manager .app-manager-plan-page-slider .Polaris-Layout__Section .VueCarousel-slide li:nth-last-child(2),.app-manager .app-manager-plan-page-slider .Polaris-ResourceList__ResourceListWrapper.features li:last-child{border-bottom:1px solid #ddd}.app-manager .app-manager-plan-page-slider .Polaris-ResourceList__ResourceListWrapper.features li:first-child{border-top-left-radius:12px}.app-manager .app-manager-plan-page-slider .Polaris-ResourceList__ResourceListWrapper.features li:last-child{border-bottom-left-radius:12px}.app-manager .app-manager-plan-page-slider .VueCarousel-inner .VueCarousel-slide.first-slide ul li:not(:last-child){border-left:1px solid #ddd}.app-manager .app-manager-plan-page-slider .VueCarousel-inner .VueCarousel-slide.first-slide .plan__price{border-left:1px solid #ddd;box-shadow:none;border-top-left-radius:12px;overflow:hidden}.app-manager .app-manager-plan-page-slider .VueCarousel-inner .VueCarousel-slide.last-slide ul li:nth-last-child(2){border-bottom-right-radius:12px}.app-manager .app-manager-plan-page-slider .VueCarousel-inner .VueCarousel-slide.last-slide .plan__price{border-right:1px solid #ddd;box-shadow:none;border-top-right-radius:12px;overflow:hidden}.app-manager .app-manager-plan-page-slider .VueCarousel-inner .VueCarousel-slide.last-slide{border-top-right-radius:12px}.app-manager .app-manager-plan-page-slider .VueCarousel-inner .VueCarousel-slide.first-slide{border-top-left-radius:12px}.app-manager .app-manager-plan-page-slider .VueCarousel .VueCarousel-inner li{text-align:center}.app-manager .app-manager-plan-page-slider .VueCarousel-navigation-button{color:#257f60}.app-manager .app-manager-plan-page-slider .btn-group .Polaris-ButtonGroup__Item{margin-left:0!important;z-index:unset!important}.app-manager .app-manager-plan-page-slider .feature__list,.app-manager .app-manager-plan-page-slider .feature__type__array{display:flex;align-items:center;word-spacing:999px;justify-content:center}.app-manager .app-manager-plan-page-slider .feature__type__array.feature__class{justify-content:left}.app-manager .app-manager-plan-page-slider .plan-heading b{overflow-wrap:break-word;word-wrap:break-word;white-space:initial}.app-manager .app-manager-plan-page-slider .custom-choose-button:hover{background:#006e52;border-color:transparent;color:#fff}",
     map: undefined,
     media: undefined
@@ -43210,6 +43236,10 @@ var script = {
     host: {
       type: String,
       default: null
+    },
+    translations: {
+      type: Object,
+      default: {}
     }
   },
   methods: {
@@ -43221,6 +43251,10 @@ var script = {
   },
 
   created() {
+    if (Object.keys(this.translations).length > 0) {
+      Vue.prototype.$translations = this.translations;
+    }
+
     if (this.base_url != null) {
       let config = {
         baseUrl: this.base_url
@@ -43267,7 +43301,7 @@ var __vue_staticRenderFns__ = [];
 const __vue_inject_styles__ = undefined;
 /* scoped */
 
-const __vue_scope_id__ = "data-v-3b703eee";
+const __vue_scope_id__ = "data-v-cff370de";
 /* module identifier */
 
 const __vue_module_identifier__ = undefined;