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

src-ts/.eslintrc.js

@@ -54,16 +54,6 @@ module.exports = {
         '@typescript-eslint/no-inferrable-types': 'off',
         '@typescript-eslint/no-shadow': 'error',
         '@typescript-eslint/no-unused-vars': 'error',
-        '@typescript-eslint/strict-boolean-expressions': [
-            'error',
-            {
-                allowAny: true,
-                allowNullableBoolean: true,
-                allowNullableObject: true,
-                allowNullableNumber: true,
-                allowNullableString: true
-            }
-        ],
         '@typescript-eslint/typedef': [
             'error',
             {

src-ts/lib/form/Form.tsx

@@ -95,7 +95,7 @@ const Form: <ValueType extends FormValue, RequestType extends FormValue>(props:
         }, [])
 
         function checkIfFormIsValid(formInputFields: Array<FormInputModel>): void {
-            setFormInvalid(formInputFields.filter(item => !!item.error).length > 0)
+            setFormInvalid(formInputFields.some(item => !!item.error))
         }
 
         function onBlur(event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>): void {

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,17 @@
             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;
             }
 
             &.feature {
                 visibility: hidden;
 
                 h3 {
-                    margin: $space-lg;
-                    margin-top: $space-xxl;
+                    margin: $space-xxl $space-lg;
                     font-size: $space-xxxxl;
                 }
             }
@@ -82,7 +81,7 @@
                 h3 {
                     font-size: $space-xxxxl;
                     line-height: $space-xxxxl;
-                    margin-top: $space-md;
+                    margin-top: $space-sm;
                     margin-bottom: $space-xxl;
                 }
             }
@@ -97,24 +96,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 {
@@ -148,14 +159,24 @@
                     }
 
                     .info-icon {
+                        @include icon-lg;
                         margin-left: $space-sm;
                         color: $turq-160;
                         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%;
               }
@@ -164,13 +185,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 +210,12 @@
     }
 
     svg.card-row-icon {
-        height: 14px;
-        width: 14px;
+        @include icon-xxl;
         display: inline;
         margin-right: 6px;
+
+        @include ltemd {
+          @include icon-lg;
+      }
     }
 }

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

@@ -56,39 +56,82 @@ const FormCardSet: React.FC<FormCardSetProps> = (props: FormCardSetProps) => {
                     const formattedPrice: string | undefined = textFormatMoneyLocaleString(card.price)
                     const selected: boolean = props.value === card.id
                     return (
-                        <div key={`card-${index}`} className={cn(styles.card, selected && styles.selected, isMobile && card.mostPopular && styles['mobile-popular'], { [styles.feature]: index === 0, [styles.mobile]: isMobile })}>
+                        <div
+                            key={`card-${card.id}`}
+                            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={cn(
+                                    styles['card-header'],
+                                    isMobile && styles.mobile,
+                                    { [styles.feature]: index === 0 },
+                                )}
+                            >
+                                <div className='body-large-bold'>{card.title}</div>
                                 <h3>{formattedPrice}</h3>
                                 {getButton(card, selected)}
                             </div>
-                            {card.sections.map((section, sectionIndex: number) => (
-                                <div key={`section-${sectionIndex}`} className={cn(styles['card-section'], { [styles.mobile]: isMobile, [styles.feature]: index === 0 })}>
-                                    {section.rows.map((row, rowIndex: number) => (
+                            {card.sections.map(section => (
+                                <div
+                                    key={`section-${section.rows?.[0]?.label}`}
+                                    className={cn(
+                                        styles['card-section'],
+                                        {
+                                            [styles.mobile]: isMobile,
+                                            [styles.feature]: index === 0,
+                                        },
+                                    )}
+                                >
+                                    {section.rows.map(row => (
                                         <div className={styles.row}>
                                             <div className={styles['row-divider']} />
-                                            <div key={`row-${rowIndex}`} className={styles['card-row']}>
+                                            <div
+                                                key={`row-${row.label}`}
+                                                className={styles['card-row']}
+                                            >
                                                 {((isMobile) || (index === 0)) && (
-                                                    <span className={cn(styles['card-row-col'], styles.mobile, styles['feature-name'])}>
+                                                    <span className={cn(
+                                                        styles['card-row-col'],
+                                                        styles.mobile,
+                                                        styles['feature-name'],
+                                                    )}
+                                                    >
                                                         {row.icon && iconFromName(row.icon)}
                                                         {row.label
-                                                            ? <span className={cn('overline', styles.label)}>{row.label}</span>
+                                                            ? (
+                                                                <span className={cn('overline', styles.label)}>
+                                                                    {row.label}
+                                                                </span>
+                                                            )
                                                             : <span className='body-main'>{row.text}</span>}
                                                         {row.infoIcon && (
                                                             <Tooltip
                                                                 content={row.tooltipText}
-                                                                trigger={<IconSolid.InformationCircleIcon className={styles['info-icon']} width={16} height={16} />}
+                                                                trigger={(
+                                                                    <IconSolid.InformationCircleIcon
+                                                                        className={styles['info-icon']}
+                                                                    />
+                                                                )}
                                                             />
                                                         )}
                                                     </span>
                                                 )}
                                                 <span className={cn(styles['card-row-col'], styles.center)}>
                                                     {row.valueIcon
-                                                        ? <IconOutline.CheckIcon width={18} height={16} />
+                                                        ? <IconOutline.CheckIcon className={styles['check-icon']} />
                                                         : <span className='body-main'>{row.text}</span>}
                                                 </span>
                                             </div>
+                                            <div className={styles['row-divider']} />
                                         </div>
                                     ))}
                                 </div>

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

@@ -1,12 +1,15 @@
+/* eslint-disable react/destructuring-assignment */
 import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
 import _ from 'lodash'
 import cn from 'classnames'
 
-import { currencyFormat } from '../../../../../src/utils'
-import { ArrowIcon, FormCard, LoadingSpinner } from '../../../../lib'
-import { ChallengeMetadataName, workFactoryMapFormData } from '../../work-lib'
-import BugHuntPricingConfig from '../../work-self-service/intake-forms/bug-hunt/bug-hunt.form.pricing-config'
+import { ArrowIcon, LoadingSpinner } from '../../../../lib'
+import {
+    ChallengeMetadataName,
+    workFactoryMapFormData,
+    workGetSelectedPackageFormatted,
+} from '../../work-lib'
 
 import styles from './WorkDetailDetailsPane.module.scss'
 
@@ -24,12 +27,21 @@ interface FormDetail {
     value: any
 }
 
-const WorkDetailDetailsPane: FC<WorkDetailDetailsPaneProps> = ({ collapsible, defaultOpen = false, formData, isReviewPage = false, redirectUrl = '' }: WorkDetailDetailsPaneProps) => {
-    const [details, setDetails]: [ReadonlyArray<FormDetail>, Dispatch<SetStateAction<ReadonlyArray<FormDetail>>>] = useState<ReadonlyArray<FormDetail>>([])
-    const [isOpen, setOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(collapsible ? defaultOpen : true)
+const WorkDetailDetailsPane: FC<WorkDetailDetailsPaneProps> = ({
+    collapsible,
+    defaultOpen = false,
+    formData,
+    isReviewPage = false,
+    redirectUrl = '',
+}: WorkDetailDetailsPaneProps) => {
+
+    const [details, setDetails]: [ReadonlyArray<FormDetail>, Dispatch<SetStateAction<ReadonlyArray<FormDetail>>>]
+        = useState<ReadonlyArray<FormDetail>>([])
+    const [isOpen, setOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(collapsible ? defaultOpen : true)
 
     useEffect(() => {
-        if (!!formData?.basicInfo) {
+        if (!!formData.basicInfo) {
             setDetails(workFactoryMapFormData(formData?.workType?.selectedWorkType, formData.basicInfo))
         }
     }, [formData])
@@ -69,7 +81,7 @@ const WorkDetailDetailsPane: FC<WorkDetailDetailsPaneProps> = ({ collapsible, de
                 <div key={detail.key} className={styles.detail}>
                     <h4 className={styles.title}>{detail.title}</h4>
                     {detail.key === ChallengeMetadataName.packageType ? (
-                        <p className={styles.content}>{getSelectedPackageFormatted(detail.value)}</p>
+                        <p className={styles.content}>{workGetSelectedPackageFormatted(detail.value)}</p>
                     ) : (
                         <p className={styles.content}>{formatOption(detail.value)}</p>
                     )}
@@ -88,7 +100,7 @@ function formatOption(detail: Array<string> | {} | string): string | Array<JSX.E
 
     if (_.isArray(detail)) {
         return detail
-            .map((val, index) => (<div key={`${index}`}>{val}</div>))
+            .map(val => (<div key={`${val}`}>{val}</div>))
     }
 
     if (_.isObject(detail)) {
@@ -115,15 +127,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/index.ts

@@ -32,6 +32,7 @@ export {
     getByWorkIdAsync as workGetByWorkIdAsync,
     getGroupedByStatus as workGetGroupedByStatus,
     getPricesConfig as workGetPricesConfig,
+    getSelectedPackageFormatted as workGetSelectedPackageFormatted,
     getStatusFilter as workGetStatusFilter,
     updateAsync as workUpdateAsync,
 } from './work.functions'