Add info to icons

GoogleChromeLabs · Jan 19, 2025 · 1ce53df · 1ce53df
1 parent fa40ac5
commit 1ce53df
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 19 deletions.
diff --git a/packages/explorable-explanations/src/protectedAudience/modules/auctions/setUpRunadAuction.js b/packages/explorable-explanations/src/protectedAudience/modules/auctions/setUpRunadAuction.js
@@ -19,14 +19,15 @@
 import app from '../../app';
 import config from '../../config';
 import { Box, ProgressLine } from '../../components';
+import { SINGLE_SELLER_CONFIG } from '../flowConfig';
 
 const setUpRunadAuction = (steps, afterRippleStep = null) => {
   const { box, colors } = config.flow;
 
   steps.push({
     component: Box,
     props: {
-      title: 'runAdAuction',
+      title: SINGLE_SELLER_CONFIG.RUN_AD_AUCTION.title,
       x: () => app.auction.nextTipCoordinates?.x + 10,
       y: () => app.auction.nextTipCoordinates?.y - box.height / 2,
     },
@@ -38,23 +39,26 @@ const setUpRunadAuction = (steps, afterRippleStep = null) => {
 
   const boxes = [
     {
-      title: 'Load Interest Group',
+      title: SINGLE_SELLER_CONFIG.LOAD_INTEREST_GROUP.title,
       extraProps: {
         showBarrageAnimation: true,
       },
+      info: SINGLE_SELLER_CONFIG.LOAD_INTEREST_GROUP.info,
     },
     {
-      title: 'Key/Value Trusted',
-      description: 'DSP Server',
+      title: SINGLE_SELLER_CONFIG.KEY_VALUE_DSP_SERVER.title,
+      description: SINGLE_SELLER_CONFIG.KEY_VALUE_DSP_SERVER.description,
       color: colors.box.notBrowser,
+      info: SINGLE_SELLER_CONFIG.KEY_VALUE_DSP_SERVER.info,
     },
     {
-      title: 'generateBid()',
-      description: '(from DSPs on dsp.js)',
+      title: SINGLE_SELLER_CONFIG.GENERATE_BID.title,
+      description: SINGLE_SELLER_CONFIG.GENERATE_BID.description,
       color: colors.box.notBrowser,
       extraProps: {
         showRippleEffect: true,
       },
+      info: SINGLE_SELLER_CONFIG.GENERATE_BID.info,
     },
     {
       title: 'DSP 1',
@@ -63,25 +67,29 @@ const setUpRunadAuction = (steps, afterRippleStep = null) => {
       title: 'DSP 2',
     },
     {
-      title: 'Key/Value Trusted',
-      description: 'SSP Server',
+      title: SINGLE_SELLER_CONFIG.KEY_VALUE_SSP_SERVER.title,
+      description: SINGLE_SELLER_CONFIG.KEY_VALUE_SSP_SERVER.description,
+      info: SINGLE_SELLER_CONFIG.KEY_VALUE_SSP_SERVER.info,
     },
     {
-      title: 'scoreAd()',
-      description: '(by SSPs on ssp.js)',
+      title: SINGLE_SELLER_CONFIG.SCORE_AD.title,
+      description: SINGLE_SELLER_CONFIG.SCORE_AD.description,
+      info: SINGLE_SELLER_CONFIG.SCORE_AD.info,
     },
     {
-      title: 'reportWin()',
-      description: '(on dsp.js)',
+      title: SINGLE_SELLER_CONFIG.REPORT_WIN.title,
+      description: SINGLE_SELLER_CONFIG.REPORT_WIN.description,
       color: colors.box.notBrowser,
+      info: SINGLE_SELLER_CONFIG.REPORT_WIN.info,
     },
     {
-      title: 'reportResult()',
-      description: '(on ssp.js)',
+      title: SINGLE_SELLER_CONFIG.REPORT_RESULT.title,
+      description: SINGLE_SELLER_CONFIG.REPORT_RESULT.description,
+      info: SINGLE_SELLER_CONFIG.REPORT_RESULT.info,
     },
   ];
 
-  boxes.forEach(({ title, description, color, extraProps = {} }) => {
+  boxes.forEach(({ title, description, color, info, extraProps = {} }) => {
     if (title === 'DSP 1') {
       if (afterRippleStep) {
         steps.push(afterRippleStep());
@@ -108,6 +116,7 @@ const setUpRunadAuction = (steps, afterRippleStep = null) => {
           x: () => app.auction.nextTipCoordinates?.x + 10,
           y: () => app.auction.nextTipCoordinates?.y - box.height + 15,
           color,
+          info,
         },
         delay: 1000,
         callBack: (returnValue) => {
@@ -154,6 +163,7 @@ const setUpRunadAuction = (steps, afterRippleStep = null) => {
           x: () => app.auction.nextTipCoordinates?.x + 10,
           y: () => app.auction.nextTipCoordinates?.y,
           color,
+          info,
         },
         delay: 1000,
         callBack: (returnValue) => {
@@ -204,6 +214,7 @@ const setUpRunadAuction = (steps, afterRippleStep = null) => {
         x: () => app.auction.nextTipCoordinates?.x - box.width / 2,
         y: () => app.auction.nextTipCoordinates?.y + 10,
         color,
+        info,
       },
       delay: 1000,
       callBack: (returnValue) => {

diff --git a/packages/explorable-explanations/src/protectedAudience/modules/flowConfig.js b/packages/explorable-explanations/src/protectedAudience/modules/flowConfig.js
@@ -60,6 +60,9 @@ export const SINGLE_SELLER_CONFIG = {
     <p>The DSP server evaluates bid requests in real time, using signals such as interest groups, contextual relevance, and advertiser budgets to decide whether to bid.</p>
   `,
   },
+  RUN_AD_AUCTION: {
+    title: 'runAdAuction',
+  },
   LOAD_INTEREST_GROUP: {
     title: 'Load Interest Group',
     info: `
@@ -68,8 +71,8 @@ export const SINGLE_SELLER_CONFIG = {
   `,
   },
   KEY_VALUE_DSP_SERVER: {
-    title: 'Key/Value Trusted',
-    description: 'DSP Server',
+    title: 'Key/Value',
+    description: 'Trusted DSP Server',
     info: `
     <p>A secure DSP-side server that handles bid generation using key/value pairs for interest group and contextual data.</p>
     <p>It ensures data processing aligns with privacy requirements, creating competitive bids based on predefined values.</p>
@@ -84,8 +87,8 @@ export const SINGLE_SELLER_CONFIG = {
   `,
   },
   KEY_VALUE_SSP_SERVER: {
-    title: 'Key/Value Trusted',
-    description: 'SSP Server',
+    title: 'Key/Value',
+    description: 'Trusted SSP Server',
     info: `
     <p>A secure SSP-side server responsible for ad scoring and auction facilitation.</p>
     <p>It uses key/value pairs to evaluate bids and ensures data privacy and compliance during ad auctions.</p>