@hulkapps/app-manager-vue 2.4.6 → 2.4.8

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

@@ -42014,12 +42014,454 @@ var __vue_render__$2 = function () {
 
   var _c = _vm._self._c || _h;
 
-  return _c('PEmptyState', {
+  return !this.planLoading && this.plans.length === 0 ? _c('PEmptyState', {
     attrs: {
       "heading": _vm.translateMe('No Plans'),
       "image": "https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"
     }
-  });
+  }) : !this.planLoading && this.plans.length > 0 ? _c('PPage', {
+    staticClass: "app-manager-plan-page custom-title",
+    attrs: {
+      "title": _vm.translateMe('Plans'),
+      "subtitle": _vm.subtitleContent
+    }
+  }, [_c('PStack', {
+    attrs: {
+      "slot": "primaryAction"
+    },
+    slot: "primaryAction"
+  }, [_c('PStackItem', {
+    staticStyle: {
+      "margin-top": "20px"
+    }
+  }, [_c('PButtonGroup', {
+    staticClass: "btn-group",
+    attrs: {
+      "segmented": ""
+    }
+  }, [_vm.monthlyPlan.length && _vm.yearlyPlan.length ? _c('PButton', {
+    class: _vm.selectedPlan === 'monthly' ? 'plan-active-tab' : '',
+    style: _vm.selectedPlan === 'monthly' ? _vm.monthlySelectedStyle : _vm.monthlyStyle,
+    on: {
+      "click": function ($event) {
+        return _vm.selectPlan('monthly');
+      }
+    }
+  }, [_c('p', {
+    staticStyle: {
+      "font-size": "17px",
+      "font-weight": "500"
+    },
+    attrs: {
+      "slot": "default"
+    },
+    slot: "default"
+  }, [_vm._v(_vm._s(_vm.translateMe('Monthly')))])]) : _vm._e(), _vm._v(" "), _vm.yearlyPlan.length && _vm.monthlyPlan.length ? _c('PButton', {
+    class: _vm.selectedPlan === 'annually' ? 'plan-active-tab' : '',
+    style: _vm.selectedPlan === 'annually' ? _vm.yearlySelectedStyle : _vm.yearlyStyle,
+    attrs: {
+      "primary": _vm.selectedPlan === 'annually'
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.selectPlan('annually');
+      }
+    }
+  }, [_c('YearlyPlanPromotion')], 1) : _vm._e()], 1)], 1)], 1), _vm._v(" "), _c('hr', {
+    staticStyle: {
+      "width": "100%",
+      "margin-right": "auto",
+      "margin-left": "auto",
+      "margin-bottom": "20px"
+    }
+  }), _vm._v(" "), _c('PLayout', {
+    staticClass: "custom-plan"
+  }, [_c('PLayoutSection', [[[_c('PDataTable', {
+    staticClass: "plan-table"
+  }, [_c('template', {
+    slot: "head"
+  }, [_vm.selectedPlan === 'monthly' ? _c('PDataTableRow', {
+    staticStyle: {
+      "box-shadow": "none!important"
+    }
+  }, [_c('PDataTableCol', {
+    staticClass: "plan-heading",
+    staticStyle: {
+      "opacity": "0",
+      "visibility": "hidden",
+      "border": "0 !important"
+    }
+  }, [_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,
+        'plan-heading': true,
+        'last-column': key + 1 === _vm.monthlyPlan.length
+      },
+      style: _vm.activePlanStyle(plan)
+    }, [plan.name !== 'Free' ? _c('b', {
+      staticStyle: {
+        "font-size": "16px"
+      }
+    }, [_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"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "25px",
+        "font-weight": "700"
+      }
+    }, [_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"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "25px",
+        "font-weight": "700"
+      }
+    }, [_vm._v("$" + _vm._s(parseFloat(_vm.calculateDiscountedPrice(plan)).toFixed(2)))]), _vm._v(" "), _c('b', {
+      staticStyle: {
+        "margin-top": "5px",
+        "font-size": "17px"
+      }
+    }, [_vm._v("/" + _vm._s(_vm.translateMe("mo")))])], 1), _vm._v(" "), _c('p', {
+      staticStyle: {
+        "display": "flex",
+        "margin-top": "7px"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "18px",
+        "font-weight": "500",
+        "text-decoration": "line-through"
+      }
+    }, [_vm._v("$" + _vm._s(parseFloat(plan.price).toFixed(2)))]), _vm._v(" "), _c('b', {
+      staticStyle: {
+        "margin-top": "3px",
+        "font-size": "14px"
+      }
+    }, [_vm._v("/" + _vm._s(_vm.translateMe("mo")))])], 1)]) : _vm.promotional_discount && _vm.promotional_discount.length !== 0 && !_vm.promotional_discount.errors && _vm.promotional_discount.plan_relation.length > 0 && _vm.promotional_discount.plan_relation.includes(plan.id) && !_vm.isCurrentPlan(plan) ? _c('div', [_c('p', {
+      staticStyle: {
+        "display": "flex",
+        "margin-top": "10px"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "25px",
+        "font-weight": "700"
+      }
+    }, [_vm._v("$" + _vm._s(parseFloat(_vm.calculatePromotionalDiscountedPrice(plan, _vm.promotional_discount)).toFixed(2)))]), _vm._v(" "), _c('b', {
+      staticStyle: {
+        "margin-top": "5px",
+        "font-size": "17px"
+      }
+    }, [_vm._v("/" + _vm._s(_vm.translateMe("mo")))])], 1), _vm._v(" "), _c('p', {
+      staticStyle: {
+        "display": "flex",
+        "margin-top": "7px"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "18px",
+        "font-weight": "500",
+        "text-decoration": "line-through"
+      }
+    }, [_vm._v("$" + _vm._s(parseFloat(plan.price).toFixed(2)))]), _vm._v(" "), _c('b', {
+      staticStyle: {
+        "margin-top": "3px",
+        "font-size": "14px"
+      }
+    }, [_vm._v("/" + _vm._s(_vm.translateMe("mo")))])], 1)]) : _vm.promotional_discount && _vm.promotional_discount.length !== 0 && !_vm.promotional_discount.errors && _vm.promotional_discount.plan_relation.length === 0 && _vm.promotional_discount.value > 0 && !_vm.isCurrentPlan(plan) ? _c('div', [_c('p', {
+      staticStyle: {
+        "display": "flex",
+        "margin-top": "10px"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "25px",
+        "font-weight": "700"
+      }
+    }, [_vm._v("$" + _vm._s(parseFloat(_vm.calculatePromotionalDiscountedPrice(plan, _vm.promotional_discount)).toFixed(2)))]), _vm._v(" "), _c('b', {
+      staticStyle: {
+        "margin-top": "5px",
+        "font-size": "17px"
+      }
+    }, [_vm._v("/" + _vm._s(_vm.translateMe("mo")))])], 1), _vm._v(" "), _c('p', {
+      staticStyle: {
+        "display": "flex",
+        "margin-top": "7px"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "18px",
+        "font-weight": "500",
+        "text-decoration": "line-through"
+      }
+    }, [_vm._v("$" + _vm._s(parseFloat(plan.price).toFixed(2)))]), _vm._v(" "), _c('b', {
+      staticStyle: {
+        "margin-top": "3px",
+        "font-size": "14px"
+      }
+    }, [_vm._v("/" + _vm._s(_vm.translateMe("mo")))])], 1)]) : _c('div', [_c('p', {
+      staticStyle: {
+        "display": "flex",
+        "margin-top": "10px"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "25px",
+        "font-weight": "700"
+      }
+    }, [_vm._v("$" + _vm._s(parseFloat(plan.price).toFixed(2)))]), _vm._v(" "), _c('b', {
+      staticStyle: {
+        "margin-top": "5px",
+        "font-size": "17px"
+      }
+    }, [_vm._v("/" + _vm._s(_vm.translateMe("mo")))])], 1)])])];
+  })], 2) : _c('PDataTableRow', [_c('PDataTableCol', {
+    staticClass: "plan-heading",
+    staticStyle: {
+      "opacity": "0",
+      "visibility": "hidden",
+      "border": "0 !important"
+    }
+  }, [_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,
+        'plan-heading': true,
+        'last-column': key + 1 === _vm.yearlyPlan.length
+      },
+      style: _vm.activePlanStyle(plan)
+    }, [plan.name !== 'Free' ? _c('b', {
+      staticStyle: {
+        "font-size": "16px"
+      }
+    }, [_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"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "25px",
+        "font-weight": "700"
+      }
+    }, [_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"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "25px",
+        "font-weight": "700"
+      }
+    }, [_vm._v("$" + _vm._s(parseFloat(_vm.calculateDiscountedPrice(plan)).toFixed(2)))]), _vm._v(" "), _c('b', {
+      staticStyle: {
+        "margin-top": "5px",
+        "font-size": "17px"
+      }
+    }, [_vm._v("/" + _vm._s(_vm.translateMe("year")))])], 1), _vm._v(" "), _c('p', {
+      staticStyle: {
+        "display": "flex",
+        "margin-top": "7px"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "18px",
+        "font-weight": "500",
+        "text-decoration": "line-through"
+      }
+    }, [_vm._v("$" + _vm._s(parseFloat(plan.price).toFixed(2)))]), _vm._v(" "), _c('b', {
+      staticStyle: {
+        "margin-top": "3px",
+        "font-size": "14px"
+      }
+    }, [_vm._v("/" + _vm._s(_vm.translateMe("year")))])], 1)]) : _vm.promotional_discount && _vm.promotional_discount.length !== 0 && !_vm.promotional_discount.errors && _vm.promotional_discount.plan_relation.length > 0 && _vm.promotional_discount.plan_relation.includes(plan.id) && !_vm.isCurrentPlan(plan) ? _c('div', [_c('p', {
+      staticStyle: {
+        "display": "flex",
+        "margin-top": "10px"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "25px",
+        "font-weight": "700"
+      }
+    }, [_vm._v("$" + _vm._s(parseFloat(_vm.calculatePromotionalDiscountedPrice(plan, _vm.promotional_discount)).toFixed(2)))]), _vm._v(" "), _c('b', {
+      staticStyle: {
+        "margin-top": "5px",
+        "font-size": "17px"
+      }
+    }, [_vm._v("/" + _vm._s(_vm.translateMe("year")))])], 1), _vm._v(" "), _c('p', {
+      staticStyle: {
+        "display": "flex",
+        "margin-top": "7px"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "18px",
+        "font-weight": "500",
+        "text-decoration": "line-through"
+      }
+    }, [_vm._v("$" + _vm._s(parseFloat(plan.price).toFixed(2)))]), _vm._v(" "), _c('b', {
+      staticStyle: {
+        "margin-top": "3px",
+        "font-size": "14px"
+      }
+    }, [_vm._v("/" + _vm._s(_vm.translateMe("year")))])], 1)]) : _vm.promotional_discount && _vm.promotional_discount.length !== 0 && !_vm.promotional_discount.errors && _vm.promotional_discount.plan_relation.length === 0 && _vm.promotional_discount.value > 0 && !_vm.isCurrentPlan(plan) ? _c('div', [_c('p', {
+      staticStyle: {
+        "display": "flex",
+        "margin-top": "10px"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "25px",
+        "font-weight": "700"
+      }
+    }, [_vm._v("$" + _vm._s(parseFloat(_vm.calculatePromotionalDiscountedPrice(plan, _vm.promotional_discount)).toFixed(2)))]), _vm._v(" "), _c('b', {
+      staticStyle: {
+        "margin-top": "5px",
+        "font-size": "17px"
+      }
+    }, [_vm._v("/" + _vm._s(_vm.translateMe("year")))])], 1), _vm._v(" "), _c('p', {
+      staticStyle: {
+        "display": "flex",
+        "margin-top": "7px"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "18px",
+        "font-weight": "500",
+        "text-decoration": "line-through"
+      }
+    }, [_vm._v("$" + _vm._s(parseFloat(plan.price).toFixed(2)))]), _vm._v(" "), _c('b', {
+      staticStyle: {
+        "margin-top": "3px",
+        "font-size": "14px"
+      }
+    }, [_vm._v("/" + _vm._s(_vm.translateMe("year")))])], 1)]) : _c('div', [_c('p', {
+      staticStyle: {
+        "display": "flex",
+        "margin-top": "10px"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "25px",
+        "font-weight": "700"
+      }
+    }, [_vm._v("$" + _vm._s(parseFloat(plan.price).toFixed(2)))]), _vm._v(" "), _c('b', {
+      staticStyle: {
+        "margin-top": "5px",
+        "font-size": "17px"
+      }
+    }, [_vm._v("/" + _vm._s(_vm.translateMe("year")))])], 1)])])];
+  })], 2)], 1), _vm._v(" "), _c('template', {
+    slot: "body"
+  }, [_vm._l(_vm.featuresByGroup, function (featureGroup, groupKey) {
+    return [groupKey !== 'null' ? _c('PDataTableRow', {
+      staticClass: "app-manager-group-row"
+    }, [_c('PDataTableCol', {
+      staticClass: "app-manager-group-cell",
+      attrs: {
+        "colspan": _vm.selectedPlan === 'monthly' ? _vm.monthlyPlan.length + 1 : _vm.yearlyPlan.length + 1
+      }
+    }, [_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(_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,
+          style: _vm.activePlanStyle(plan)
+        }, [plan.features ? [feature.value_type === 'boolean' ? [plan.features[feature.uuid] ? _c('PIcon', {
+          attrs: {
+            "color": "success",
+            "source": "TickMinor"
+          }
+        }) : _c('PIcon', {
+          attrs: {
+            "color": "subdued",
+            "source": "MinusMinor"
+          }
+        })] : [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"
+          }
+        })]] : [_c('PIcon', {
+          attrs: {
+            "color": "subdued",
+            "source": "MinusMinor"
+          }
+        })]], 2);
+      })], 2);
+    })];
+  }), _vm._v(" "), _vm.plans.length ? _c('PDataTableRow', {
+    staticClass: "row-alignment"
+  }, [_c('PDataTableCol'), _vm._v(" "), _vm._l(_vm.selectedPlan === 'monthly' ? _vm.monthlyPlan : _vm.yearlyPlan, function (plan, cIndex) {
+    return _c('PDataTableCol', {
+      key: "cell-" + cIndex + "-row-plan",
+      staticStyle: {
+        "max-width": "0"
+      }
+    }, [_vm.isCurrentPlan(plan) ? _c('PButton', {
+      attrs: {
+        "disabled": _vm.isCurrentPlan(plan),
+        "full-width": "",
+        "pressed": _vm.isCurrentPlan(plan)
+      }
+    }, [_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": "",
+        "primary": _vm.isPlanButtonColor(plan)
+      },
+      on: {
+        "click": function ($event) {
+          plan ? _vm.getPlanUrl(plan) : 'javascript:void';
+        }
+      }
+    }, [_vm._v("\n                                            " + _vm._s(_vm.translateMe('Choose Plan')) + "\n                                        ")]) : _c('PButton', {
+      attrs: {
+        "disabled": true,
+        "full-width": "",
+        "pressed": true
+      }
+    }, [_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(_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: {
+      "alignment": "center",
+      "distribution": "center",
+      "vertical": ""
+    }
+  }, [_c('PStackItem', {
+    attrs: {
+      "fill": ""
+    }
+  }, [_c('PButton', {
+    attrs: {
+      "plain": ""
+    },
+    on: {
+      "click": _vm.activePlan
+    }
+  }, [_vm._v(_vm._s(_vm.translateMe('I will choose the plan later')))])], 1)], 1) : _vm._e(), _vm._v(" "), _c('PlanBanners', {
+    on: {
+      "handlePlanBannerClose": _vm.handlePlanBannerClose
+    }
+  })], 2)], 1)], 1) : _vm._e();
 };
 
 var __vue_staticRenderFns__$2 = [];
@@ -42027,7 +42469,7 @@ var __vue_staticRenderFns__$2 = [];
 
 const __vue_inject_styles__$2 = function (inject) {
   if (!inject) return;
-  inject("data-v-9a387b72_0", {
+  inject("data-v-3f7acd90_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
@@ -42591,12 +43033,331 @@ var __vue_render__$1 = function () {
 
   var _c = _vm._self._c || _h;
 
-  return _c('PEmptyState', {
+  return !this.planLoading && this.plans.length === 0 ? _c('PEmptyState', {
     attrs: {
       "heading": _vm.translateMe('No Plans'),
       "image": "https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"
     }
-  });
+  }) : !this.planLoading && this.plans.length > 0 ? _c('PPage', {
+    staticClass: "app-manager-plan-page-slider custom-title",
+    attrs: {
+      "title": _vm.translateMe('Plans'),
+      "subtitle": _vm.subtitleContent
+    }
+  }, [_c('PStack', {
+    attrs: {
+      "slot": "primaryAction"
+    },
+    slot: "primaryAction"
+  }, [_c('PStackItem', {
+    staticStyle: {
+      "margin-top": "20px"
+    }
+  }, [_c('PButtonGroup', {
+    staticClass: "btn-group",
+    attrs: {
+      "segmented": ""
+    }
+  }, [_vm.monthlyPlan.length && _vm.yearlyPlan.length ? _c('PButton', {
+    class: _vm.selectedPlan === 'monthly' ? 'plan-active-tab' : '',
+    style: _vm.selectedPlan === 'monthly' ? _vm.monthlySelectedStyle : _vm.monthlyStyle,
+    on: {
+      "click": function ($event) {
+        return _vm.selectPlan('monthly');
+      }
+    }
+  }, [_c('p', {
+    staticStyle: {
+      "font-size": "17px",
+      "font-weight": "500"
+    },
+    attrs: {
+      "slot": "default"
+    },
+    slot: "default"
+  }, [_vm._v(_vm._s(_vm.translateMe('Monthly')))])]) : _vm._e(), _vm._v(" "), _vm.yearlyPlan.length && _vm.monthlyPlan.length ? _c('PButton', {
+    class: _vm.selectedPlan === 'annually' ? 'plan-active-tab' : '',
+    style: _vm.selectedPlan === 'annually' ? _vm.yearlySelectedStyle : _vm.yearlyStyle,
+    attrs: {
+      "primary": _vm.selectedPlan === 'annually'
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.selectPlan('annually');
+      }
+    }
+  }, [_c('YearlyPlanPromotion')], 1) : _vm._e()], 1)], 1)], 1), _vm._v(" "), _c('hr', {
+    staticStyle: {
+      "width": "100%",
+      "margin-right": "auto",
+      "margin-left": "auto",
+      "margin-bottom": "20px"
+    }
+  }), _vm._v(" "), _c('PLayout', {
+    staticClass: "custom-plan"
+  }, [_c('PLayoutSection', {
+    staticStyle: {
+      "display": "flex",
+      "border-radius": "20px"
+    }
+  }, [[[_c('div', {
+    staticClass: "Polaris-ResourceList__ResourceListWrapper features",
+    staticStyle: {
+      "width": "30%"
+    }
+  }, [_c('div', {
+    staticClass: "plan__price"
+  }), _vm._v(" "), _c('ul', {
+    staticClass: "Polaris-ResourceList"
+  }, _vm._l(_vm.features, function (feature, key) {
+    return _c('li', {
+      key: key,
+      staticClass: "Polaris-ResourceList__ItemWrapper pro_title",
+      class: feature.value_type + "__type__" + feature.slug + " feature__type__" + feature.value_type + " feature__class"
+    }, [_c('div', {
+      staticClass: "Polaris-ResourceList-Item__Container"
+    }, [_c('div', {
+      staticClass: "Polaris-ResourceList-Item__Content"
+    }, [_c('h1', {
+      staticClass: "for-price-per-month"
+    }, [_c('span', [_vm._v(_vm._s(_vm.translateMe(feature.name)))])])])])]);
+  }), 0)])], _vm._v(" "), _c('carousel', {
+    staticStyle: {
+      "width": "70%"
+    },
+    attrs: {
+      "per-page": _vm.perPage,
+      "mouseDrag": false,
+      "navigation-enabled": true,
+      "paginationEnabled": false,
+      "navigateTo": [this.currentSlide, true]
+    },
+    on: {
+      "transition-start": function ($event) {
+        return _vm.handleNavigationClick($event);
+      }
+    }
+  }, [_vm._l(_vm.selectedPlan === 'monthly' ? _vm.monthlyPlan : _vm.yearlyPlan, function (plan, key) {
+    return _c('slide', {
+      key: "slide-" + key,
+      class: "slide-" + key,
+      attrs: {
+        "id": key
+      }
+    }, [_c('div', {
+      staticClass: "plan__price",
+      style: _vm.activePlanStyle(plan)
+    }, [plan.price === 0 ? _c('div', [plan.name !== 'Free' ? _c('b', {
+      staticStyle: {
+        "font-size": "16px"
+      }
+    }, [_vm._v(_vm._s(_vm.translateMe(plan.name)))]) : _vm._e(), _vm._v(" "), _c('p', {
+      staticStyle: {
+        "display": "flex",
+        "margin-top": "10px"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "25px",
+        "font-weight": "700"
+      }
+    }, [_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(_vm.translateMe(plan.name)))]), _vm._v(" "), _c('p', {
+      staticStyle: {
+        "display": "flex",
+        "margin-top": "10px"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "25px",
+        "font-weight": "700"
+      }
+    }, [_vm._v("$" + _vm._s(parseFloat(_vm.calculateDiscountedPrice(plan)).toFixed(2)))]), _vm._v(" "), _c('b', {
+      staticStyle: {
+        "margin-top": "5px",
+        "font-size": "17px"
+      }
+    }, [_vm._v("/" + _vm._s(_vm.translateMe(_vm.selectedPlan === 'monthly' ? "mo" : "year")))])], 1), _vm._v(" "), _c('p', {
+      staticStyle: {
+        "display": "flex",
+        "margin-top": "7px"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "18px",
+        "font-weight": "500",
+        "text-decoration": "line-through"
+      }
+    }, [_vm._v("$" + _vm._s(parseFloat(plan.price).toFixed(2)))]), _vm._v(" "), _c('b', {
+      staticStyle: {
+        "margin-top": "3px",
+        "font-size": "14px"
+      }
+    }, [_vm._v("/" + _vm._s(_vm.translateMe(_vm.selectedPlan === 'monthly' ? "mo" : "year")))])], 1)]) : _vm.promotional_discount && _vm.promotional_discount.length !== 0 && !_vm.promotional_discount.errors && _vm.promotional_discount.plan_relation.length > 0 && _vm.promotional_discount.plan_relation.includes(plan.id) && !_vm.isCurrentPlan(plan) ? _c('div', [_c('b', {
+      staticStyle: {
+        "font-size": "16px"
+      }
+    }, [_vm._v(_vm._s(_vm.translateMe(plan.name)))]), _vm._v(" "), _c('p', {
+      staticStyle: {
+        "display": "flex",
+        "margin-top": "10px"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "25px",
+        "font-weight": "700"
+      }
+    }, [_vm._v("$" + _vm._s(parseFloat(_vm.calculatePromotionalDiscountedPrice(plan, _vm.promotional_discount)).toFixed(2)))]), _vm._v(" "), _c('b', {
+      staticStyle: {
+        "margin-top": "5px",
+        "font-size": "17px"
+      }
+    }, [_vm._v("/" + _vm._s(_vm.translateMe(_vm.selectedPlan === 'monthly' ? "mo" : "year")))])], 1), _vm._v(" "), _c('p', {
+      staticStyle: {
+        "display": "flex",
+        "margin-top": "7px"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "18px",
+        "font-weight": "500",
+        "text-decoration": "line-through"
+      }
+    }, [_vm._v("$" + _vm._s(parseFloat(plan.price).toFixed(2)))]), _vm._v(" "), _c('b', {
+      staticStyle: {
+        "margin-top": "3px",
+        "font-size": "14px"
+      }
+    }, [_vm._v("/" + _vm._s(_vm.translateMe(_vm.selectedPlan === 'monthly' ? "mo" : "year")))])], 1)]) : _vm.promotional_discount && _vm.promotional_discount.length !== 0 && !_vm.promotional_discount.errors && _vm.promotional_discount.plan_relation.length === 0 && _vm.promotional_discount.value > 0 && !_vm.isCurrentPlan(plan) ? _c('div', [_c('b', {
+      staticStyle: {
+        "font-size": "16px"
+      }
+    }, [_vm._v(_vm._s(_vm.translateMe(plan.name)))]), _vm._v(" "), _c('p', {
+      staticStyle: {
+        "display": "flex",
+        "margin-top": "10px"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "25px",
+        "font-weight": "700"
+      }
+    }, [_vm._v("$" + _vm._s(parseFloat(_vm.calculatePromotionalDiscountedPrice(plan, _vm.promotional_discount)).toFixed(2)))]), _vm._v(" "), _c('b', {
+      staticStyle: {
+        "margin-top": "5px",
+        "font-size": "17px"
+      }
+    }, [_vm._v("/" + _vm._s(_vm.translateMe(_vm.selectedPlan === 'monthly' ? "mo" : "year")))])], 1), _vm._v(" "), _c('p', {
+      staticStyle: {
+        "display": "flex",
+        "margin-top": "7px"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "18px",
+        "font-weight": "500",
+        "text-decoration": "line-through"
+      }
+    }, [_vm._v("$" + _vm._s(parseFloat(plan.price).toFixed(2)))]), _vm._v(" "), _c('b', {
+      staticStyle: {
+        "margin-top": "3px",
+        "font-size": "14px"
+      }
+    }, [_vm._v("/" + _vm._s(_vm.translateMe(_vm.selectedPlan === 'monthly' ? "mo" : "year")))])], 1)]) : _c('div', [_c('b', {
+      staticStyle: {
+        "font-size": "16px"
+      }
+    }, [_vm._v(_vm._s(_vm.translateMe(plan.name)))]), _vm._v(" "), _c('p', {
+      staticStyle: {
+        "display": "flex",
+        "margin-top": "10px"
+      }
+    }, [_c('PHeading', {
+      staticStyle: {
+        "font-size": "25px",
+        "font-weight": "700"
+      }
+    }, [_vm._v("$" + _vm._s(parseFloat(plan.price).toFixed(2)))]), _vm._v(" "), _c('b', {
+      staticStyle: {
+        "margin-top": "5px",
+        "font-size": "17px"
+      }
+    }, [_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,
+        style: _vm.activePlanStyle(plan)
+      }, [_c('div', [plan.features && plan.features[feature.uuid] ? [plan.features[feature.uuid].value_type === 'boolean' ? [parseInt(plan.features[feature.uuid].value) === 1 ? _c('PIcon', {
+        attrs: {
+          "color": "success",
+          "source": "TickMinor"
+        }
+      }) : _c('PIcon', {
+        attrs: {
+          "color": "subdued",
+          "source": "MinusMinor"
+        }
+      })] : [plan.features[feature.uuid].value ? _c('span', [_vm._v(_vm._s(_vm.format(plan.features[feature.uuid])))]) : _c('PIcon', {
+        attrs: {
+          "color": "subdued",
+          "source": "MinusMinor"
+        }
+      })]] : [_c('PIcon', {
+        attrs: {
+          "color": "subdued",
+          "source": "MinusMinor"
+        }
+      })]], 2)]);
+    }), _vm._v(" "), _c('li', [_vm.isCurrentPlan(plan) ? _c('PButton', {
+      attrs: {
+        "disabled": _vm.isCurrentPlan(plan),
+        "full-width": "",
+        "pressed": _vm.isCurrentPlan(plan)
+      }
+    }, [_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": "",
+        "primary": _vm.isPlanButtonColor(plan)
+      },
+      on: {
+        "click": function ($event) {
+          plan ? _vm.getPlanUrl(plan) : 'javascript:void';
+        }
+      }
+    }, [_vm._v("\n                                                " + _vm._s(_vm.translateMe('Choose Plan')) + "\n                                            ")]) : _c('PButton', {
+      attrs: {
+        "disabled": true,
+        "full-width": "",
+        "pressed": true
+      }
+    }, [_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: {
+      "alignment": "center",
+      "distribution": "center",
+      "vertical": ""
+    }
+  }, [_c('PStackItem', {
+    attrs: {
+      "fill": ""
+    }
+  }, [_c('PButton', {
+    attrs: {
+      "plain": ""
+    },
+    on: {
+      "click": _vm.activePlan
+    }
+  }, [_vm._v(_vm._s(_vm.translateMe('I will choose the plan later')))])], 1)], 1) : _vm._e(), _vm._v(" "), _c('PlanBanners', {
+    on: {
+      "handlePlanBannerClose": _vm.handlePlanBannerClose
+    }
+  })], 1) : _vm._e();
 };
 
 var __vue_staticRenderFns__$1 = [];
@@ -42604,7 +43365,7 @@ var __vue_staticRenderFns__$1 = [];
 
 const __vue_inject_styles__$1 = function (inject) {
   if (!inject) return;
-  inject("data-v-ab978d9c_0", {
+  inject("data-v-c7ecf122_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