cloudblue · nerimartinez · Sep 22, 2023 · Sep 22, 2023
diff --git a/...ppr/static/index.6f15022f4aecf590cc95.css → ...ppr/static/index.79edc4161086dcc9a76c.css b/...ppr/static/index.6f15022f4aecf590cc95.css → ...ppr/static/index.79edc4161086dcc9a76c.css
@@ -1842,6 +1842,7 @@ button + .c-text-field__append-inner > svg[data-v-b5bb9caa]:first-child {
   margin-top: 0;
 }
 .pricing-tab__pricelist {
+  min-width: 226px;
   max-width: 226px;
 }
 

diff --git a/..._ppr/static/index.ab2a9c611cfbbcb19f36.js → ..._ppr/static/index.7dace5de4ae265038d36.js b/..._ppr/static/index.ab2a9c611cfbbcb19f36.js → ..._ppr/static/index.7dace5de4ae265038d36.js
diff --git a/connect_ext_ppr/static/index.html b/connect_ext_ppr/static/index.html
@@ -12,7 +12,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <title>Index</title>
-<script defer src="vendors.3c43b45d3e9e7cbf9863.js"></script><script defer src="index.ab2a9c611cfbbcb19f36.js"></script><link href="index.6f15022f4aecf590cc95.css" rel="stylesheet"></head>
+<script defer src="vendors.3c43b45d3e9e7cbf9863.js"></script><script defer src="index.7dace5de4ae265038d36.js"></script><link href="index.79edc4161086dcc9a76c.css" rel="stylesheet"></head>
 
 <body>
     <div id="app"></div>

diff --git a/...c/request-details.4603b974f1f1b0a7f6bd.js → ...c/request-details.2e8575914807cddd3bc9.js b/...c/request-details.4603b974f1f1b0a7f6bd.js → ...c/request-details.2e8575914807cddd3bc9.js
diff --git a/ui/src/components/CreateDeploymentRequestDialog/PricingTab.vue b/ui/src/components/CreateDeploymentRequestDialog/PricingTab.vue
@@ -34,7 +34,7 @@
           template(v-else-if="header.value === 'pricing'")
 
             c-menu(
-              v-if="row.pricelist",
+              v-if="row.batches.length > 0",
               locator="batches-list",
               outline,
               small,
@@ -48,11 +48,17 @@
                   :icon-right="icons.googleArrowDropDownBaseline"
                   mode="outlined",
                 )
-                  .truncate-text.pricing-tab__pricelist(
-                    :title="row.pricelist.name",
-                  ) {{ row.pricelist.name }}
+                  .pricing-tab__pricelist.truncate-text {{ selectedPricelist(row) }}
 
               template(#default="")
+                c-button(
+                  small,
+                  :upper-case="false",
+                  fluid,
+                  @click="resetBatch(row)",
+                )
+                  .assistive-color —
+
                 div(
                   v-for="batch in row.batches",
                   :key="batch.id",
@@ -150,14 +156,30 @@ export default {
         name: item.name,
         icon: item.icon,
         batches: item.batches,
-        pricelist: item.batches[0],
+        pricelist: item.pricelist,
       };
     },
 
+    findMarketplaceInList(id) {
+      return findIndex(propEq(id, 'id'), this.localValue);
+    },
+
     setBatch(batch, marketplace) {
-      const index = findIndex(propEq(marketplace.id, 'id'), this.localValue);
+      const index = this.findMarketplaceInList(marketplace.id);
       this.localValue[index].pricelist = pick(['id', 'name'], batch);
     },
+
+    resetBatch(marketplace) {
+      const index = this.findMarketplaceInList(marketplace.id);
+      this.localValue[index].pricelist = undefined;
+    },
+
+    selectedPricelist(marketplace) {
+      const index = this.findMarketplaceInList(marketplace.id);
+
+      return this.localValue[index].pricelist
+        ? this.localValue[index].pricelist.name : '—';
+    },
   },
 
   async created() {
@@ -194,6 +216,7 @@ export default {
   }
 
   &__pricelist {
+    min-width: 226px;
     max-width: 226px;
   }
 }

diff --git a/ui/src/components/RequestMarketplacesTab.vue b/ui/src/components/RequestMarketplacesTab.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 .request-marketplaces-tab
   c-data-table(
-    v-model="marketplaces",
+    v-model="marketplacesWithBatchesInfo",
     :headers="headers",
     :prepare-row="prepareRow",
     :show-loader="loading",
@@ -34,20 +34,48 @@
             :key="header.value",
           )
             span(v-if="row.externalId") {{ row.externalId }}
-            span.assistive-text(v-else) –
+            .assistive-color(v-else) —
+
+          //- Pricing Batch column
+          td.nowrap-cell(
+            v-if="header.value === 'pricelist'",
+            :key="header.value",
+          )
+            detail-item(
+              v-if="row.pricelist",
+              :assistive-text="row.pricelist.id",
+            )
+              template(#body-text="")
+                .truncate-text {{ row.pricelist.name }}
+
+            .assistive-color(v-else) —
+
 
 </template>
 
 <script>
+import {
+  path,
+} from 'ramda';
+
+
 import cDataTable from '~components/cDataTable.vue';
 import DetailItem from '~components/DetailItem.vue';
 import Pic from '~components/Pic.vue';
 
 import {
+  enrich,
+} from '@/tools/utils';
+
+import {
+  getDeploymentBatches,
   getDeploymentRequestMarketplaces,
 } from '@/utils';
 
 
+const enrichByBatchInfo = enrich('id', ['pricelist', 'id'], 'pricelist');
+
+
 export default {
   components: {
     cDataTable,
@@ -56,22 +84,29 @@ export default {
   },
 
   props: {
-    requestId: {
-      type: String,
+    request: {
+      type: Object,
       required: true,
     },
   },
 
   data: () => ({
     loading: true,
     marketplaces: [],
+    marketplacesWithBatchesInfo: [],
 
     headers: [
       { text: 'Marketplace', value: 'marketplace' },
       { text: 'External ID', value: 'externalId' },
+      { text: 'Pricing Batch', value: 'pricelist' },
     ],
   }),
 
+  computed: {
+    requestId: path(['request', 'id']),
+    deploymentId: path(['request', 'deployment', 'id']),
+  },
+
   methods: {
     prepareRow(item) {
       return {
@@ -81,12 +116,17 @@ export default {
           name: item.name,
           icon: item.icon,
         },
+
+        pricelist: item.pricelist,
       };
     },
   },
 
   async created() {
     this.marketplaces = await getDeploymentRequestMarketplaces(this.requestId);
+    const batches = await getDeploymentBatches(this.deploymentId);
+
+    this.marketplacesWithBatchesInfo = enrichByBatchInfo(batches, this.marketplaces);
     this.loading = false;
   },
 };

diff --git a/ui/src/pages/RequestDetails.vue b/ui/src/pages/RequestDetails.vue
@@ -107,11 +107,12 @@ c-view.request-details(
             span {{ request.delegate_l2 ? 'Delegated' : 'Not delegated' }}
 
   c-tabs(
+    v-if="request",
     :current-tab.sync="currentTab",
     :tabs="tabs",
   )
     template(#marketplaces="")
-      request-marketplaces-tab(:request-id="requestId")
+      request-marketplaces-tab(:request="request")
 
     template(#tasks="")
       request-tasks-tab(