Skip to content

Commit 0db8a56

Browse files
frozenheliumfrozenhelium
authored
Merge pull request #880 from mapswipe/feature/custom-option-banner
Custom Option Banner
2 parents 4d082e1 + 5d311cb commit 0db8a56

File tree

10 files changed

+132
-13
lines changed

10 files changed

+132
-13
lines changed

‎manager-dashboard/app/Base/styles.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,8 @@ p {
7171
--color-accent: #4746f6;
7272
--color-danger: #e04656;
7373
--color-success: #53b391;
74+
--color-banner-alert: #fdf4dc;
75+
--color-banner-text: #5C4813;
7476
--color-separator: rgba(0, 0, 0, 0.1);
7577
--color-shadow: rgba(0, 0, 0, 0.2);
7678

‎manager-dashboard/app/components/AlertBanner/index.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import { IoAlertCircleOutline } from 'react-icons/io5';
3+
import { _cs } from '@togglecorp/fujs';
4+
5+
import styles from './styles.css';
6+
7+
interface Props {
8+
className?: string;
9+
children: React.ReactNode;
10+
}
11+
12+
function AlertBanner(props: Props) {
13+
const {
14+
className,
15+
children,
16+
} = props;
17+
18+
return (
19+
<div className={_cs(styles.banner, className)}>
20+
<div className={styles.bannerIcon}>
21+
<IoAlertCircleOutline />
22+
</div>
23+
{children}
24+
</div>
25+
);
26+
}
27+
28+
export default AlertBanner;

‎manager-dashboard/app/components/AlertBanner/styles.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.banner {
2+
display: flex;
3+
gap: var(--spacing-large);
4+
border-radius: var(--radius-card-border);
5+
background-color: var(--color-banner-alert);
6+
padding: var(--spacing-large);
7+
8+
.banner-icon {
9+
font-size: var(--font-size-super-large);
10+
}
11+
}

‎manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default function CustomOptionPreview(props: Props) {
2222

2323
return (
2424
<MobilePreview
25-
className={styles.optionPreview}
25+
className={styles.customOptionPreview}
2626
contentClassName={styles.content}
2727
heading={lookFor || '{look for}'}
2828
headingLabel="You are looking for:"

‎manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
.option-preview {
1+
.custom-option-preview {
2+
position: sticky;
3+
top: 0;
4+
25
.content {
36
display: flex;
47
flex-direction: column;

‎manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
.information-preview {
2+
position: sticky;
3+
top: 0;
24
overflow: auto;
35

46
.content {

‎manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx‎

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,30 @@ export default function ScenarioPageInput(props: Props) {
126126
{},
127127
);
128128

129+
const handleInstructionFieldChange = React.useCallback<typeof onInstructionFieldChange>(
130+
(...args) => {
131+
setActiveInput('instructions');
132+
onInstructionFieldChange(...args);
133+
},
134+
[onInstructionFieldChange],
135+
);
136+
137+
const handleHintFieldChange = React.useCallback<typeof onHintFieldChange>(
138+
(...args) => {
139+
setActiveInput('hint');
140+
onHintFieldChange(...args);
141+
},
142+
[onHintFieldChange],
143+
);
144+
145+
const handleSuccessFieldChange = React.useCallback<typeof onSuccessFieldChange>(
146+
(...args) => {
147+
setActiveInput('success');
148+
onSuccessFieldChange(...args);
149+
},
150+
[onSuccessFieldChange],
151+
);
152+
129153
const error = getErrorObject(riskyError);
130154
const instructionsError = getErrorObject(error?.instructions);
131155
const hintError = getErrorObject(error?.hint);
@@ -160,15 +184,15 @@ export default function ScenarioPageInput(props: Props) {
160184
name={'title' as const}
161185
value={value.instructions?.title}
162186
label="Title"
163-
onChange={onInstructionFieldChange}
187+
onChange={handleInstructionFieldChange}
164188
error={instructionsError?.title}
165189
disabled={disabled}
166190
/>
167191
<TextInput
168192
name={'description' as const}
169193
value={value.instructions?.description}
170194
label="Description"
171-
onChange={onInstructionFieldChange}
195+
onChange={handleInstructionFieldChange}
172196
error={instructionsError?.description}
173197
disabled={disabled}
174198
/>
@@ -180,7 +204,7 @@ export default function ScenarioPageInput(props: Props) {
180204
options={iconList}
181205
keySelector={keySelector}
182206
labelSelector={labelSelector}
183-
onChange={onInstructionFieldChange}
207+
onChange={handleInstructionFieldChange}
184208
error={instructionsError?.icon}
185209
disabled={disabled}
186210
/>
@@ -194,15 +218,15 @@ export default function ScenarioPageInput(props: Props) {
194218
name={'title' as const}
195219
value={value.hint?.title}
196220
label="Title"
197-
onChange={onHintFieldChange}
221+
onChange={handleHintFieldChange}
198222
error={hintError?.title}
199223
disabled={disabled}
200224
/>
201225
<TextInput
202226
name={'description' as const}
203227
value={value.hint?.description}
204228
label="Description"
205-
onChange={onHintFieldChange}
229+
onChange={handleHintFieldChange}
206230
error={hintError?.description}
207231
disabled={disabled}
208232
/>
@@ -214,7 +238,7 @@ export default function ScenarioPageInput(props: Props) {
214238
options={iconList}
215239
keySelector={keySelector}
216240
labelSelector={labelSelector}
217-
onChange={onHintFieldChange}
241+
onChange={handleHintFieldChange}
218242
error={hintError?.icon}
219243
disabled={disabled}
220244
/>
@@ -228,15 +252,15 @@ export default function ScenarioPageInput(props: Props) {
228252
name={'title' as const}
229253
value={value.success?.title}
230254
label="Title"
231-
onChange={onSuccessFieldChange}
255+
onChange={handleSuccessFieldChange}
232256
error={successError?.title}
233257
disabled={disabled}
234258
/>
235259
<TextInput
236260
name={'description' as const}
237261
value={value.success?.description}
238262
label="Description"
239-
onChange={onSuccessFieldChange}
263+
onChange={handleSuccessFieldChange}
240264
error={successError?.description}
241265
disabled={disabled}
242266
/>
@@ -248,7 +272,7 @@ export default function ScenarioPageInput(props: Props) {
248272
options={iconList}
249273
keySelector={keySelector}
250274
labelSelector={labelSelector}
251-
onChange={onSuccessFieldChange}
275+
onChange={handleSuccessFieldChange}
252276
error={successError?.icon}
253277
disabled={disabled}
254278
/>

‎manager-dashboard/app/views/NewTutorial/index.tsx‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ import InputSection from '#components/InputSection';
5555
import Button from '#components/Button';
5656
import NonFieldError from '#components/NonFieldError';
5757
import EmptyMessage from '#components/EmptyMessage';
58+
import AlertBanner from '#components/AlertBanner';
5859
import {
5960
valueSelector,
6061
labelSelector,
@@ -506,6 +507,29 @@ function NewTutorial(props: Props) {
506507
</Button>
507508
)}
508509
>
510+
<AlertBanner>
511+
<div className={styles.bannerContent}>
512+
<div className={styles.bannerText}>
513+
While creating options,
514+
please use the values as listed
515+
below for HOT Tasking Manager Geometries
516+
</div>
517+
<div className={styles.indicatorList}>
518+
<div className={styles.indicator}>
519+
0 = No
520+
</div>
521+
<div className={styles.indicator}>
522+
1 = Yes
523+
</div>
524+
<div className={styles.indicator}>
525+
2 = Maybe
526+
</div>
527+
<div className={styles.indicator}>
528+
3 = Bad Imagery
529+
</div>
530+
</div>
531+
</div>
532+
</AlertBanner>
509533
<NonFieldError
510534
error={optionsError}
511535
/>
@@ -523,7 +547,10 @@ function NewTutorial(props: Props) {
523547
onClick={onOptionRemove}
524548
variant="action"
525549
title="Delete Option"
526-
disabled={submissionPending || projectTypeEmpty}
550+
disabled={
551+
submissionPending
552+
|| projectTypeEmpty
553+
}
527554
>
528555
<IoIosTrash />
529556
</Button>

‎manager-dashboard/app/views/NewTutorial/styles.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,29 @@
2020
gap: var(--spacing-medium);
2121
}
2222

23+
.banner-content {
24+
display: flex;
25+
flex-direction: column;
26+
gap: var(--spacing-medium);
27+
28+
.banner-text {
29+
color: var(--color-banner-text);
30+
font-size: var(--spacing-medium);
31+
}
32+
33+
.indicator-list {
34+
display: flex;
35+
gap: var(--spacing-medium);
36+
37+
.indicator {
38+
border-radius: var(--radius-badge-border);
39+
background-color: var(--color-backdrop-light);
40+
padding: var(--spacing-small) var(--spacing-medium);
41+
font-size: var(--spacing-medium);
42+
}
43+
}
44+
}
45+
2346
.custom-option-container {
2447
display: flex;
2548
gap: var(--spacing-large);

‎manager-dashboard/app/views/NewTutorial/utils.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -611,7 +611,6 @@ export const tutorialFormSchema: TutorialFormSchema = {
611611
if (option.length > MAX_OPTIONS) {
612612
return `There shouldn\`t be more than ${MAX_OPTIONS} options`;
613613
}
614-
615614
return undefined;
616615
},
617616
keySelector: (key) => key.optionId,

0 commit comments

Comments
 (0)