Fix as per review comments

Author: asadath1395

src-ts/lib/form/form-groups/form-card-set/FormCardSet.module.scss

@@ -68,14 +68,6 @@
                 line-height: $space-mx;
             }
 
-            .body-medium-bold {
-                font-weight: 700;
-                font-size: $space-xxl;
-                font-family: "Roboto";
-                padding: 0;
-                line-height: calc($space-xxl - 2px);
-            }
-
             &.feature {
                 visibility: hidden;
 
@@ -92,12 +84,6 @@
                     margin-top: $space-sm;
                     margin-bottom: $space-xxl;
                 }
-
-                .body-medium-bold {
-                    font-size: $space-xl;
-                    line-height: $space-xxxxl;
-                    font-style: normal;
-                }
             }
         }
 
@@ -178,10 +164,18 @@
                         cursor: pointer;
                         outline: none;
                     }
+
+                    .check-icon {
+                        @include icon-xxl;
+                        @include ltemd {
+                            @include icon-lg;
+                        }
+                    }
                 }
             }
             &.mobile {
               margin-bottom: 0;
+              margin-top: $space-xxl;
               .feature-name {
                 width: 100%;
               }
@@ -215,14 +209,12 @@
     }
 
     svg.card-row-icon {
-        height: 24px;
-        width: 24px;
+        @include icon-xxl;
         display: inline;
         margin-right: 6px;
 
         @include ltemd {
-          height: 16px;
-          width: 16px;
+          @include icon-lg;
       }
     }
 }

src-ts/lib/form/form-groups/form-card-set/FormCardSet.tsx

@@ -49,7 +49,7 @@ const FormCardSet: React.FC<FormCardSetProps> = ({ name, cards, onChange, value
                         <div key={`card-${index}`}className={cn(styles['card'], selected && styles['selected'],  isMobile && card.mostPopular && styles['mobile-popular'], { [styles.feature]: index === 0, [styles.mobile]: isMobile })}>
                             { card.mostPopular && <div className={styles['popular-card']}>MOST POPULAR</div>}
                             <div className={cn(styles['card-header'], isMobile && styles['mobile'], { [styles.feature]: index === 0 })}>
-                                <div className={styles['body-medium-bold']}>{card.title}</div>
+                                <div className='body-large-bold'>{card.title}</div>
                                 <h3>{formattedPrice}</h3>
                                 {getButton(card, selected)}
                             </div>
@@ -77,7 +77,7 @@ const FormCardSet: React.FC<FormCardSetProps> = ({ name, cards, onChange, value
                                                 {(
                                                     <span className={cn(styles['card-row-col'], styles['center'])}>
                                                         { row.valueIcon ?
-                                                            <IconOutline.CheckIcon width={28} height={20} /> :
+                                                            <IconOutline.CheckIcon className={styles['check-icon']} /> :
                                                             <span className='body-main'>{row.text}</span>
                                                         }
                                                     </span>

src-ts/tools/work/work-detail-details/work-detail-details-pane/WorkDetailDetailsPane.tsx

@@ -4,8 +4,8 @@ import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
 
 import { ArrowIcon, LoadingSpinner } from '../../../../lib'
-import getSelectedPackageFormatted from '../../../../utils/bug-hunt'
 import { ChallengeMetadataName, workFactoryMapFormData } from '../../work-lib'
+import { getSelectedPackageFormatted } from '../../work-lib/work-provider/work-functions/work.functions'
 
 import styles from './WorkDetailDetailsPane.module.scss'
 

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

@@ -1,6 +1,5 @@
 import moment from 'moment'
 
-import getSelectedPackageFormatted from '../../../../../../utils/bug-hunt'
 import { WorkConfigConstants, WorkStrings } from '../../../work-constants'
 import {
     ActivateWorkRequest,
@@ -26,6 +25,7 @@ import {
     WorkTypeCategory,
     WorkTypeConfig,
 } from '../work-store'
+import { getSelectedPackageFormatted } from '../work.functions'
 
 export interface FormDetail {
     key: string,

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

@@ -1,6 +1,7 @@
 import { PaymentMethodResult, Stripe, StripeCardNumberElement } from '@stripe/stripe-js'
 
-import { Page, UserProfile } from '../../../../../lib'
+import { FormCard, Page, textFormatMoneyLocaleString, UserProfile } from '../../../../../lib'
+import BugHuntPricingConfig from '../../../work-self-service/intake-forms/bug-hunt/bug-hunt.form.pricing-config'
 
 import { WorkByStatus } from './work-by-status.model'
 import {
@@ -171,3 +172,14 @@ async function getPageAsync(handle: string, page: Page): Promise<Array<Work>> {
         .map(challenge => workFactoryCreate(challenge, workGetPricesConfig()))
         .filter(work => work.status !== WorkStatus.deleted && work.type !== WorkType.unknown)
 }
+
+export function getSelectedPackageFormatted(packageId: string): string {
+    const currentPackage: FormCard | undefined = BugHuntPricingConfig.find((pricingConfig) => pricingConfig.id === packageId)
+    if (currentPackage) {
+        const deviceType: string = currentPackage.sections?.[0]?.rows?.[3]?.text || ''
+        const noOfTesters: string = `${currentPackage.sections?.[0]?.rows?.[2]?.text || 0} testers`
+        return `${currentPackage.title} - ${textFormatMoneyLocaleString(currentPackage.price)} - ${deviceType} - ${noOfTesters}`
+    }
+
+    return packageId
+}