fix: add data-qa attributes for better tracking in ServiceTiles, SuggestedCampaigns, Plans, and ModulesBottomNavigation components

Author: iacopolea

src/common/components/ServiceTiles/index.tsx

@@ -28,15 +28,15 @@ const ServiceTiles = ({ onClick, promoTemplates }: ServiceTilesProps) => {
         role="list"
         title="promo-templates"
       >
-        {promoTemplates.map((template) => {
+        {promoTemplates.map((template, i) => {
           if (!template.strapi) return null;
           const { title, price, tags, image, background, pre_title } =
             template.strapi;
           const outputs = tags.map((output) => {
             const { text, icon } = output;
             return (
               <AdditionalInfoTag
-                key={text}
+                key={text.toLowerCase().replace(/\s+/g, '_')}
                 color={appTheme.palette.grey[700]}
                 hue="#ffff"
                 isPill
@@ -53,7 +53,12 @@ const ServiceTiles = ({ onClick, promoTemplates }: ServiceTilesProps) => {
           };
 
           return (
-            <ScrollingGrid.Item key={template.id} role="listitem" title={title}>
+            <ScrollingGrid.Item
+              key={template.id}
+              role="listitem"
+              title={title}
+              data-qa={`service-tile-${i}`}
+            >
               <ServiceTile
                 title={title}
                 description={pre_title}

src/pages/Dashboard/SuggestedCampaigns.tsx

@@ -43,8 +43,11 @@ export const SuggestedCampaigns = () => {
       </Row>
       <ScrollingGrid id="suggested-campaigns-scrolling-grid">
         {!!items.plans.length &&
-          items.plans.map((plan) => (
-            <ScrollingGrid.Item key={`suggested_plan_${plan.id}`}>
+          items.plans.map((plan, i) => (
+            <ScrollingGrid.Item
+              key={`suggested_plan_${plan.id}`}
+              data-qa={`tracked-activity-${i}`}
+            >
               <PlanCard
                 status={getPlanStatus(plan, t).status}
                 i18n={{

src/pages/Dashboard/project-items/Plans.tsx

@@ -56,8 +56,15 @@ export const Plans = ({ projectId }: { projectId: number }) => {
       </Row>
       <Separator style={{ margin: `${appTheme.space.md} 0` }} />
       <Row>
-        {plans.map((plan) => (
-          <Col size={4} xs={12} md={6} lg={4}>
+        {plans.map((plan, i) => (
+          <Col
+            size={4}
+            xs={12}
+            md={6}
+            lg={4}
+            key={`project_plan_${plan.id}`}
+            data-qa={`setup-activity-${i}`}
+          >
             <PlanCard
               status={getPlanStatus(plan, t).status}
               i18n={{

src/pages/Plan/common/ModulesBottomNavigation.tsx

@@ -72,7 +72,7 @@ export const ModulesBottomNavigation = () => {
       <Button
         isBasic
         size="small"
-        data-qa={`modules-bottom-navigation-${nextTab}`}
+        data-qa={`modules-bottom-navigation-${nextTab.name}`}
         onClick={() => {
           setActiveTab(nextTab);
           if (main) {