@simitgroup/simpleapp-generator 1.6.7-b-alpha → 1.6.7-c-alpha

package/ReleaseNote.md

@@ -1,3 +1,7 @@
+[1.6.7c-alpha]
+
+1. Add Require Plan For Mini App
+
 [1.6.7b-alpha]
 
 1. Fix Missing Import

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simitgroup/simpleapp-generator",
-  "version": "1.6.7b-alpha",
+  "version": "1.6.7c-alpha",
   "description": "frontend nuxtjs and backend nests code generator using jsonschema",
   "main": "dist/index.js",
   "scripts": {

package/templates/nuxt/plugins/19.simpleapp-mini-app-store.ts.eta

@@ -4,7 +4,7 @@
  * last change 2025-06-09
  */
 
-import _ from "lodash";
+import _, { min } from "lodash";
 import {
   Miniapp,
   MiniAppDetail,
@@ -15,6 +15,7 @@ import {
 import {
   MiniAppFormWithMiniAppCode,
   MiniAppFrameworkCompatibility,
+  MiniAppPermissionResult,
 } from "~/simpleapp/generate/features/miniApp/app/types/miniApp";
 
 export default defineNuxtPlugin(async () => {
@@ -41,6 +42,17 @@ export default defineNuxtPlugin(async () => {
 
   const MINI_APP_BUILT_IN_SETTING_NAME = "mini-app-setting";
 
+  const _ERROR = {
+    MISSING_REQUIRED_PLAN: "missingRequiredPlan",
+    INSUFFICIENT_ACCESS_PERMISSION: "insufficientAccessPermission",
+    INSUFFICIENT_INSTALL_PERMISSION: "insufficientInstallPermission",
+    INSUFFICIENT_UNINSTALL_PERMISSION: "insufficientUninstallPermission",
+    INSUFFICIENT_CHANGE_SETTING_PERMISSION:
+      "insufficientChangeSettingPermission",
+    NO_MINI_APP_FEATURE: "packageTypeRestricted",
+    NOT_YET_INSTALL: "notYetInstall",
+  };
+
   const useMiniAppStore = defineStore("mini-app", {
     state: () => ({
       actionAccess: {} as MiniAppDetailActionAccess,
@@ -99,7 +111,10 @@ export default defineNuxtPlugin(async () => {
       getMenuItems() {
         return this.installedMiniApps.flatMap((miniApp) => {
           const pages = miniApp.integration.pages.filter((page) => {
-            return this.checkIsAllowAccessMiniAppPage(miniApp.code, page.code) && this.isRequiredToShowOnMenu(page);
+            return (
+              this.isAllowAccessMiniAppPage(miniApp.code, page.code) &&
+              this.isRequiredToShowOnMenu(page)
+            );
           });
 
           if (this.isCanUpdateSetting) {
@@ -138,7 +153,7 @@ export default defineNuxtPlugin(async () => {
         });
       },
 
-      isRequiredToShowOnMenu(page: MiniappIntegrationPages){
+      isRequiredToShowOnMenu(page: MiniappIntegrationPages) {
         return page.isHideOnMenu !== true;
       },
 
@@ -185,34 +200,81 @@ export default defineNuxtPlugin(async () => {
 
       // ================================ Permission ===============================
 
-      getActionAccess(
-        type: "install" | "uninstall" | "updateSetting" | "plan",
-      ) {
-        switch (type) {
-          case "install":
-            return {
-              isAllow: this.isCanInstall,
-              reason: "insufficientInstallPermission",
-            };
-
-          case "uninstall":
-            return {
-              isAllow: this.isCanUninstall,
-              reason: "insufficientUninstallPermission",
-            };
-
-          case "updateSetting":
-            return {
-              isAllow: this.isCanUpdateSetting,
-              reason: "insufficientChangeSettingPermission",
-            };
-
-          case "plan":
-            return {
-              isAllow: this.isHasMiniAppFeature,
-              reason: "packageTypeRestricted",
-            };
+      hasRequiredPlan(miniApp: Miniapp) {
+        const currentPlan = getUserProfile().package ?? "";
+        const requiredPlans = miniApp.requiredPlans ?? [];
+        if (_.isEmpty(requiredPlans)) return true;
+
+        return requiredPlans.includes(currentPlan);
+      },
+
+      checkHasFeature() {
+        return this._check([
+          [() => this.isHasMiniAppFeature, _ERROR.NO_MINI_APP_FEATURE],
+        ]);
+      },
+
+      checkHasRequiredPlan(miniApp: Miniapp) {
+        return this._check([
+          [() => this.hasRequiredPlan(miniApp), _ERROR.MISSING_REQUIRED_PLAN],
+        ]);
+      },
+
+      checkIsInstalled(miniAppCode: string) {
+        return this._check([
+          [() => this.isMiniAppInstalled(miniAppCode), _ERROR.NOT_YET_INSTALL],
+        ]);
+      },
+
+      checkCanAccess(miniAppCode: string, pageCode: string) {
+        if (pageCode === MINI_APP_BUILT_IN_SETTING_NAME) {
+          return this._check([
+            [
+              () => this.isCanUpdateSetting,
+              _ERROR.INSUFFICIENT_ACCESS_PERMISSION,
+            ],
+          ]);
         }
+
+        return this._check([
+          [
+            () => this.isAllowAccessMiniAppPage(miniAppCode, pageCode),
+            _ERROR.INSUFFICIENT_ACCESS_PERMISSION,
+          ],
+        ]);
+      },
+
+      checkCanInstall(miniApp: Miniapp) {
+        return this._check([
+          [() => this.hasRequiredPlan(miniApp), _ERROR.MISSING_REQUIRED_PLAN],
+          [() => this.isCanInstall, _ERROR.INSUFFICIENT_INSTALL_PERMISSION],
+        ]);
+      },
+
+      checkCanUninstall(miniApp: Miniapp) {
+        return this._check([
+          [() => this.isCanUninstall, _ERROR.INSUFFICIENT_UNINSTALL_PERMISSION],
+        ]);
+      },
+
+      checkCanUpdateSetting(miniApp: Miniapp) {
+        return this._check([
+          [() => this.hasRequiredPlan(miniApp), _ERROR.MISSING_REQUIRED_PLAN],
+          [
+            () => this.isCanUpdateSetting,
+            _ERROR.INSUFFICIENT_CHANGE_SETTING_PERMISSION,
+          ],
+        ]);
+      },
+
+      _check(checks: [() => boolean, string][]): MiniAppPermissionResult {
+        for (const [checkFn, reason] of checks) {
+          if (!checkFn()) {
+            return { status: false, reason };
+          }
+        }
+
+        return { status: true };
       },
 
       // ============================ Path & Navigation ============================
@@ -254,7 +316,7 @@ export default defineNuxtPlugin(async () => {
 
       // ============================ Validation ============================
 
-      checkIsMiniAppInstalled(miniAppCode: string) {
+      isMiniAppInstalled(miniAppCode: string) {
         const miniApp = this.installedMiniApps.find(
           (item) => item.code === miniAppCode,
         );
@@ -262,7 +324,7 @@ export default defineNuxtPlugin(async () => {
         return miniApp ? true : false;
       },
 
-      checkIsAllowAccessMiniAppPage(miniAppCode: string, pageCode: string) {
+      isAllowAccessMiniAppPage(miniAppCode: string, pageCode: string) {
         const miniApp = this.installedMiniApps.find(
           (item) => item.code === miniAppCode,
         );

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/MiniAppPermissionWrapper.vue.eta

@@ -1,19 +1,17 @@
 <template>
   <MiniAppRestrictedWarning
-    v-if="!actionAccess.isAllow"
-    :reason="actionAccess.reason"
+    v-if="!permission.status"
+    :reason="permission.reason ?? ''"
     class="flex items-center justify-center mt-10"
   />
   <slot v-else />
 </template>
 
 <script setup lang="ts">
+import { MiniAppPermissionResult } from "../types/miniApp";
 import MiniAppRestrictedWarning from "./MiniAppRestrictedWarning.vue";
 
 defineProps<{
-  actionAccess: {
-    isAllow: boolean;
-    reason: string;
-  };
+  permission: MiniAppPermissionResult;
 }>();
 </script>

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/MiniAppSettingLayout.vue.eta

@@ -12,7 +12,8 @@
     </div>
 
     <MiniAppPermissionWrapper
-      :actionAccess="$miniAppStore.getActionAccess('updateSetting')"
+      v-if="miniApp"
+      :permission="$miniAppStore.checkCanUpdateSetting(miniApp)"
     >
       <slot />
     </MiniAppPermissionWrapper>
@@ -20,10 +21,18 @@
 </template>
 
 <script setup lang="ts">
-import MiniAppPermissionWrapper from './MiniAppPermissionWrapper.vue';
+import MiniAppPermissionWrapper from "./MiniAppPermissionWrapper.vue";
 
-defineProps<{
+const props = defineProps<{
   isFetching: boolean;
+  miniAppCode: string;
   miniAppTitle: string;
 }>();
+
+const { $miniAppStore } = useNuxtApp();
+const miniApp = computed(() => {
+  return $miniAppStore.installedMiniApps.find(
+    (item) => item.code === props.miniAppCode,
+  );
+});
 </script>

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/MiniAppSettingPage.vue.eta

@@ -6,10 +6,14 @@
     :data="data"
     #default="o"
   >
-    <MiniAppSettingLayout :isFetching="isFetching" :miniAppTitle="miniAppTitle">
+    <MiniAppSettingLayout
+      :isFetching="isFetching"
+      :miniAppCode="_miniAppCode"
+      :miniAppTitle="miniAppTitle"
+    >
       <template #action>
         <Button class="btn-primary" @click="o.validate(validateCallBack)">
-          {{ t('miniAppLang.saveSetting') }}
+          {{ t("miniAppLang.saveSetting") }}
         </Button>
       </template>
 
@@ -20,8 +24,8 @@
             class="text-sm text-gray-600 whitespace-pre-line"
           >
             {{
-              t('miniAppLang.miniAppSettingNote', {
-                miniAppNote: miniApp.integration.settings.note ?? ''
+              t("miniAppLang.miniAppSettingNote", {
+                miniAppNote: miniApp.integration.settings.note ?? "",
               })
             }}
           </p>
@@ -42,15 +46,15 @@
 </template>
 
 <script setup lang="ts" generic="T">
-import _ from 'lodash';
-import MiniAppSettingLayout from './MiniAppSettingLayout.vue';
-import CustomFieldFormField from '../../../customField/components/CustomFieldFormField.vue';
+import _ from "lodash";
+import MiniAppSettingLayout from "./MiniAppSettingLayout.vue";
+import CustomFieldFormField from "../../../customField/components/CustomFieldFormField.vue";
 
 const props = defineProps<{
   miniAppCode?: string;
 }>();
 
-const _miniAppCode = props.miniAppCode ?? getPathPara('miniAppCode');
+const _miniAppCode = props.miniAppCode ?? getPathPara("miniAppCode");
 
 const {
   isFetching,
@@ -60,7 +64,7 @@ const {
   settingSchema,
   data,
   loadMiniAppDetail,
-  validateCallBack
+  validateCallBack,
 } = useMiniAppSetting(_miniAppCode);
 
 onMounted(async () => {

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/MiniAppWrapper.vue.eta

@@ -3,37 +3,47 @@
 
   <MiniAppPermissionWrapper
     v-if="!$miniAppStore.isFetchingInstalledMiniApps"
-    :actionAccess="$miniAppStore.getActionAccess('plan')"
+    :permission="permission"
   >
-    <MiniAppPermissionWrapper
-      :actionAccess="{
-        isAllow: $miniAppStore.checkIsMiniAppInstalled(miniAppCode),
-        reason: 'notYetInstall'
-      }"
-    >
-      <MiniAppPermissionWrapper
-        v-if="pageCode !== ''"
-        :actionAccess="{
-          isAllow: $miniAppStore.checkIsAllowAccessMiniAppPage(
-            miniAppCode,
-            pageCode
-          ),
-          reason: 'insufficientAccessPermission'
-        }"
-      >
-        <slot />
-      </MiniAppPermissionWrapper>
-
-      <slot v-else />
-    </MiniAppPermissionWrapper>
+    <slot />
   </MiniAppPermissionWrapper>
 </template>
 
 <script setup lang="ts">
-import MiniAppPermissionWrapper from './MiniAppPermissionWrapper.vue';
+import MiniAppPermissionWrapper from "./MiniAppPermissionWrapper.vue";
 
-defineProps<{
+const props = defineProps<{
   miniAppCode: string;
   pageCode: string;
 }>();
+
+const { $miniAppStore } = useNuxtApp();
+
+const miniApp = computed(() => {
+  return $miniAppStore.installedMiniApps.find(
+    (item) => item.code === props.miniAppCode,
+  );
+});
+
+const permission = computed(() => {
+  const checkHasFeature = $miniAppStore.checkHasFeature();
+  if (!checkHasFeature.status) return checkHasFeature;
+
+  const checkIsInstalled = $miniAppStore.checkIsInstalled(props.miniAppCode);
+  if (!checkIsInstalled.status) return checkIsInstalled;
+
+  if (!miniApp.value) {
+    return {
+      status: false,
+      reason: "unknownMiniApp",
+    };
+  }
+
+  const checkHasRequiredPlan = $miniAppStore.checkHasRequiredPlan(
+    miniApp.value,
+  );
+  if (!checkHasRequiredPlan.status) return checkHasRequiredPlan;
+
+  return $miniAppStore.checkCanAccess(props.miniAppCode, props.pageCode);
+});
 </script>

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/integration/MiniAppIntegrationItem.vue.eta

@@ -7,7 +7,7 @@
     }"
     @click="handleMiniAppClick(item)"
   >
-    <div class="absolute top-2 right-2 flex space-x-1">
+    <div class="absolute top-1 right-1 flex space-x-1">
       <MiniAppIntegrationItemBadge :item="item" />
     </div>
 

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/integration/MiniAppIntegrationItemBadge.vue.eta

@@ -1,12 +1,32 @@
 <template>
   <span
-    class="text-white text-xs px-2 font-bold py-0.5 rounded-md shadow uppercase"
+    v-if="badgeType !== 'notAvailable' && badgeType !== 'noFeature'"
+    class="text-white text-[0.65rem] px-2 font-bold py-0.5 rounded-md shadow uppercase"
     :class="{
-      'bg-emerald-500': badgeType === 'free',
+      'bg-emerald-500': badgeType === 'available',
       'bg-yellow-400': badgeType === 'comingSoon',
     }"
   >
-    {{ t(badgeType) }}
+    {{ t(`miniAppLang.${badgeType}`) }}
+  </span>
+  <span
+    v-else
+    class="bg-slate-200/50 text-surface-500 text-[0.65rem] px-2 font-bold py-0.5 rounded-md uppercase"
+  >
+    <template v-if="badgeType === 'notAvailable'">
+      {{
+        t(`miniAppLang.requiredPlansOnly`, {
+          requiredPlans: item.requiredPlans.join(" | "),
+        })
+      }}
+    </template>
+    <template v-else>
+      {{
+        t("miniAppLang.requiredPlansOnly", {
+          requiredPlans: ["lite", "pro", "enterprise"].join(" | "),
+        })
+      }}
+    </template>
   </span>
 </template>
 
@@ -17,15 +37,21 @@ const props = defineProps<{
   item: Miniapp;
 }>();
 
-const badgeType = computed(() => {
-  if (props.item.status === "published" && props.item.pricing === 0) {
-    return "free";
-  }
+const { $miniAppStore } = useNuxtApp();
 
+const badgeType = computed(() => {
   if (props.item.status === "upcoming") {
     return "comingSoon";
   }
 
-  return "";
+  if ($miniAppStore.hasRequiredPlan(props.item)) {
+    if (!$miniAppStore.isHasMiniAppFeature) {
+      return "noFeature";
+    }
+
+    return "available";
+  }
+
+  return "notAvailable";
 });
 </script>

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/integration/MiniAppIntegrationItemGroup.vue.eta

@@ -18,17 +18,17 @@
   </div>
 </template>
 <script setup lang="ts">
-import UndrawNodata from '~/components/icon/UndrawNodata.vue';
-import { Miniapp } from '~/simpleapp/generate/openapi';
-import MiniAppIntegrationItem from './MiniAppIntegrationItem.vue';
+import UndrawNodata from "~/components/icon/UndrawNodata.vue";
+import { Miniapp } from "~/simpleapp/generate/openapi";
+import MiniAppIntegrationItem from "./MiniAppIntegrationItem.vue";
 
 defineProps<{ items: Miniapp[] | undefined }>();
 
 const emits = defineEmits<{
-  (event: 'miniAppClick', item: Miniapp): void;
+  (event: "miniAppClick", item: Miniapp): void;
 }>();
 
 function handleMiniAppClick(item: Miniapp) {
-  emits('miniAppClick', item);
+  emits("miniAppClick", item);
 }
 </script>

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/integration/MiniAppIntegrationPage.vue.eta

@@ -1,5 +1,5 @@
 <template>
-  <title>{{ miniApp?.name }} - {{ t('miniAppLang.miniApp') }}</title>
+  <title>{{ miniApp?.name }} - {{ t("miniAppLang.miniApp") }}</title>
   <LoadingLine :loading="isFetching" />
 
   <div
@@ -18,6 +18,28 @@
           </div>
           <span>|</span>
           <div>v {{ miniApp.version }}</div>
+
+          <div
+            v-if="!_.isEmpty(miniApp.requiredPlans)"
+            class="flex items-center gap-2"
+          >
+            <span>|</span>
+            <span
+              v-for="permission in miniApp.requiredPlans ?? []"
+              class="px-3 py-0.5 bg-slate-100 text-surface-500 font-semibold text-xs rounded uppercase"
+            >
+              {{ permission }}
+            </span>
+          </div>
+          <div v-else class="flex items-center gap-2">
+            <span>|</span>
+            <span
+              v-for="permission in ['lite', 'pro', 'enterprise']"
+              class="px-3 py-0.5 bg-slate-100 text-surface-500 font-semibold text-xs rounded uppercase"
+            >
+              {{ permission }}
+            </span>
+          </div>
         </div>
         <p class="text-gray-600">{{ miniApp.intro.description }}</p>
       </div>
@@ -31,13 +53,14 @@
       </template>
       <MiniAppPermissionWrapper
         v-else
-        :actionAccess="$miniAppStore.getActionAccess('plan')"
+        :permission="$miniAppStore.checkHasFeature()"
       >
-        <div class="flex space-x-2">
-          <template v-if="$miniAppStore.checkIsMiniAppInstalled(miniApp.code)">
+        <div class="flex items-center space-x-2">
+          <template v-if="$miniAppStore.isMiniAppInstalled(miniApp.code)">
             <!-- Installed -->
             <MiniAppPermissionWrapper
-              :actionAccess="$miniAppStore.getActionAccess('uninstall')"
+              :permission="$miniAppStore.checkCanUninstall(miniApp)"
+              class="!mt-0"
             >
               <ButtonDefault
                 :label="t('miniAppLang.uninstallApp')"
@@ -52,7 +75,8 @@
                 miniApp.integration.settings &&
                 !_.isEmpty(miniApp.integration.settings)
               "
-              :actionAccess="$miniAppStore.getActionAccess('updateSetting')"
+              :permission="$miniAppStore.checkCanUpdateSetting(miniApp)"
+              class="!mt-0"
             >
               <ButtonSecondary
                 :label="t('miniAppLang.openSetting')"
@@ -65,7 +89,8 @@
           <template v-else>
             <!-- Not yet install -->
             <MiniAppPermissionWrapper
-              :actionAccess="$miniAppStore.getActionAccess('install')"
+              :permission="$miniAppStore.checkCanInstall(miniApp)"
+              class="!mt-0"
             >
               <ButtonPrimary
                 :label="t('miniAppLang.installApp')"
@@ -125,9 +150,9 @@
 </template>
 
 <script setup lang="ts">
-import _ from 'lodash';
-import { MiniAppDetail } from '~/simpleapp/generate/openapi';
-import MiniAppPermissionWrapper from '../MiniAppPermissionWrapper.vue';
+import _ from "lodash";
+import { MiniAppDetail } from "~/simpleapp/generate/openapi";
+import MiniAppPermissionWrapper from "../MiniAppPermissionWrapper.vue";
 
 defineProps<{
   miniApp?: MiniAppDetail;
@@ -136,21 +161,21 @@ defineProps<{
 }>();
 
 const emits = defineEmits<{
-  (e: 'installApp'): void;
-  (e: 'uninstallApp'): void;
-  (e: 'openSetting'): void;
-  (e: 'upgradePlan'): void;
+  (e: "installApp"): void;
+  (e: "uninstallApp"): void;
+  (e: "openSetting"): void;
+  (e: "upgradePlan"): void;
 }>();
 
 function handleInstallApp() {
-  emits('installApp');
+  emits("installApp");
 }
 
 function handleUninstallApp() {
-  emits('uninstallApp');
+  emits("uninstallApp");
 }
 
 function handleOpenSetting() {
-  emits('openSetting');
+  emits("openSetting");
 }
 </script>

package/templates/nuxt/simpleapp/generate/features/miniApp/app/types/miniApp.ts.eta

@@ -23,3 +23,8 @@ export type CategorizedMiniApp = {
   upcomingMiniApps: MiniAppDetail[];
   availableMiniApps: MiniAppDetail[];
 };
+
+export type MiniAppPermissionResult = {
+  status: boolean;
+  reason?: string;
+};