@simitgroup/simpleapp-generator 1.6.7-h-alpha → 1.6.7-j-alpha

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

@@ -7,25 +7,32 @@
     class="p-8 max-w-4xl mx-auto mb-10 space-y-4"
   >
     <div class="flex items-start">
-      <img :src="miniApp.logo" class="size-16 mr-8 object-contain" />
+      <!-- <img :src="miniApp.logo" class="size-16 mr-8 object-contain" /> -->
+
+      <MiniAppIcon
+        :image="miniApp.logo"
+        :label="miniApp.name"
+        size="lg"
+        class="mr-8"
+      />
 
       <div class="space-y-1">
         <h1 class="text-3xl font-bold mb-1">{{ miniApp.name }}</h1>
         <div class="text-gray-400 text-sm flex items-center gap-2">
           <div class="flex items-center gap-2">
             <i class="pi pi-user" />
-            <span>{{ miniApp.author }}</span>
+            <span>{{ miniApp.author.team ?? miniApp.author.name }}</span>
           </div>
           <span>|</span>
           <div>v {{ miniApp.version }}</div>
 
           <div
-            v-if="!_.isEmpty(miniApp.requiredPlans)"
+            v-if="!_.isEmpty(miniApp.access.requiredPlans)"
             class="flex items-center gap-2"
           >
             <span>|</span>
             <span
-              v-for="permission in miniApp.requiredPlans ?? []"
+              v-for="permission in miniApp.access.requiredPlans ?? []"
               class="px-3 py-0.5 bg-slate-100 text-surface-500 font-semibold text-xs rounded uppercase"
             >
               {{ permission }}
@@ -42,6 +49,22 @@
           </div>
         </div>
         <p class="text-gray-600">{{ miniApp.intro.description }}</p>
+
+        <div class="flex items-center gap-1">
+          <template
+            v-for="[feature, enabled] in Object.entries(
+              miniApp.integration.enabled,
+            )"
+          >
+            <span
+              v-if="enabled"
+              class="px-3 py-0.5 bg-primary-50 text-primary-500 font-semibold text-xs rounded uppercase cursor-pointer"
+              @click="() => handleOpenFeatureDialog(feature, enabled)"
+            >
+              {{ t(`miniAppLang.integrationFeature.${feature}`) }}
+            </span>
+          </template>
+        </div>
       </div>
     </div>
 
@@ -53,13 +76,13 @@
       </template>
       <MiniAppPermissionWrapper
         v-else
-        :permission="$miniAppStore.checkHasFeature()"
+        :validation="$miniAppStore.validation('miniAppFeature')"
       >
         <div class="flex items-center space-x-2">
           <template v-if="$miniAppStore.isMiniAppInstalled(miniApp.code)">
             <!-- Installed -->
             <MiniAppPermissionWrapper
-              :permission="$miniAppStore.checkCanUninstall(miniApp)"
+              :validation="$miniAppStore.validation('uninstall')"
               class="!mt-0"
             >
               <ButtonDefault
@@ -71,11 +94,8 @@
             </MiniAppPermissionWrapper>
 
             <MiniAppPermissionWrapper
-              v-if="
-                miniApp.integration.settings &&
-                !_.isEmpty(miniApp.integration.settings)
-              "
-              :permission="$miniAppStore.checkCanUpdateSetting(miniApp)"
+              v-if="$miniAppStore.hasSettingPage(miniApp)"
+              :validation="$miniAppStore.validation('updateSetting')"
               class="!mt-0"
             >
               <ButtonSecondary
@@ -89,7 +109,7 @@
           <template v-else>
             <!-- Not yet install -->
             <MiniAppPermissionWrapper
-              :permission="$miniAppStore.checkCanInstall(miniApp)"
+              :validation="$miniAppStore.validation('install')"
               class="!mt-0"
             >
               <ButtonPrimary
@@ -105,19 +125,49 @@
 
       <div v-if="miniApp.intro.previewImages.length > 0">
         <h2 class="text-xl font-semibold mb-2">Overview:</h2>
-        <div class="card flex justify-center py-4">
+        <div class="card flex justify-center py-4 h-96 bg-slate-100 rounded-xl">
           <Galleria
             :value="miniApp.intro.previewImages"
             :numVisible="5"
-            containerStyle="max-width: 640px"
             :showThumbnails="false"
             :showIndicators="true"
+            :showItemNavigators="true"
+            :pt="{
+              root: {
+                class: '!grow !h-full',
+              },
+              content: {
+                class: '!h-full',
+              },
+              itemsContainer: {
+                class: '!h-full',
+              },
+              items: {
+                class: '!grow',
+              },
+              item: {
+                class: '!grow',
+              },
+              prevButton: {
+                class: '!bg-slate-200 cursor-pointer',
+              },
+              prevIcon: {
+                class: 'text-black',
+              },
+              nextButton: {
+                class: '!bg-slate-200 cursor-pointer',
+              },
+              nextIcon: {
+                class: 'text-black',
+              },
+            }"
           >
             <template #item="slotProps">
               <img
                 :src="slotProps.item"
                 :alt="miniApp.name"
-                style="width: 100%; display: block"
+                style="display: block"
+                class="h-80 rounded-xl shadow-md"
               />
             </template>
           </Galleria>
@@ -132,10 +182,12 @@
             :key="feature.title"
             class="flex space-x-2"
           >
-            <div>✅</div>
-            <div>
-              <div>
-                <span class="font-semibold">{{ feature.title }}</span> -
+            <div class="flex flex-col">
+              <div class="flex items-center gap-2">
+                <i class="pi pi-check-circle text-primary" />
+                <span class="font-semibold">{{ feature.title }}</span>
+              </div>
+              <div class="pl-6 text-slate-400 text-sm">
                 {{ feature.description }}
               </div>
             </div>
@@ -143,18 +195,59 @@
         </div>
       </div>
     </div>
+
+    <Dialog
+      v-model:visible="isShowApiAccessFeature"
+      :modal="true"
+      maximizable
+      :header="t('scopes')"
+      class="!w-1/2 !h-2/3"
+    >
+      <MiniAppFeatureScope :miniApp="miniApp" />
+    </Dialog>
+
+    <Dialog
+      v-model:visible="isShowCustomPageFeature"
+      :modal="true"
+      maximizable
+      :header="t('customPage')"
+      class="!w-1/2 !h-2/3"
+    >
+      <MiniAppFeatureCustomPage :miniApp="miniApp" />
+    </Dialog>
+
+    <Dialog
+      v-model:visible="isShowCustomFieldFeature"
+      :modal="true"
+      maximizable
+      :header="t('customField')"
+      class="!w-1/2 !h-2/3"
+    >
+      <MiniAppFeatureCustomField :miniApp="miniApp" />
+    </Dialog>
   </div>
   <div v-else>
-    <template v-if="!isFetching"> Not found... </template>
+    <template v-if="!isFetching">
+      <NodataLarge
+        :label="t('noDataFound')"
+        :icon="UndrawNodata"
+        class="my-24"
+      />
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import _ from "lodash";
+import _, { min } from "lodash";
 import { MiniAppDetail } from "~/simpleapp/generate/openapi";
 import MiniAppPermissionWrapper from "../MiniAppPermissionWrapper.vue";
+import UndrawNodata from "~/components/icon/UndrawNodata.vue";
+import MiniAppIcon from "../MiniAppIcon.vue";
+import MiniAppFeatureCustomPage from "../MiniAppFeatureCustomPage.vue";
+import MiniAppFeatureCustomField from "../MiniAppFeatureCustomField.vue";
+import MiniAppFeatureScope from "../MiniAppFeatureScope.vue";
 
-defineProps<{
+const props = defineProps<{
   miniApp?: MiniAppDetail;
   isFetching: boolean;
   isAppInstallationInProgress: boolean;
@@ -167,6 +260,10 @@ const emits = defineEmits<{
   (e: "upgradePlan"): void;
 }>();
 
+const isShowApiAccessFeature = ref(false);
+const isShowCustomPageFeature = ref(false);
+const isShowCustomFieldFeature = ref(false);
+
 function handleInstallApp() {
   emits("installApp");
 }
@@ -178,4 +275,20 @@ function handleUninstallApp() {
 function handleOpenSetting() {
   emits("openSetting");
 }
+
+function handleOpenFeatureDialog(feature: string, enabled: boolean) {
+  if (enabled) {
+    switch (feature) {
+      case "miniApi":
+        isShowApiAccessFeature.value = true;
+        break;
+      case "customField":
+        isShowCustomFieldFeature.value = true;
+        break;
+      case "customPage":
+        isShowCustomPageFeature.value = true;
+        break;
+    }
+  }
+}
 </script>

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

@@ -1,7 +1,6 @@
 import type {
   MiniAppDetail,
-  MiniappIntegrationForms,
-  MiniappIntegrationPages,
+  MiniappIntegrationCustomFieldFields,
 } from "~/simpleapp/generate/openapi";
 
 export enum MiniAppFrameworkCompatibility {
@@ -10,11 +9,7 @@ export enum MiniAppFrameworkCompatibility {
   "DEPRECATED" = "DEPRECATED",
 }
 
-export type MiniAppPageWithMiniAppCode = MiniappIntegrationPages & {
-  miniAppCode: string;
-};
-
-export type MiniAppFormWithMiniAppCode = MiniappIntegrationForms & {
+export type MiniAppFormWithMiniAppCode = MiniappIntegrationCustomFieldFields & {
   miniAppCode: string;
 };
 
@@ -28,3 +23,8 @@ export type MiniAppPermissionResult = {
   status: boolean;
   reason?: string;
 };
+
+export type MiniAppValidationResp = {
+  valid: boolean;
+  type: string;
+};

package/templates/nuxt/simpleapp/generate/features/miniApp/bridge/services/bridge-resource-accessor.service.ts.eta

@@ -41,6 +41,8 @@ export class MiniAppBridgeResourceAccessor {
 
   protected miniAppCode: string = "";
 
+  protected developerPortalAppId: string = "";
+
   <% for (let i = 0; i < it.modules.length; i++) { %>
     <%
       const { resourceName, pascalName, kebabName, hasMiniAppWhitelistedApi } = getMiniAppInfo(it.modules[i]);
@@ -48,7 +50,7 @@ export class MiniAppBridgeResourceAccessor {
     <% if(hasMiniAppWhitelistedApi) { %>
       get <%= resourceName %>() {
         if (!this.instances.<%= resourceName %>) {
-          this.instances.<%= resourceName %> = new MiniApp<%= pascalName %>BridgeEditableService(this.miniAppCode);
+          this.instances.<%= resourceName %> = new MiniApp<%= pascalName %>BridgeEditableService(this.miniAppCode, this.developerPortalAppId);
         }
         return this.instances.<%= resourceName %>;
       }

package/templates/nuxt/simpleapp/generate/features/miniApp/bridge/services/bridge.service.ts.eta

@@ -64,10 +64,13 @@ export class MiniAppBridgeService extends MiniAppBridgeResourceAccessor {
     messageEvent: MessageEvent,
     message: MiniAppBridgeMessageApi<any>,
     miniAppCode: string,
+    developerPortalAppId: string,
   ) {
     try {
       this.miniAppCode = miniAppCode;
 
+      this.developerPortalAppId = developerPortalAppId;
+
       const data = await this.handleBridgeCallApi(message);
 
       messageEvent.source?.postMessage(