PROD-3109 PROD-3106 PROD-2708 PROD-2640 -> Fix issues in self service -> dev

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

@@ -17,9 +17,10 @@
         flex: 1 1 0;
         margin-right: $space-xl;
         border-radius: $space-xs;
-        padding: $space-lg 0;
+        padding: $space-xxl 0px 0px;
         background-color: $black-5;
         position: relative;
+        height: calc($space-xl * 30);
 
         .popular-card {
             display: flex;
@@ -61,19 +62,25 @@
             align-items: center;
 
             h3 {
-                margin: $space-lg;
+                margin: $space-xxl $space-lg;
                 font-weight: 500;
-                font-size: $space-mx;
+                font-size: calc($space-mx + $space-xs);
                 line-height: $space-mx;
-                margin-top: $space-xxl;
+            }
+
+            .body-medium-bold {
+                font-weight: 700;
+                font-size: $space-xxl;
+                font-family: "Roboto";
+                padding: 0;
+                line-height: calc($space-xxl - 2px);
             }
 
             &.feature {
                 visibility: hidden;
 
                 h3 {
-                    margin: $space-lg;
-                    margin-top: $space-xxl;
+                    margin: $space-xxl $space-lg;
                     font-size: $space-xxxxl;
                 }
             }
@@ -82,9 +89,15 @@
                 h3 {
                     font-size: $space-xxxxl;
                     line-height: $space-xxxxl;
-                    margin-top: $space-md;
+                    margin-top: $space-sm;
                     margin-bottom: $space-xxl;
                 }
+
+                .body-medium-bold {
+                    font-size: $space-xl;
+                    line-height: $space-xxxxl;
+                    font-style: normal;
+                }
             }
         }
 
@@ -97,24 +110,36 @@
         }
 
         .card-section {
-            margin: $space-lg 0;
+            margin: $space-mx 0;
 
             .row {
                 height: auto;
+
+                &:last-child {
+                    .row-divider {
+                        &:last-child {
+                            display: block;
+                        }
+                    }
+                }
             }
 
             .row-divider {
                 height: $border-xs;
                 border-bottom: $border solid $black-10;
                 width: auto;
                 margin: 0;
+
+                &:last-child {
+                    display: none;
+                }
             }
 
             .card-row {
                 display: flex;
                 padding: $space-md;
                 align-items: center;
-                min-height: calc($space-lg + $space-mx);
+                min-height: calc($space-lg + $space-mx - 2px);
                 position: relative;
 
                 .card-row-col {
@@ -156,6 +181,7 @@
                 }
             }
             &.mobile {
+              margin-bottom: 0;
               .feature-name {
                 width: 100%;
               }
@@ -164,13 +190,14 @@
               }
             }
             &.feature {
-                margin: calc($space-lg - 0.2px) 0;
+                margin-top: $space-mx;
             }
         }
 
         &.feature {
             background-color: $tc-white;
             margin-right: 0;
+            flex-grow: 0.9;
 
             .card-row-col:nth-child(2) {
                 display: none;
@@ -188,9 +215,14 @@
     }
 
     svg.card-row-icon {
-        height: 14px;
-        width: 14px;
+        height: 24px;
+        width: 24px;
         display: inline;
         margin-right: 6px;
+
+        @include ltemd {
+          height: 16px;
+          width: 16px;
+      }
     }
 }

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='body-medium-bold'>{card.title}</div>
+                                <div className={styles['body-medium-bold']}>{card.title}</div>
                                 <h3>{formattedPrice}</h3>
                                 {getButton(card, selected)}
                             </div>
@@ -77,12 +77,13 @@ const FormCardSet: React.FC<FormCardSetProps> = ({ name, cards, onChange, value
                                                 {(
                                                     <span className={cn(styles['card-row-col'], styles['center'])}>
                                                         { row.valueIcon ?
-                                                            <IconOutline.CheckIcon width={18} height={16} /> :
+                                                            <IconOutline.CheckIcon width={28} height={20} /> :
                                                             <span className='body-main'>{row.text}</span>
                                                         }
                                                     </span>
                                                 )}
                                             </div>
+                                            <div className={styles['row-divider']}></div>
                                         </div>
                                     ))}
                                 </div>

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

@@ -3,10 +3,9 @@ import _ from 'lodash'
 import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
 
-import { currencyFormat } from '../../../../../src/utils'
-import { ArrowIcon, FormCard, LoadingSpinner } from '../../../../lib'
+import { ArrowIcon, LoadingSpinner } from '../../../../lib'
+import getSelectedPackageFormatted from '../../../../utils/bug-hunt'
 import { ChallengeMetadataName, workFactoryMapFormData } from '../../work-lib'
-import BugHuntPricingConfig from '../../work-self-service/intake-forms/bug-hunt/bug-hunt.form.pricing-config'
 
 import styles from './WorkDetailDetailsPane.module.scss'
 
@@ -108,15 +107,4 @@ function checkIsEmpty(detail: Array<string> | {} | string): boolean {
             .filter((val) => val?.trim().length > 0).length === 0)
 }
 
-const getSelectedPackageFormatted: (packageId: string) => string = (packageId) => {
-  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} - ${currencyFormat(currentPackage.price)} - ${deviceType} - ${noOfTesters}`
-  }
-
-  return packageId
-}
-
 export default WorkDetailDetailsPane

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

@@ -1,5 +1,6 @@
 import moment from 'moment'
 
+import getSelectedPackageFormatted from '../../../../../../utils/bug-hunt'
 import { WorkConfigConstants, WorkStrings } from '../../../work-constants'
 import {
     ActivateWorkRequest,
@@ -302,7 +303,7 @@ function buildFormDataBugHunt(formData: any): ReadonlyArray<FormDetail> {
         {
             key: ChallengeMetadataName.packageType,
             title: ChallengeMetadataTitle.bugHuntPackage,
-            value: formData.packageType,
+            value: getSelectedPackageFormatted(formData.packageType),
         },
     ]
 }

src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type.config.ts

@@ -12,9 +12,7 @@ export const WorkTypeConfigs: { [workType: string]: WorkTypeConfig } = {
     [WorkType.bugHunt]: {
         about: `Expert QA testers will verify that all of the pages on your website are working correctly from the end-user perspective. The testing will stress functional issues, but also includes security issues, user interface issues, usability issues and more. Test on desktop, tablet, and mobile,  to uncover bugs before your customers encounter them.`,
         bgImage: bugHuntTileImg,
-        deliverablesDescription: `You will receive thorough testing of your website, and at the conclusion will be provided
-        a detailed report of bugs which have steps to reproduce, screenshots / videos if applicable,
-        details of the bug, and severity of the issue.`,
+        deliverablesDescription: 'You will receive thorough testing of your website by QA experts, and an actionable report extremely quickly. Our experts will deliver a detailed list of bugs found, with steps to reproduce, including screenshots, videos, and the information you need to fix them.',
         description: 'Execute thorough bug hunts exceptionally fast. Receive a detailed list of bugs and instructions on exactly how to fix them.',
         duration: {
             'advanced': 6,

src-ts/tools/work/work-self-service/intake-forms/bug-hunt/BugHuntIntakeForm.tsx

@@ -49,6 +49,8 @@ const BugHuntIntakeForm: React.FC = () => {
     const [loading, setLoading]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
     const [saveSuccess, setSaveSuccess]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
+    const defaultPackage: PricePackageName = 'standard'
+
     BugHuntFormConfig.buttons.primaryGroup[0].onClick = () => { setAction('save') }
     BugHuntFormConfig.buttons.primaryGroup[0].hidden = !isLoggedIn
     BugHuntFormConfig.buttons.primaryGroup[1].onClick = () => { setAction('submit') }
@@ -72,7 +74,7 @@ const BugHuntIntakeForm: React.FC = () => {
 
     const [formValues, setFormValues]: [any, Dispatch<any>] = useState({
         currentStep: 'basicInfo',
-        [ChallengeMetadataName.packageType]: 'standard',
+        [ChallengeMetadataName.packageType]: defaultPackage,
     })
 
     const [selectedPackage, setSelectedPackage]: [PricePackageName, Dispatch<SetStateAction<PricePackageName>>]
@@ -111,6 +113,11 @@ const BugHuntIntakeForm: React.FC = () => {
 
             if (formData?.packageType) {
                 setSelectedPackage(formData.packageType)
+            } else {
+                setFormValues({
+                    ...formValues,
+                    [ChallengeMetadataName.packageType]: defaultPackage,
+                })
             }
         }
 

src-ts/utils/bug-hunt/index.ts

@@ -0,0 +1,16 @@
+import { currencyFormat } from '../../../src/utils'
+import { FormCard } from '../../lib'
+import BugHuntPricingConfig from '../../tools/work/work-self-service/intake-forms/bug-hunt/bug-hunt.form.pricing-config'
+
+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} - ${currencyFormat(currentPackage.price)} - ${deviceType} - ${noOfTesters}`
+  }
+
+  return packageId
+}
+
+export default getSelectedPackageFormatted