@platforma-sdk/ui-vue 1.28.1 → 1.28.3

package/src/plugins/Monetization/index.ts

@@ -0,0 +1,5 @@
+import MonetizationSidebar from './MonetizationSidebar.vue';
+
+export {
+  MonetizationSidebar,
+};

package/src/plugins/Monetization/useButtonTarget.ts

@@ -0,0 +1,23 @@
+import { ref, nextTick, onMounted, onUpdated } from 'vue';
+
+export function useButtonTarget() {
+  const target = ref<string>();
+
+  const selector = '.pl-block-page__title__append';
+
+  const check = () => {
+    nextTick(() => {
+      target.value = document.querySelector(selector) ? selector : undefined;
+      if (!target.value) {
+        console.error(
+          `[Monetization] use #title slot to place monetization button`,
+        );
+      }
+    });
+  };
+
+  onMounted(check);
+  onUpdated(check);
+
+  return target;
+}

package/src/plugins/Monetization/useInfo.ts

@@ -0,0 +1,42 @@
+import { computed, watch, ref } from 'vue';
+import { useSdkPlugin } from '../../defineApp';
+import { Response } from './validation';
+
+export function useInfo() {
+  const sdk = useSdkPlugin();
+
+  const app = computed(() => (sdk.loaded ? sdk.useApp() : undefined));
+
+  const hasMonetization = computed(() => '__mnzDate' in (app.value?.model?.args as Record<string, unknown>));
+
+  const mnzInfo = computed(() => Response.safeParse(app.value?.model.outputs['__mnzInfo']));
+
+  const currentInfo = computed<Response | undefined>(() => mnzInfo.value?.data);
+
+  const info = ref<Response | undefined>(undefined);
+
+  const error = computed(() => mnzInfo.value?.error ?? info.value?.response?.error);
+
+  watch([currentInfo], ([i]) => {
+    if (i) {
+      info.value = i;
+    }
+  }, { immediate: true });
+
+  const result = computed(() => info.value?.response?.result);
+
+  const canRun = computed(() => !!result.value?.canRun);
+
+  watch(canRun, (v) => {
+    if (v && hasMonetization.value) {
+      (app.value?.model.args as Record<string, unknown>)['__mnzCanRun'] = v;
+    }
+  });
+
+  return {
+    hasMonetization,
+    result,
+    error,
+    canRun,
+  };
+}

package/src/plugins/Monetization/validation.ts

@@ -0,0 +1,53 @@
+import { z } from 'zod';
+
+const MonetizationTrial = z.literal('trial');
+const MonetizationFree = z.literal('free');
+const MonetizationSinglePayment = z.literal('single_payment');
+const MonetizationSubscription = z.literal('subscription');
+
+const MonetizationType = z.union([
+  MonetizationTrial,
+  MonetizationFree,
+  MonetizationSinglePayment,
+  MonetizationSubscription,
+  z.literal('base'), // outdated
+]);
+
+const DryRunResult = z.object({
+  productKey: z.string(),
+  productName: z.string().default('Unknown product'),
+  canRun: z.boolean(),
+  status: z.union([
+    z.literal('select-tariff'),
+    z.literal('active'),
+    z.literal('payment_required'),
+    z.unknown(),
+  ]),
+  mnz: z.object({
+    type: MonetizationType.optional(),
+    details: z.object({
+      spentRuns: z.number(),
+      runsToSpend: z.number(),
+      willRemainAfterRun: z.number().nullable(),
+      subscription: z.unknown(),
+    }),
+  }),
+}, { message: 'Invalid CreateProductStatResult' });
+
+type DryRunResult = z.infer<typeof DryRunResult>;
+
+const Response = z.object({
+  httpError: z.string().optional(),
+  response: z.object({
+    result: DryRunResult.optional(),
+    error: z.unknown().optional(),
+  }).optional(),
+}).optional();
+
+type Response = z.infer<typeof Response>;
+
+export {
+  MonetizationType,
+  DryRunResult,
+  Response,
+};

package/src/types.ts

@@ -92,12 +92,6 @@ export type ExtendSettings<Href extends `/${string}` = `/${string}`> = {
   routes: Routes<Href>;
 };
 
-export type FetchResult<V, E = unknown> = {
-  loading: boolean;
-  value: V | undefined;
-  error: E;
-};
-
 // Results (ValueOrErrors)
 
 export type UnwrapValueOrError<W> = W extends {

package/dist/src/composition/useWatchFetch.d.ts

@@ -1,24 +0,0 @@
-import type { WatchSource, WatchOptions } from 'vue';
-import type { FetchResult } from '../types';
-/**
- * Watch any reactive source and perform an asynchronous operation
- *
- * @example
- * ```ts
- * const v = useWatchFetch(
- *   watchSource,
- *   async (sourceValue) => {
- *     return await fetchDataFromApi(sourceValue);
- *   }
- * );
- *
- * // Usage in a template
- * <template>
- *   <div v-if="v.loading">Loading...</div>
- *   <div v-else-if="v.error">Error: {{ v.error.message }}</div>
- *   <div v-else>Data: {{ v.value }}</div>
- * </template>
- * ```
- */
-export declare function useWatchFetch<S, V>(watchSource: WatchSource<S>, doFetch: (s: S) => Promise<V>, watchOptions?: WatchOptions): FetchResult<V>;
-//# sourceMappingURL=useWatchFetch.d.ts.map

package/dist/src/composition/useWatchFetch.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useWatchFetch.d.ts","sourceRoot":"","sources":["../../../src/composition/useWatchFetch.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,KAAK,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAI5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,CAAC,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,EAAE,YAAY,GAAG,WAAW,CAAC,CAAC,CAAC,CAmC3I"}

package/src/composition/useWatchFetch.ts

@@ -1,63 +0,0 @@
-import type { WatchSource, WatchOptions } from 'vue';
-import { reactive, watch, ref, computed } from 'vue';
-import { exclusiveRequest } from '@milaboratories/helpers';
-import type { FetchResult } from '../types';
-
-// TODO Should we keep the old value while fetching the new value?
-
-/**
- * Watch any reactive source and perform an asynchronous operation
- *
- * @example
- * ```ts
- * const v = useWatchFetch(
- *   watchSource,
- *   async (sourceValue) => {
- *     return await fetchDataFromApi(sourceValue);
- *   }
- * );
- *
- * // Usage in a template
- * <template>
- *   <div v-if="v.loading">Loading...</div>
- *   <div v-else-if="v.error">Error: {{ v.error.message }}</div>
- *   <div v-else>Data: {{ v.value }}</div>
- * </template>
- * ```
- */
-export function useWatchFetch<S, V>(watchSource: WatchSource<S>, doFetch: (s: S) => Promise<V>, watchOptions?: WatchOptions): FetchResult<V> {
-  const loadingRef = ref(0);
-
-  const data = reactive({
-    loading: computed(() => loadingRef.value > 0),
-    loadingRef,
-    value: undefined as V,
-    error: undefined,
-  }) as FetchResult<V>;
-
-  const exclusive = exclusiveRequest(doFetch);
-
-  watch(
-    watchSource,
-    async (s) => {
-      data.error = undefined;
-      loadingRef.value++;
-      exclusive(s)
-        .then((res) => {
-          if (res.ok) {
-            data.value = res.value;
-          }
-        })
-        .catch((err) => {
-          data.value = undefined;
-          data.error = err;
-        })
-        .finally(() => {
-          loadingRef.value--;
-        });
-    },
-    Object.assign({ immediate: true, deep: true }, watchOptions ?? {}),
-  );
-
-  return data;
-}