PROD-2643 #comment Wrong icon shown for bug hunt self-service

Author: asadath1395

src-ts/lib/icon-wrapper/IconWrapper.module.scss

@@ -0,0 +1,18 @@
+@import '../styles/includes';
+
+.iconWrapper {
+  height: 48px;
+  width: 48px;
+  margin: 0 $space-lg $space-lg $space-lg;
+  background: $tc-grad12;
+  border-radius: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    @include icon-xl;
+    color: $tc-white;
+  }
+}
+

src-ts/lib/icon-wrapper/index.tsx

@@ -0,0 +1,17 @@
+import { FC } from 'react'
+import classNames from 'classnames'
+
+import styles from './IconWrapper.module.scss'
+
+interface IconWrapperProps {
+  className?: string
+  icon: JSX.Element
+}
+
+const IconWrapper: FC<IconWrapperProps> = ({ className, icon }: IconWrapperProps) => (
+  <div className={classNames(styles.iconWrapper, className)}>
+    <>{icon}</>
+  </div>
+)
+
+export default IconWrapper

src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/work.factory.ts

@@ -694,7 +694,10 @@ function getTypeCategory(type: WorkType): WorkTypeCategory {
         case WorkType.designLegacy:
             return WorkTypeCategory.design
 
-        // TOOD: other categories: qa and dev
+        case WorkType.bugHunt:
+          return WorkTypeCategory.qa
+
+        // TOOD: other categories: dev
         default:
             return WorkTypeCategory.unknown
     }

src-ts/tools/work/work-service-price/WorkServicePrice.module.scss

@@ -4,20 +4,6 @@
 
   margin-top: $space-xl;
 
-  .iconWrapper {
-      height: 48;
-      width: 48;
-      margin: 0 $space-lg $space-lg $space-lg;
-      background: $tc-grad12;
-      border-radius: 24px;
-      
-      svg {
-        @include icon-xl;
-        margin: $space-md;
-        color: $tc-white;
-      }
-    }
-
   .inline {
     display: flex;
     flex-direction: row;

src-ts/tools/work/work-service-price/WorkServicePrice.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react'
 
 import { IconOutline, textFormatMoneyLocaleString, Tooltip } from '../../../lib'
+import IconWrapper from '../../../lib/icon-wrapper'
 
 import styles from './WorkServicePrice.module.scss'
 
@@ -20,11 +21,9 @@ const ServicePrice: FC<WorkServicePriceProps> = (props: WorkServicePriceProps) =
   return (
     <div className={styles.container}>
       <div className={styles.inline}>
-        <div className={styles.iconWrapper}>
-          {!!showIcon && !!icon && (
-            <>{icon}</>
-          )}
-        </div>
+        {!!showIcon && !!icon && (
+          <IconWrapper icon={icon} />
+        )}
         <div>
           {!hideTitle && (
             <p><h3 className={styles.serviceTitle}>

src-ts/tools/work/work-table/work-table-title-renderer/WorkTableTitleRenderer.module.scss

@@ -27,4 +27,13 @@
         margin-top: 6px;
         @include text-clamp(3);
     }
+
+    .qa-icon {
+      margin: 0px 12px 0px 0px;
+
+      svg {
+        min-width: unset;
+        margin: 0px;
+      }
+    }
 }

src-ts/tools/work/work-table/work-table-title-renderer/WorkTableTitleRenderer.tsx

@@ -1,37 +1,46 @@
-import { FC, SVGProps } from 'react'
-
+import { IconOutline } from '../../../../lib'
+import IconWrapper from '../../../../lib/icon-wrapper'
 import {
-    Work,
-    WorkTypeCategory,
-    WorkTypeCategoryDataIcon,
-    WorkTypeCategoryDesignIcon,
-    WorkTypeCategoryUnknownIcon,
+  Work,
+  WorkTypeCategory,
+  WorkTypeCategoryDataIcon,
+  WorkTypeCategoryDesignIcon,
+  WorkTypeCategoryUnknownIcon,
 } from '../../work-lib'
 
 import styles from './WorkTableTitleRenderer.module.scss'
 
 function WorkTableTitleRenderer(data: Work): JSX.Element {
 
-    let Icon: FC<SVGProps<SVGSVGElement>>
+    let Icon: JSX.Element
     switch (data.typeCategory) {
 
         case WorkTypeCategory.data:
-            Icon = WorkTypeCategoryDataIcon
+            Icon = <WorkTypeCategoryDataIcon />
             break
 
         case WorkTypeCategory.design:
-            Icon = WorkTypeCategoryDesignIcon
+            Icon = <WorkTypeCategoryDesignIcon />
             break
 
-        // TODO: qa and dev work categories
+        case WorkTypeCategory.qa:
+          Icon = (
+            <IconWrapper
+              className={styles['qa-icon']}
+              icon={<IconOutline.BadgeCheckIcon width={48} height={48} />}
+            />
+          )
+          break
+
+        // TODO: dev work categories
         default:
-            Icon = WorkTypeCategoryUnknownIcon
+            Icon = <WorkTypeCategoryUnknownIcon />
             break
     }
 
     return (
         <div className={styles['work-table-title-container']}>
-            <Icon />
+            {Icon}
             <div className={styles['work-table-title']}>
                 <div className={styles.title}>
                     {data.title}