@platforma-sdk/ui-vue 1.28.1 → 1.28.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.28.1",
+  "version": "1.28.2",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -23,7 +23,7 @@
     "canonicalize": "~2.1.0",
     "ag-grid-enterprise": "^33.0.4",
     "ag-grid-vue3": "^33.0.4",
-    "@milaboratories/uikit": "^2.2.64",
+    "@milaboratories/uikit": "^2.2.65",
     "@platforma-sdk/model": "^1.28.1"
   },
   "devDependencies": {

package/src/components/BlockLayout.vue

@@ -7,6 +7,7 @@ import NotFound from './NotFound.vue';
 import LoaderPage from './LoaderPage.vue';
 import { PlAppErrorNotificationAlert } from './PlAppErrorNotificationAlert';
 import BlockLoader from './BlockLoader.vue';
+import { MonetizationSidebar } from '../plugins/Monetization';
 
 const sdk = useSdkPlugin();
 
@@ -49,4 +50,6 @@ const progress = computed(() => app.value?.progress?.());
     <NotFound v-else />
     <PlAppErrorNotificationAlert v-if="sdk.loaded && showErrorsNotification" :errors="errors" />
   </div>
+  <!-- Plugins -->
+  <MonetizationSidebar v-if="CurrentView" />
 </template>

package/src/plugins/Monetization/LimitCard.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  label: string;
+  used: number;
+  toSpend: number;
+  available: number | null; // If available is null it means Unlimited
+  unit?: string;
+}>();
+
+const toSpendPercentage = computed(() => {
+  if (props.available === null) return 0;
+  return (props.toSpend / props.available) * 100;
+});
+
+const usedPercentage = computed(() => {
+  if (props.available === null) return 0;
+  return (props.used / props.available) * 100;
+});
+
+const availablePercentage = computed(() => {
+  if (props.available === null) return 100;
+  return 100 - usedPercentage.value - toSpendPercentage.value;
+});
+</script>
+
+<template>
+  <div :class="$style.container">
+    <span :class="$style.label">{{ label }}</span>
+    <div :class="$style.content">
+      <div :class="$style.contentAvailable">
+        Available:
+        <div style="flex: 1" />
+        <span v-if="available !== null"><strong>{{ available }}</strong> / {{ available + toSpend + used }}</span>
+        <span v-else>Unlimited</span>
+      </div>
+      <div :class="$style.progressBar">
+        <span :class="$style.progressBarAvailable" :style="{ width: `${availablePercentage}%` }" />
+        <span :class="$style.progressBarToSpend" :style="{ width: `${toSpendPercentage}%` }" />
+        <span :class="$style.progressBarUsed" :style="{ width: `${usedPercentage}%` }" />
+      </div>
+      <div v-if="available !== null" :class="$style.legends">
+        <div :class="$style.usedLegend">
+          <i/>
+          Used: {{ used }}
+        </div>
+        <div :class="$style.toSpendLegend">
+          <i/>
+          To spend: {{ toSpend }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background-color: #F7F8FA;
+  border-radius: 6px;
+  padding: 10px 12px 16px 12px;
+  color: var(--txt-01);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  border: 1px solid var(--border-color-div-grey);
+}
+
+.label {
+  display: block;
+  margin-bottom: 30px;
+  color: var(--txt-01);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px; /* 142.857% */
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.contentAvailable {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  strong {
+    font-size: 28px;
+    font-weight: 500;
+    line-height: 36px; /* 128.571% */
+    letter-spacing: -0.56px;
+  }
+}
+
+.progressBar {
+  width: 100%;
+  height: 8px;
+  background-color: #E0E0E0;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--border-color-default);
+  > span {
+    display: block;
+    height: 100%;
+  }
+}
+
+.progressBarAvailable {
+  background-color: #49CC49;
+  border-radius: 4px;
+}
+
+.progressBarUsed {
+  background-color: #FFCECC;
+  border-radius: 4px;
+}
+
+.progressBarToSpend {
+  background-color: #FAF5AA;
+  border-radius: 4px;
+}
+
+.legends {
+  display: flex;
+  gap: 8px;
+
+  > div {
+    flex: 1;
+  }
+
+  i {
+    display: block;
+    border-radius: 1px;
+    border: 1px solid var(--border-color-default);
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.usedLegend {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  i {
+    background: #FFCECC;
+  }
+}
+
+.toSpendLegend {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  i {
+    background: #FAF5AA;
+  }
+}
+</style>

package/src/plugins/Monetization/MonetizationSidebar.vue

@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { PlSlideModal, PlBtnGhost, PlDropdown, PlAlert } from '@milaboratories/uikit';
+import { useButtonTarget } from './useButtonTarget';
+import { useInfo } from './useInfo';
+import UserCabinetCard from './UserCabinetCard.vue';
+import RunStatus from './RunStatus.vue';
+import LimitCard from './LimitCard.vue';
+const isOpen = ref(false);
+
+const teleportTarget = useButtonTarget();
+
+const { result, error, hasMonetization, canRun } = useInfo();
+
+const productName = computed(() => result.value?.productName);
+
+const userCabinetUrl = computed(() => {
+  if (!result.value) return undefined;
+
+  return `https://scientist.platforma.bio/product/${result.value.productKey}`;
+});
+
+const options = computed(() => {
+  if (!result.value) return [];
+
+  return [
+    {
+      label: result.value.productName,
+      value: result.value.productName,
+    },
+  ];
+});
+
+// TODO: update api to return limits as list of objects
+
+const used = computed(() => {
+  return result.value?.mnz.details.spentRuns ?? 0;
+});
+
+const toSpend = computed(() => {
+  return result.value?.mnz.details.runsToSpend ?? 0;
+});
+
+const available = computed(() => {
+  return result.value?.mnz.details.willRemainAfterRun ?? null;
+});
+</script>
+
+<template>
+  <PlSlideModal v-if="hasMonetization" v-model="isOpen">
+    <template #title>
+      Monetization
+    </template>
+    <PlDropdown label="Product" readonly :model-value="productName" :options="options" />
+    <RunStatus :can-run="canRun" />
+    <PlAlert v-if="error" type="error">
+      {{ error }}
+    </PlAlert>
+    <UserCabinetCard v-if="userCabinetUrl" :user-cabinet-url="userCabinetUrl" />
+    <LimitCard label="Runs Limit" :used="used" :to-spend="toSpend" :available="available" />
+  </PlSlideModal>
+  <!-- Teleport to the title slot -->
+  <Teleport v-if="hasMonetization && teleportTarget" :to="teleportTarget">
+    <PlBtnGhost icon="monetization" @click.stop="isOpen = true">
+      Monetization
+    </PlBtnGhost>
+  </Teleport>
+</template>
+
+<style module>
+.mnzContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  border: 1px solid #e0e0e0;
+  padding: 20px;
+  border-radius: 8px;
+  position: relative;
+  background-color: #fafafa;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  max-width: 600px;
+}
+
+.info {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  color: #666;
+  cursor: pointer;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 4px;
+}
+
+.statusIndicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: #ccc;
+}
+
+.statusActive {
+  background-color: #4caf50;
+}
+
+.statusSelectTariff {
+  background-color: #ff9800;
+}
+
+.statusPaymentRequired {
+  background-color: #f44336;
+}
+
+.title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.statusMessage {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: 6px;
+  background-color: #f5f5f5;
+  border-left: 4px solid #ccc;
+}
+
+.warningIcon {
+  color: #ff9800;
+}
+
+.successIcon {
+  color: #4caf50;
+}
+
+.urlSection {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  background-color: #f0f0f0;
+  border-radius: 6px;
+}
+
+.urlLabel {
+  font-weight: 500;
+  color: #555;
+}
+
+.urlActions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.urlDisplay {
+  font-family: monospace;
+  font-size: 14px;
+  color: #0066cc;
+  background-color: #e6e6e6;
+  padding: 6px 10px;
+  border-radius: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 300px;
+}
+
+.copyButton {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background-color: #2196f3;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s;
+}
+
+.copyButton:hover {
+  background-color: #0b7dda;
+}
+
+.copyButton:active {
+  background-color: #0a6bbd;
+}
+
+.copiedMessage {
+  color: #4caf50;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.details {
+  margin-top: 10px;
+  padding: 16px;
+  background-color: #f5f5f5;
+  border-radius: 6px;
+}
+
+.detailsTitle {
+  margin: 0 0 12px 0;
+  font-size: 16px;
+  font-weight: 500;
+  color: #444;
+}
+
+.detailsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 16px;
+}
+
+.detailItem {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.detailLabel {
+  font-size: 14px;
+  color: #666;
+}
+
+.detailValue {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+}
+</style>

package/src/plugins/Monetization/RunStatus.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { PlIcon24, PlTooltip } from '@milaboratories/uikit';
+
+defineProps<{
+  canRun: boolean | undefined;
+}>();
+</script>
+
+<template>
+  <div :class="[{ 'can-run': canRun }, $style.container]">
+    <div :class="$style.badge">
+      <i :class="$style.blob">
+        <span>
+          <span :class="$style.dot" />
+        </span>
+      </i>
+      <span>Can run</span>
+    </div>
+    <PlTooltip>
+      <template #tooltip>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+      </template>
+      <PlIcon24 name="info" />
+    </PlTooltip>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  --blob-color: #FF5C5C;
+  --badge-background: rgba(255, 92, 92, 0.12);
+  &.can-run {
+    --blob-color: #49CC49;
+    --badge-background: rgba(99, 224, 36, 0.12);
+  }
+}
+
+.badge {
+  display: flex;
+  height: 40px;
+  padding: 6px 16px 6px 8px;
+  align-items: center;
+  border-radius: 6px;
+  border: 1px solid var(--badge-background);
+  background: var(--badge-background);
+}
+
+.blob {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  place-items: center;
+  place-content: center;
+
+  >span {
+    display: flex;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    place-content: center;
+    place-items: center;
+    background-color: rgb(from var(--blob-color) r g b / 0.24);
+  }
+
+  .dot {
+    border-radius: 50%;
+    height: 8px;
+    width: 8px;
+    transform: scale(1);
+
+    background: var(--blob-color);
+    box-shadow: 0 0 0 0 var(--blob-color);
+    animation: pulse-glob 1s infinite;
+  }
+}
+</style>

package/src/plugins/Monetization/UserCabinetCard.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { PlIcon24 } from '@milaboratories/uikit';
+
+const props = defineProps<{
+  userCabinetUrl: string;
+}>();
+
+const copiedMessage = ref('');
+
+const copyToClipboard = () => {
+  if (props.userCabinetUrl) {
+    navigator.clipboard.writeText(props.userCabinetUrl)
+      .then(() => {
+        copiedMessage.value = 'URL copied!';
+        setTimeout(() => {
+          copiedMessage.value = '';
+        }, 2000);
+      })
+      .catch((err) => {
+        console.error('Failed to copy text: ', err);
+        copiedMessage.value = 'Copy failed';
+        setTimeout(() => {
+          copiedMessage.value = '';
+        }, 2000);
+      });
+  }
+};
+</script>
+
+<template>
+  <div v-if="userCabinetUrl" :class="$style.urlSection">
+    <div :class="$style.urlLabel">User cabinet URL:</div>
+    <div :class="$style.urlActions">
+      <div :class="$style.urlDisplay" :title="userCabinetUrl">{{ userCabinetUrl }}</div>
+      <button :class="$style.copyButton" @click="copyToClipboard">
+        <PlIcon24 name="copy" />
+        <span>Copy</span>
+      </button>
+      <span v-if="copiedMessage" :class="$style.copiedMessage">{{ copiedMessage }}</span>
+    </div>
+  </div>
+</template>
+
+<style module>
+.header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 4px;
+}
+
+.statusIndicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: #ccc;
+}
+
+.statusActive {
+  background-color: #4caf50;
+}
+
+.statusSelectTariff {
+  background-color: #ff9800;
+}
+
+.statusPaymentRequired {
+  background-color: #f44336;
+}
+
+.title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.statusMessage {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: 6px;
+  background-color: #f5f5f5;
+  border-left: 4px solid #ccc;
+}
+
+.warningIcon {
+  color: #ff9800;
+}
+
+.successIcon {
+  color: #4caf50;
+}
+
+.urlSection {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  background-color: #f0f0f0;
+  border-radius: 6px;
+}
+
+.urlLabel {
+  font-weight: 500;
+  color: #555;
+}
+
+.urlActions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.urlDisplay {
+  font-family: monospace;
+  font-size: 14px;
+  color: #0066cc;
+  background-color: #e6e6e6;
+  padding: 6px 10px;
+  border-radius: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 300px;
+}
+
+.copyButton {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background-color: #2196f3;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s;
+}
+
+.copyButton:hover {
+  background-color: #0b7dda;
+}
+
+.copyButton:active {
+  background-color: #0a6bbd;
+}
+
+.copiedMessage {
+  color: #4caf50;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.details {
+  margin-top: 10px;
+  padding: 16px;
+  background-color: #f5f5f5;
+  border-radius: 6px;
+}
+
+.detailsTitle {
+  margin: 0 0 12px 0;
+  font-size: 16px;
+  font-weight: 500;
+  color: #444;
+}
+
+.detailsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 16px;
+}
+
+.detailItem {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.detailLabel {
+  font-size: 14px;
+  color: #666;
+}
+
+.detailValue {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+}
+</style>

package/src/plugins/Monetization/index.ts

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