@hulkapps/app-manager-vue 2.0.0 → 2.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +14 -0
  2. package/dist/app-manager-vue.esm.js +75 -25
  3. package/dist/app-manager-vue.min.js +2 -2
  4. package/dist/app-manager-vue.ssr.js +78 -29
  5. package/dist/hulkapps-app-manager.css +1 -1
  6. package/dist/hulkapps-app-manager.min.css +1 -1
  7. package/package.json +4 -3
  8. package/src/components/Marketing/Banners.vue +1 -0
  9. package/src/components/Plans/AppManagerPlan.vue +39 -18
  10. package/src/components/Plans/YearlyPlanPromotion.vue +3 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hulkapps/app-manager-vue",
3
- "version": "2.0.0",
3
+ "version": "2.0.3",
4
4
  "description": "Vue SDK to render app manager contents",
5
5
  "main": "dist/app-manager-vue.ssr.js",
6
6
  "browser": "dist/app-manager-vue.esm.js",
@@ -34,6 +34,7 @@
34
34
  "@rollup/plugin-replace": "^2.4.2",
35
35
  "@vue/cli-plugin-babel": "^4.5.13",
36
36
  "@vue/cli-service": "^4.5.13",
37
+ "clean-css-cli": "^5.6.0",
37
38
  "cross-env": "^7.0.3",
38
39
  "minimist": "^1.2.5",
39
40
  "node-sass": "^7.0.1",
@@ -44,8 +45,8 @@
44
45
  "rollup-plugin-vue": "^5.1.9",
45
46
  "sass-loader": "^10.0.5",
46
47
  "vue": "^2.6.14",
47
- "vue-template-compiler": "^2.6.14",
48
- "vue-quill-editor": "^3.0.6"
48
+ "vue-quill-editor": "^3.0.6",
49
+ "vue-template-compiler": "^2.6.14"
49
50
  },
50
51
  "peerDependencies": {
51
52
  "vue": "^2.6.14"
package/src/components/Marketing/Banners.vue CHANGED
@@ -4,6 +4,7 @@
4
4
  v-for="(header, key) in mappedStaticContentHeaders" :key="key"
5
5
  :id="`static-content-header-${key}`"
6
6
  :status="header.status"
7
+ :title="header.title"
7
8
  @dismiss="() => dismissBanner(key)"
8
9
  >
9
10
  <span v-html="header.content"></span>
package/src/components/Plans/AppManagerPlan.vue CHANGED
@@ -8,11 +8,11 @@
8
8
  <PStack slot="primaryAction">
9
9
  <PStackItem style="margin-top: 20px">
10
10
  <PButtonGroup class="btn-group" segmented>
11
- <PButton v-if="monthlyPlan.length" :style="selectedPlan === 'monthly' ? monthlySelectedStyle : monthlyStyle " @click="selectPlan('monthly')">
11
+ <PButton v-if="monthlyPlan.length && yearlyPlan.length" :style="selectedPlan === 'monthly' ? monthlySelectedStyle : monthlyStyle " @click="selectPlan('monthly')">
12
12
  <p style="font-size: 17px; font-weight: 500" slot="default">{{('Monthly')}}</p>
13
13
  </PButton>
14
14
 
15
- <PButton v-if="yearlyPlan.length" :style="selectedPlan === 'annually' ? yearlySelectedStyle : yearlyStyle " @click="selectPlan('annually')" :primary="selectedPlan === 'annually' " >
15
+ <PButton v-if="yearlyPlan.length && monthlyPlan.length" :style="selectedPlan === 'annually' ? yearlySelectedStyle : yearlyStyle " @click="selectPlan('annually')" :primary="selectedPlan === 'annually' " >
16
16
  <YearlyPlanPromotion />
17
17
  </PButton>
18
18
  </PButtonGroup>
@@ -34,10 +34,22 @@
34
34
  <template v-for="(plan, key) in monthlyPlan" >
35
35
  <PDataTableCol :class="{'first-column': key === 0, 'plan-heading': true, 'last-column': (key+1) === monthlyPlan.length}" :style="activePlanStyle(plan)">
36
36
  <b style="font-size: 16px">{{(plan.name)}}</b>
37
- <p style="display: flex;margin-top: 10px">
38
- <PHeading style="font-size: 25px;font-weight: 700;">${{parseFloat(plan.price).toFixed(2)}}</PHeading>
39
- <b style="margin-top: 5px;font-size: 17px">/{{("mo")}}</b>
40
- </p>
37
+ <div v-if="plan.discount && plan.discount > 0" >
38
+ <p style="display: flex;margin-top: 10px">
39
+ <PHeading style="font-size: 25px;font-weight: 700;">${{parseFloat(calculateDiscountedPrice(plan)).toFixed(2)}}</PHeading>
40
+ <b style="margin-top: 5px;font-size: 17px">/{{("mo")}}</b>
41
+ </p>
42
+ <p style="display: flex;margin-top: 7px">
43
+ <PHeading style="font-size: 18px;font-weight: 500; text-decoration:line-through;">${{parseFloat(plan.price).toFixed(2)}}</PHeading>
44
+ <b style="margin-top: 3px;font-size: 14px">/{{("mo")}}</b>
45
+ </p>
46
+ </div>
47
+ <div v-else>
48
+ <p style="display: flex;margin-top: 10px">
49
+ <PHeading style="font-size: 25px;font-weight: 700;">${{parseFloat(plan.price).toFixed(2)}}</PHeading>
50
+ <b style="margin-top: 5px;font-size: 17px">/{{("mo")}}</b>
51
+ </p>
52
+ </div>
41
53
  </PDataTableCol>
42
54
  </template>
43
55
  </PDataTableRow>
@@ -81,19 +93,16 @@
81
93
  <PDataTableRow v-if="plans.length" class="row-alignment" >
82
94
  <PDataTableCol></PDataTableCol>
83
95
  <PDataTableCol v-for="(plan, cIndex) in selectedPlan === 'monthly' ? monthlyPlan : yearlyPlan" :key="`cell-${cIndex}-row-plan`" style="max-width: 0">
84
- <PButton v-if="!plan.store_base_plan" :disabled="isCurrentPlan(plan)"
96
+ <PButton v-if="isCurrentPlan(plan)" :disabled="isCurrentPlan(plan)"
85
97
  full-width
86
- @click="plan ? getPlanUrl(plan):'javascript:void'"
87
- :pressed="isCurrentPlan(plan)"
88
- :primary="!isCurrentPlan(plan)" >
89
- {{ (isCurrentPlan(plan)) ? ('Current Plan') : 'Choose Plan' }}
98
+ :pressed="isCurrentPlan(plan)">
99
+ {{ ('Current Plan') }}
90
100
  </PButton>
91
- <PButton v-else-if="plan.shopify_plans.includes(shop.shopify_plan)" :disabled="isCurrentPlan(plan)"
101
+ <PButton v-else-if="!plan.store_base_plan || plan.shopify_plans.includes(shop.shopify_plan)"
92
102
  full-width
93
103
  @click="plan ? getPlanUrl(plan):'javascript:void'"
94
- :pressed="isCurrentPlan(plan)"
95
- :primary="!isCurrentPlan(plan)" >
96
- {{ (isCurrentPlan(plan)) ? ('Current Plan') : 'Choose Plan' }}
104
+ :primary="true" >
105
+ {{ ('Choose Plan') }}
97
106
  </PButton>
98
107
  <PButton v-else :disabled="true"
99
108
  full-width
@@ -254,6 +263,14 @@
254
263
  return feature.value
255
264
  }
256
265
  },
266
+ calculateDiscountedPrice(plan) {
267
+ if (plan.discount_type === 'percentage') {
268
+ return plan.price - (plan.price * plan.discount)/100
269
+ }
270
+ else if (plan.discount_type === 'amount') {
271
+ return plan.price - plan.discount
272
+ }
273
+ },
257
274
  async getPlanUrl(plan) {
258
275
  let shopName = this.shop.name;
259
276
  const response = await axios.get(`${this.app_manager_config.baseUrl}/api/app-manager/plan/process/${plan.id}?shop=${shopName}`).catch(error => {
@@ -261,14 +278,14 @@
261
278
  });
262
279
  let redirectUrl = response.data.redirect_url;
263
280
  if (redirectUrl) {
264
- window.location.replace(redirectUrl);
281
+ window.top.location.href = redirectUrl;
265
282
  }
266
283
  },
267
284
  async activePlan() {
268
285
  const response = await this.activeWithoutPlan()
269
286
  if (response.data.status === true && this.onboard) {
270
287
  // Create the event
271
- this.$emit('continue-without-plan')
288
+ this.$emit('handlePlanSelect', {chose_later: true})
272
289
  this.onboard = false;
273
290
  }
274
291
  },
@@ -310,6 +327,9 @@
310
327
  }
311
328
  this.shopify_plan = plansData.data.shopify_plan;
312
329
  this.plan = plansData.data.plan;
330
+ if (this.plan?.interval === 'ANNUAL') {
331
+ this.selectedPlan = 'annually'
332
+ }
313
333
  this.default_plan_id = plansData.data.default_plan_id;
314
334
  this.onboard = !this.plan
315
335
  }
@@ -382,7 +402,8 @@
382
402
  }
383
403
  .app-manager-plan-page .custom-plan table tbody tr:last-child {
384
404
  border-bottom: 0;
385
- background-color: transparent;
405
+ background-color: transparent !important;
406
+ box-shadow: none !important;
386
407
  }
387
408
  .app-manager-plan-page .custom-plan table tbody tr:not(:last-child) {
388
409
  pointer-events: none;
package/src/components/Plans/YearlyPlanPromotion.vue CHANGED
@@ -4,6 +4,9 @@
4
4
  <div v-html="staticContent.content"></div>
5
5
  </div>
6
6
  </PLayoutSection>
7
+ <span v-else>
8
+ <p style="font-size: 17px; font-weight: 500" slot="default">{{('Annually')}}</p>
9
+ </span>
7
10
  </template>
8
11
 
9
12
  <script>