Skip to content

Commit adf197f

Browse files
brooketopcoderbrooketopcoder
authored
Merge pull request #413 from topcoder-platform/PROD-2614_Self-service_payment
PROD-3109 PROD-3106 PROD-2708 PROD-2640 -> Fix issues in self service -> dev
2 parents 0a6692a + 38e064e commit adf197f

File tree

11 files changed

+234
-121
lines changed

11 files changed

+234
-121
lines changed

‎src-ts/.eslintrc.js‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -54,16 +54,6 @@ module.exports = {
5454
'@typescript-eslint/no-inferrable-types': 'off',
5555
'@typescript-eslint/no-shadow': 'error',
5656
'@typescript-eslint/no-unused-vars': 'error',
57-
'@typescript-eslint/strict-boolean-expressions': [
58-
'error',
59-
{
60-
allowAny: true,
61-
allowNullableBoolean: true,
62-
allowNullableObject: true,
63-
allowNullableNumber: true,
64-
allowNullableString: true
65-
}
66-
],
6757
'@typescript-eslint/typedef': [
6858
'error',
6959
{

‎src-ts/lib/form/Form.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ const Form: <ValueType extends FormValue, RequestType extends FormValue>(props:
9595
}, [])
9696

9797
function checkIfFormIsValid(formInputFields: Array<FormInputModel>): void {
98-
setFormInvalid(formInputFields.filter(item => !!item.error).length > 0)
98+
setFormInvalid(formInputFields.some(item => !!item.error))
9999
}
100100

101101
function onBlur(event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>): void {

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

Lines changed: 37 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,10 @@
1717
flex: 1 1 0;
1818
margin-right: $space-xl;
1919
border-radius: $space-xs;
20-
padding: $space-lg 0;
20+
padding: $space-xxl 0px 0px;
2121
background-color: $black-5;
2222
position: relative;
23+
height: calc($space-xl * 30);
2324

2425
.popular-card {
2526
display: flex;
@@ -61,19 +62,17 @@
6162
align-items: center;
6263

6364
h3 {
64-
margin: $space-lg;
65+
margin: $space-xxl $space-lg;
6566
font-weight: 500;
66-
font-size: $space-mx;
67+
font-size: calc($space-mx + $space-xs);
6768
line-height: $space-mx;
68-
margin-top: $space-xxl;
6969
}
7070

7171
&.feature {
7272
visibility: hidden;
7373

7474
h3 {
75-
margin: $space-lg;
76-
margin-top: $space-xxl;
75+
margin: $space-xxl $space-lg;
7776
font-size: $space-xxxxl;
7877
}
7978
}
@@ -82,7 +81,7 @@
8281
h3 {
8382
font-size: $space-xxxxl;
8483
line-height: $space-xxxxl;
85-
margin-top: $space-md;
84+
margin-top: $space-sm;
8685
margin-bottom: $space-xxl;
8786
}
8887
}
@@ -97,24 +96,36 @@
9796
}
9897

9998
.card-section {
100-
margin: $space-lg 0;
99+
margin: $space-mx 0;
101100

102101
.row {
103102
height: auto;
103+
104+
&:last-child {
105+
.row-divider {
106+
&:last-child {
107+
display: block;
108+
}
109+
}
110+
}
104111
}
105112

106113
.row-divider {
107114
height: $border-xs;
108115
border-bottom: $border solid $black-10;
109116
width: auto;
110117
margin: 0;
118+
119+
&:last-child {
120+
display: none;
121+
}
111122
}
112123

113124
.card-row {
114125
display: flex;
115126
padding: $space-md;
116127
align-items: center;
117-
min-height: calc($space-lg + $space-mx);
128+
min-height: calc($space-lg + $space-mx - 2px);
118129
position: relative;
119130

120131
.card-row-col {
@@ -148,14 +159,24 @@
148159
}
149160

150161
.info-icon {
162+
@include icon-lg;
151163
margin-left: $space-sm;
152164
color: $turq-160;
153165
cursor: pointer;
154166
outline: none;
155167
}
168+
169+
.check-icon {
170+
@include icon-xxl;
171+
@include ltemd {
172+
@include icon-lg;
173+
}
174+
}
156175
}
157176
}
158177
&.mobile {
178+
margin-bottom: 0;
179+
margin-top: $space-xxl;
159180
.feature-name {
160181
width: 100%;
161182
}
@@ -164,13 +185,14 @@
164185
}
165186
}
166187
&.feature {
167-
margin: calc($space-lg - 0.2px) 0;
188+
margin-top: $space-mx;
168189
}
169190
}
170191

171192
&.feature {
172193
background-color: $tc-white;
173194
margin-right: 0;
195+
flex-grow: 0.9;
174196

175197
.card-row-col:nth-child(2) {
176198
display: none;
@@ -188,9 +210,12 @@
188210
}
189211

190212
svg.card-row-icon {
191-
height: 14px;
192-
width: 14px;
213+
@include icon-xxl;
193214
display: inline;
194215
margin-right: 6px;
216+
217+
@include ltemd {
218+
@include icon-lg;
219+
}
195220
}
196221
}

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

Lines changed: 54 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -56,39 +56,82 @@ const FormCardSet: React.FC<FormCardSetProps> = (props: FormCardSetProps) => {
5656
const formattedPrice: string | undefined = textFormatMoneyLocaleString(card.price)
5757
const selected: boolean = props.value === card.id
5858
return (
59-
<div key={`card-${index}`} className={cn(styles.card, selected && styles.selected, isMobile && card.mostPopular && styles['mobile-popular'], { [styles.feature]: index === 0, [styles.mobile]: isMobile })}>
59+
<div
60+
key={`card-${card.id}`}
61+
className={cn(
62+
styles.card,
63+
selected && styles.selected,
64+
isMobile && card.mostPopular && styles['mobile-popular'],
65+
{
66+
[styles.feature]: index === 0,
67+
[styles.mobile]: isMobile,
68+
},
69+
)}
70+
>
6071
{card.mostPopular && <div className={styles['popular-card']}>MOST POPULAR</div>}
61-
<div className={cn(styles['card-header'], isMobile && styles.mobile, { [styles.feature]: index === 0 })}>
62-
<div className='body-medium-bold'>{card.title}</div>
72+
<div
73+
className={cn(
74+
styles['card-header'],
75+
isMobile && styles.mobile,
76+
{ [styles.feature]: index === 0 },
77+
)}
78+
>
79+
<div className='body-large-bold'>{card.title}</div>
6380
<h3>{formattedPrice}</h3>
6481
{getButton(card, selected)}
6582
</div>
66-
{card.sections.map((section, sectionIndex: number) => (
67-
<div key={`section-${sectionIndex}`} className={cn(styles['card-section'], { [styles.mobile]: isMobile, [styles.feature]: index === 0 })}>
68-
{section.rows.map((row, rowIndex: number) => (
83+
{card.sections.map(section => (
84+
<div
85+
key={`section-${section.rows?.[0]?.label}`}
86+
className={cn(
87+
styles['card-section'],
88+
{
89+
[styles.mobile]: isMobile,
90+
[styles.feature]: index === 0,
91+
},
92+
)}
93+
>
94+
{section.rows.map(row => (
6995
<div className={styles.row}>
7096
<div className={styles['row-divider']} />
71-
<div key={`row-${rowIndex}`} className={styles['card-row']}>
97+
<div
98+
key={`row-${row.label}`}
99+
className={styles['card-row']}
100+
>
72101
{((isMobile) || (index === 0)) && (
73-
<span className={cn(styles['card-row-col'], styles.mobile, styles['feature-name'])}>
102+
<span className={cn(
103+
styles['card-row-col'],
104+
styles.mobile,
105+
styles['feature-name'],
106+
)}
107+
>
74108
{row.icon && iconFromName(row.icon)}
75109
{row.label
76-
? <span className={cn('overline', styles.label)}>{row.label}</span>
110+
? (
111+
<span className={cn('overline', styles.label)}>
112+
{row.label}
113+
</span>
114+
)
77115
: <span className='body-main'>{row.text}</span>}
78116
{row.infoIcon && (
79117
<Tooltip
80118
content={row.tooltipText}
81-
trigger={<IconSolid.InformationCircleIcon className={styles['info-icon']} width={16} height={16} />}
119+
trigger={(
120+
<IconSolid.InformationCircleIcon
121+
className={styles['info-icon']}
122+
/>
123+
)}
82124
/>
83125
)}
84126
</span>
85127
)}
86128
<span className={cn(styles['card-row-col'], styles.center)}>
87129
{row.valueIcon
88-
? <IconOutline.CheckIcon width={18} height={16} />
130+
? <IconOutline.CheckIcon className={styles['check-icon']} />
89131
: <span className='body-main'>{row.text}</span>}
90132
</span>
91133
</div>
134+
<div className={styles['row-divider']} />
92135
</div>
93136
))}
94137
</div>

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

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1+
/* eslint-disable react/destructuring-assignment */
12
import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
23
import { Link } from 'react-router-dom'
34
import _ from 'lodash'
45
import cn from 'classnames'
56

6-
import { currencyFormat } from '../../../../../src/utils'
7-
import { ArrowIcon, FormCard, LoadingSpinner } from '../../../../lib'
8-
import { ChallengeMetadataName, workFactoryMapFormData } from '../../work-lib'
9-
import BugHuntPricingConfig from '../../work-self-service/intake-forms/bug-hunt/bug-hunt.form.pricing-config'
7+
import { ArrowIcon, LoadingSpinner } from '../../../../lib'
8+
import {
9+
ChallengeMetadataName,
10+
workFactoryMapFormData,
11+
workGetSelectedPackageFormatted,
12+
} from '../../work-lib'
1013

1114
import styles from './WorkDetailDetailsPane.module.scss'
1215

@@ -24,12 +27,21 @@ interface FormDetail {
2427
value: any
2528
}
2629

27-
const WorkDetailDetailsPane: FC<WorkDetailDetailsPaneProps> = ({ collapsible, defaultOpen = false, formData, isReviewPage = false, redirectUrl = '' }: WorkDetailDetailsPaneProps) => {
28-
const [details, setDetails]: [ReadonlyArray<FormDetail>, Dispatch<SetStateAction<ReadonlyArray<FormDetail>>>] = useState<ReadonlyArray<FormDetail>>([])
29-
const [isOpen, setOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(collapsible ? defaultOpen : true)
30+
const WorkDetailDetailsPane: FC<WorkDetailDetailsPaneProps> = ({
31+
collapsible,
32+
defaultOpen = false,
33+
formData,
34+
isReviewPage = false,
35+
redirectUrl = '',
36+
}: WorkDetailDetailsPaneProps) => {
37+
38+
const [details, setDetails]: [ReadonlyArray<FormDetail>, Dispatch<SetStateAction<ReadonlyArray<FormDetail>>>]
39+
= useState<ReadonlyArray<FormDetail>>([])
40+
const [isOpen, setOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
41+
= useState<boolean>(collapsible ? defaultOpen : true)
3042

3143
useEffect(() => {
32-
if (!!formData?.basicInfo) {
44+
if (!!formData.basicInfo) {
3345
setDetails(workFactoryMapFormData(formData?.workType?.selectedWorkType, formData.basicInfo))
3446
}
3547
}, [formData])
@@ -69,7 +81,7 @@ const WorkDetailDetailsPane: FC<WorkDetailDetailsPaneProps> = ({ collapsible, de
6981
<div key={detail.key} className={styles.detail}>
7082
<h4 className={styles.title}>{detail.title}</h4>
7183
{detail.key === ChallengeMetadataName.packageType ? (
72-
<p className={styles.content}>{getSelectedPackageFormatted(detail.value)}</p>
84+
<p className={styles.content}>{workGetSelectedPackageFormatted(detail.value)}</p>
7385
) : (
7486
<p className={styles.content}>{formatOption(detail.value)}</p>
7587
)}
@@ -88,7 +100,7 @@ function formatOption(detail: Array<string> | {} | string): string | Array<JSX.E
88100

89101
if (_.isArray(detail)) {
90102
return detail
91-
.map((val, index) => (<div key={`${index}`}>{val}</div>))
103+
.map(val => (<div key={`${val}`}>{val}</div>))
92104
}
93105

94106
if (_.isObject(detail)) {
@@ -115,15 +127,4 @@ function checkIsEmpty(detail: Array<string> | {} | string): boolean {
115127
.filter(val => val?.trim().length > 0).length === 0)
116128
}
117129

118-
const getSelectedPackageFormatted: (packageId: string) => string = packageId => {
119-
const currentPackage: FormCard | undefined = BugHuntPricingConfig.find(pricingConfig => pricingConfig.id === packageId)
120-
if (currentPackage) {
121-
const deviceType: string = currentPackage.sections?.[0]?.rows?.[3]?.text || ''
122-
const noOfTesters: string = `${currentPackage.sections?.[0]?.rows?.[2]?.text || 0} testers`
123-
return `${currentPackage.title} - ${currencyFormat(currentPackage.price)} - ${deviceType} - ${noOfTesters}`
124-
}
125-
126-
return packageId
127-
}
128-
129130
export default WorkDetailDetailsPane

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export {
3232
getByWorkIdAsync as workGetByWorkIdAsync,
3333
getGroupedByStatus as workGetGroupedByStatus,
3434
getPricesConfig as workGetPricesConfig,
35+
getSelectedPackageFormatted as workGetSelectedPackageFormatted,
3536
getStatusFilter as workGetStatusFilter,
3637
updateAsync as workUpdateAsync,
3738
} from './work.functions'

0 commit comments

Comments
 (0)