Skip to content

Commit 28d7132

Browse files
akanshaaa19akanshaaa19
authored
Merge pull request #3167 from glific/revert-3153-feat/group_fields_ui
Revert "WhatsApp group fields UI"
2 parents af56b53 + 7e50e11 commit 28d7132

File tree

7 files changed

+142
-287
lines changed

7 files changed

+142
-287
lines changed

‎src/containers/List/List.module.css‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -270,11 +270,8 @@
270270
}
271271

272272
.ListContainer {
273-
background-color: #f8faf5;
274-
}
275-
276-
.FullHeight {
277273
height: 100vh;
274+
background-color: #f8faf5;
278275
}
279276

280277
.Checkbox {

‎src/containers/List/List.tsx‎

Lines changed: 43 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,9 @@ export const List = ({
227227

228228
// check if the user has access to manage collections
229229
const userRolePermissions = getUserRolePermissions();
230-
const capitalListItemName = listItemName ? listItemName[0].toUpperCase() + listItemName.slice(1) : '';
230+
const capitalListItemName = listItemName
231+
? listItemName[0].toUpperCase() + listItemName.slice(1)
232+
: '';
231233

232234
// function to get the default sorting set for columns
233235
const getDefaultSortColumn = (columnsFields: any) => {
@@ -331,9 +333,12 @@ export const List = ({
331333
let l;
332334

333335
if (countQuery) {
334-
[, { data: countData, error: e, loading: l, refetch: refetchCount }] = useLazyQuery(countQuery, {
335-
variables: { filter },
336-
});
336+
[, { data: countData, error: e, loading: l, refetch: refetchCount }] = useLazyQuery(
337+
countQuery,
338+
{
339+
variables: { filter },
340+
}
341+
);
337342
}
338343

339344
// Get item data here
@@ -343,7 +348,8 @@ export const List = ({
343348
});
344349

345350
// Get item data here
346-
const [fetchUserCollections, { loading: loadingCollections, data: userCollections }] = useLazyQuery(GET_CURRENT_USER);
351+
const [fetchUserCollections, { loading: loadingCollections, data: userCollections }] =
352+
useLazyQuery(GET_CURRENT_USER);
347353

348354
const checkUserRole = () => {
349355
userRole = getUserRole();
@@ -454,7 +460,9 @@ export const List = ({
454460
const { component, props } = useDelete(dialogMessage);
455461
dialogBox = (
456462
<DialogBox
457-
title={dialogTitle || `Are you sure you want to delete the ${listItemName} "${deleteItemName}"?`}
463+
title={
464+
dialogTitle || `Are you sure you want to delete the ${listItemName} "${deleteItemName}"?`
465+
}
458466
handleCancel={closeDialogBox}
459467
colorOk="warning"
460468
alignButtons="center"
@@ -520,7 +528,11 @@ export const List = ({
520528

521529
const deleteButton = (Id: any, text: string) =>
522530
allowedAction.delete ? (
523-
<div aria-label={t('Delete')} data-testid="DeleteIcon" onClick={() => showDialogHandler(Id, text)}>
531+
<div
532+
aria-label={t('Delete')}
533+
data-testid="DeleteIcon"
534+
onClick={() => showDialogHandler(Id, text)}
535+
>
524536
<div className={styles.IconWithText}>
525537
<DeleteIcon className={styles.IconSize} />
526538
<div className={styles.TextButton}>Delete</div>
@@ -580,7 +592,9 @@ export const List = ({
580592
<div>
581593
{actionListMap(item, actionsInsideMore, true)}
582594
<Divider className={styles.Divider}></Divider>
583-
<MenuItem className={styles.MenuItem}>{deleteButton(id, labelValue)}</MenuItem>
595+
<MenuItem className={styles.MenuItem}>
596+
{deleteButton(id, labelValue)}
597+
</MenuItem>
584598
</div>
585599
</Menu>
586600
</Backdrop>
@@ -605,7 +619,9 @@ export const List = ({
605619
if (event.target.checked) {
606620
checkbox?.setSelectedItems([...checkbox?.selectedItems, listItem]);
607621
} else {
608-
checkbox?.setSelectedItems(checkbox?.selectedItems.filter((item: any) => item.id !== listItem.id));
622+
checkbox?.setSelectedItems(
623+
checkbox?.selectedItems.filter((item: any) => item.id !== listItem.id)
624+
);
609625
}
610626
}}
611627
/>
@@ -680,7 +696,8 @@ export const List = ({
680696
<div>{t('Sorry, no results found! Please try a different search.')}</div>
681697
) : (
682698
<div>
683-
There are no {noItemText || listItemName}s right now. {button.show && t('Please create one.')}
699+
There are no {noItemText || listItemName}s right now.{' '}
700+
{button.show && t('Please create one.')}
684701
</div>
685702
)}
686703
</div>
@@ -692,7 +709,10 @@ export const List = ({
692709
{
693710
label: (
694711
<Checkbox
695-
checked={checkbox?.selectedItems.length !== 0 && checkbox?.selectedItems.length === itemList.length}
712+
checked={
713+
checkbox?.selectedItems.length !== 0 &&
714+
checkbox?.selectedItems.length === itemList.length
715+
}
696716
onChange={(event) => {
697717
if (event.target.checked) {
698718
checkbox?.setSelectedItems(data[listItem]);
@@ -754,7 +774,12 @@ export const List = ({
754774
);
755775
} else if (!button.link) {
756776
buttonContent = (
757-
<Button color="primary" variant="contained" onClick={() => setNewItem(true)} data-testid="newItemButton">
777+
<Button
778+
color="primary"
779+
variant="contained"
780+
onClick={() => setNewItem(true)}
781+
data-testid="newItemButton"
782+
>
758783
{button.symbol} {button.label}
759784
</Button>
760785
);
@@ -790,14 +815,18 @@ export const List = ({
790815
) : null;
791816

792817
return (
793-
<div className={`${showHeader ? styles.FullHeight : ''} ${styles.ListContainer}`}>
818+
<div className={styles.ListContainer}>
794819
{showHeader && (
795820
<>
796821
<div className={styles.Header} data-testid="listHeader">
797822
<div>
798823
<div className={styles.Title}>
799824
{backLink && (
800-
<BackIcon onClick={() => navigate(backLink)} className={styles.BackLink} data-testid="back-button" />
825+
<BackIcon
826+
onClick={() => navigate(backLink)}
827+
className={styles.BackLink}
828+
data-testid="back-button"
829+
/>
801830
)}
802831
<div className={styles.TitleText}> {title}</div>
803832
{helpData && <HelpIcon helpData={helpData} />}

‎src/containers/Profile/Contact/ContactDescription/ContactDescription.tsx‎

Lines changed: 62 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,12 @@ import styles from './ContactDescription.module.css';
99

1010
export interface ContactDescriptionProps {
1111
fields: any;
12-
settings?: any;
13-
phone?: string;
14-
maskedPhone?: string;
12+
settings: any;
13+
phone: string;
14+
maskedPhone: string;
1515
collections: any;
16-
lastMessage?: string;
17-
statusMessage?: string;
18-
groups?: boolean;
19-
customStyles?: string;
16+
lastMessage: string;
17+
statusMessage: string;
2018
}
2119

2220
export const ContactDescription = ({
@@ -27,15 +25,17 @@ export const ContactDescription = ({
2725
statusMessage,
2826
fields,
2927
settings,
30-
groups = false,
31-
customStyles,
3228
}: ContactDescriptionProps) => {
3329
const [showPlainPhone, setShowPlainPhone] = useState(false);
3430
const { t } = useTranslation();
3531

3632
// list of collections that the contact is assigned
3733
let assignedToCollection: any = Array.from(
38-
new Set([].concat(...collections.map((collection: any) => collection.users.map((user: any) => user.name))))
34+
new Set(
35+
[].concat(
36+
...collections.map((collection: any) => collection.users.map((user: any) => user.name))
37+
)
38+
)
3939
);
4040

4141
if (assignedToCollection.length > 2) {
@@ -49,19 +49,16 @@ export const ContactDescription = ({
4949
// list of collections that the contact belongs
5050
const collectionList = collections.map((collection: any) => collection.label).join(', ');
5151

52-
let collectionDetails = [{ label: t('Collections'), value: collectionList || t('None') }];
53-
if (!groups) {
54-
collectionDetails = [
55-
...collectionDetails,
56-
{
57-
label: t('Assigned to'),
58-
value: assignedToCollection || t('None'),
59-
},
60-
];
61-
}
52+
const collectionDetails = [
53+
{ label: t('Collections'), value: collectionList || t('None') },
54+
{
55+
label: t('Assigned to'),
56+
value: assignedToCollection || t('None'),
57+
},
58+
];
6259

6360
let settingsValue: any = '';
64-
if (settings && typeof settings === 'string') {
61+
if (typeof settings === 'string') {
6562
settingsValue = JSON.parse(settings);
6663
}
6764

@@ -113,30 +110,23 @@ export const ContactDescription = ({
113110
);
114111
}
115112

116-
const numberBlock = (
117-
<>
118-
{!groups && (
119-
<>
120-
<div className={styles.DetailBlock}>
121-
<Typography data-testid="formLabel" variant="h5" className={styles.FieldLabel}>
122-
Number
123-
</Typography>
124-
<div className={styles.Description}>
125-
{phoneDisplay}
126-
<div className={styles.SessionTimer}>
127-
<span>{t('Session Timer')}</span>
128-
<Timer time={lastMessage} variant="secondary" />
129-
</div>
130-
</div>
113+
return (
114+
<div className={styles.DescriptionContainer} data-testid="contactDescription">
115+
<div className={styles.DetailBlock}>
116+
<Typography data-testid="formLabel" variant="h5" className={styles.FieldLabel}>
117+
Number
118+
</Typography>
119+
<div className={styles.Description}>
120+
{phoneDisplay}
121+
<div className={styles.SessionTimer}>
122+
<span>{t('Session Timer')}</span>
123+
<Timer time={lastMessage} variant="secondary" />
131124
</div>
132-
<div className={styles.Divider} />
133-
</>
134-
)}
135-
</>
136-
);
125+
</div>
126+
</div>
127+
128+
<div className={styles.Divider} />
137129

138-
const collectionBlock = (
139-
<>
140130
<div className={styles.DetailBlock}>
141131
{collectionDetails.map((collectionItem: any) => (
142132
<div key={collectionItem.label}>
@@ -149,65 +139,38 @@ export const ContactDescription = ({
149139
</div>
150140

151141
<div className={styles.Divider} />
152-
</>
153-
);
154-
155-
const settingsBlock = (
156-
<>
157-
{settingsValue &&
158-
!groups &&
159-
typeof settingsValue === 'object' &&
160-
Object.keys(settingsValue).map((key) => (
161-
<div key={key}>
162-
<div className={styles.FieldLabel}>{key}</div>
163-
<div className={styles.DescriptionItemValue}>
164-
{Object.keys(settingsValue[key])
165-
.filter((settingKey) => settingsValue[key][settingKey] === true)
166-
.join(', ')}
167-
</div>
168-
<div className={styles.Divider} />
169-
</div>
170-
))}
171-
</>
172-
);
173142

174-
const statusBlock = (
175-
<>
176-
{!groups && (
177-
<div className={styles.DetailBlock}>
178-
<div>
179-
<div className={styles.FieldLabel}>Status</div>
180-
<div className={styles.DescriptionItemValue}>{statusMessage}</div>
181-
</div>
182-
<div className={styles.Divider} />
143+
<div className={styles.DetailBlock}>
144+
<div>
145+
<div className={styles.FieldLabel}>Status</div>
146+
<div className={styles.DescriptionItemValue}>{statusMessage}</div>
183147
</div>
184-
)}
185-
</>
186-
);
187-
188-
const fieldsBlock = (
189-
<div className={styles.DetailBlock}>
190-
{fieldsValue &&
191-
typeof fieldsValue === 'object' &&
192-
Object.keys(fieldsValue).map((key) => (
193-
<div key={key}>
194-
<div className={styles.FieldLabel}>
195-
{fieldsValue[key].label ? fieldsValue[key].label : key.replace('_', ' ')}
148+
<div className={styles.Divider} />
149+
{settingsValue &&
150+
typeof settingsValue === 'object' &&
151+
Object.keys(settingsValue).map((key) => (
152+
<div key={key}>
153+
<div className={styles.FieldLabel}>{key}</div>
154+
<div className={styles.DescriptionItemValue}>
155+
{Object.keys(settingsValue[key])
156+
.filter((settingKey) => settingsValue[key][settingKey] === true)
157+
.join(', ')}
158+
</div>
159+
<div className={styles.Divider} />
196160
</div>
197-
<div className={styles.DescriptionItemValue}>{fieldsValue[key].value}</div>
198-
<div className={styles.Divider} />
199-
</div>
200-
))}
201-
</div>
202-
);
203-
204-
return (
205-
<div className={`${styles.DescriptionContainer} ${customStyles}`} data-testid="contactDescription">
206-
{numberBlock}
207-
{collectionBlock}
208-
{settingsBlock}
209-
{statusBlock}
210-
{fieldsBlock}
161+
))}
162+
{fieldsValue &&
163+
typeof fieldsValue === 'object' &&
164+
Object.keys(fieldsValue).map((key) => (
165+
<div key={key}>
166+
<div className={styles.FieldLabel}>
167+
{fieldsValue[key].label ? fieldsValue[key].label : key.replace('_', ' ')}
168+
</div>
169+
<div className={styles.DescriptionItemValue}>{fieldsValue[key].value}</div>
170+
<div className={styles.Divider} />
171+
</div>
172+
))}
173+
</div>
211174
</div>
212175
);
213176
};

0 commit comments

Comments
 (0)