Skip to content

Commit 0eb1f76

Browse files
ThomasKranitsasThomasKranitsas
authored
Merge pull request #2245 from r0hit-gupta/show-confirmation-on-delete
show confirmation on delete
2 parents 5417919 + bb6065a commit 0eb1f76

File tree

7 files changed

+255
-14
lines changed

7 files changed

+255
-14
lines changed

‎src/shared/components/Settings/CofirmationModal/index.jsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
import PT from 'prop-types';
3+
import { Modal, PrimaryButton, GhostButton } from 'topcoder-react-ui-kit';
4+
import modal from './styles.scss';
5+
6+
export default function ConfirmationModal(props) {
7+
const { onConfirm, onCancel } = props;
8+
return (
9+
<Modal theme={modal}>
10+
<div styleName="modal.deletion-confirmation-container">
11+
<div styleName="modal.deletion-confirmation">
12+
<div styleName="modal.deletion-confirmation-title">Heads Up!</div>
13+
<div styleName="modal.deletion-confirmation-message">
14+
Are you sure you want to delete? This action can&apos;t be undone
15+
later.
16+
</div>
17+
<div styleName="modal.deletion-confirmation-buttons">
18+
<div styleName="modal.deletion-confirmation-button-yes">
19+
<GhostButton onClick={onConfirm}>Yes, Delete</GhostButton>
20+
</div>
21+
<div styleName="modal.deletion-confirmation-button-no">
22+
<PrimaryButton onClick={onCancel}>Cancel</PrimaryButton>
23+
</div>
24+
</div>
25+
</div>
26+
</div>
27+
</Modal>
28+
);
29+
}
30+
31+
ConfirmationModal.propTypes = {
32+
onConfirm: PT.func.isRequired,
33+
onCancel: PT.func.isRequired,
34+
};

‎src/shared/components/Settings/CofirmationModal/styles.scss

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
@import "~styles/mixins";
2+
3+
.container {
4+
@include roboto-regular;
5+
6+
padding: 0;
7+
position: fixed;
8+
overflow: auto;
9+
z-index: 10000;
10+
top: 0;
11+
right: 0;
12+
bottom: 0;
13+
left: 0;
14+
box-sizing: border-box;
15+
width: auto;
16+
max-width: none;
17+
transform: none;
18+
background: transparent;
19+
20+
.deletion-confirmation-container {
21+
background: transparent;
22+
opacity: 1;
23+
position: relative;
24+
padding: 30px;
25+
width: 100%;
26+
height: 100%;
27+
display: flex;
28+
flex-direction: column;
29+
justify-content: center;
30+
align-items: center;
31+
border-radius: 0;
32+
color: #444;
33+
font-family: Helvetica, sans-serif;
34+
font-size: 1.1em;
35+
line-height: 1.5em;
36+
margin: 0 auto;
37+
max-width: 100%;
38+
}
39+
}
40+
41+
.deletion-confirmation {
42+
display: flex;
43+
flex-flow: column wrap;
44+
justify-content: space-around;
45+
align-items: center;
46+
background-color: $tc-white;
47+
opacity: 1;
48+
border-radius: 4px;
49+
padding: 40px;
50+
}
51+
52+
@media (min-width: 768px) {
53+
.deletion-confirmation {
54+
width: 520px;
55+
min-height: 256px;
56+
}
57+
}
58+
59+
.deletion-confirmation-title {
60+
@include sofia-pro-medium;
61+
62+
font-size: 20px;
63+
line-height: 24px;
64+
color: $tc-gray-90;
65+
text-transform: uppercase;
66+
}
67+
68+
.deletion-confirmation-message {
69+
@include merriweather-sans-light;
70+
71+
margin: 10px 0;
72+
width: 100%;
73+
74+
.deletion-confirmation-account-title {
75+
font-style: italic;
76+
word-wrap: break-word;
77+
}
78+
}
79+
80+
.deletion-confirmation-buttons {
81+
display: flex;
82+
flex-flow: row wrap;
83+
84+
.deletion-confirmation-button-no {
85+
margin-left: 10px;
86+
87+
button {
88+
text-transform: uppercase;
89+
height: 40px;
90+
91+
@include sofia-pro-medium;
92+
93+
font-size: 12px;
94+
}
95+
}
96+
97+
.deletion-confirmation-button-yes {
98+
button {
99+
border: 1px solid $tc-dark-blue;
100+
text-transform: uppercase;
101+
height: 40px;
102+
103+
@include sofia-pro-medium;
104+
105+
font-size: 12px;
106+
107+
&:hover {
108+
color: $tc-white;
109+
background-color: $tc-dark-blue;
110+
}
111+
}
112+
}
113+
}

‎src/shared/components/Settings/Profile/Hobby/index.jsx

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import _ from 'lodash';
1212

1313
import ConsentComponent from 'components/Settings/ConsentComponent';
1414
import { PrimaryButton } from 'topcoder-react-ui-kit';
15+
import ConfirmationModal from '../../CofirmationModal';
1516
import HobbyList from './List';
1617

1718
import './styles.scss';
@@ -41,6 +42,8 @@ export default class Hobby extends ConsentComponent {
4142
},
4243
isMobileView: false,
4344
screenSM: 767,
45+
showConfirmation: false,
46+
indexNo: null,
4447
};
4548
}
4649

@@ -111,7 +114,10 @@ export default class Hobby extends ConsentComponent {
111114
}
112115

113116
onHandleDeleteHobby(indexNo) {
114-
this.showConsent(this.onDeleteHobby.bind(this, indexNo));
117+
this.setState({
118+
showConfirmation: true,
119+
indexNo,
120+
});
115121
}
116122

117123
/**
@@ -138,6 +144,10 @@ export default class Hobby extends ConsentComponent {
138144
} else {
139145
deleteUserTrait(handle, 'hobby', tokenV3);
140146
}
147+
this.setState({
148+
showConfirmation: false,
149+
indexNo: null,
150+
});
141151
}
142152

143153
/**
@@ -231,6 +241,7 @@ export default class Hobby extends ConsentComponent {
231241
const {
232242
hobbyTrait,
233243
isMobileView,
244+
showConfirmation, indexNo,
234245
} = this.state;
235246
const tabs = settingsUI.TABS.PROFILE;
236247
const currentTab = settingsUI.currentProfileTab;
@@ -244,6 +255,13 @@ export default class Hobby extends ConsentComponent {
244255
{
245256
this.shouldRenderConsent() && this.renderConsent()
246257
}
258+
{showConfirmation
259+
&& (
260+
<ConfirmationModal
261+
onConfirm={() => this.showConsent(this.onDeleteHobby.bind(this, indexNo))}
262+
onCancel={() => this.setState({ showConfirmation: false, indexNo: null })}
263+
/>
264+
)}
247265
<div styleName="hobby-container">
248266
<h1>
249267
Hobby
@@ -256,7 +274,7 @@ export default class Hobby extends ConsentComponent {
256274
&& (
257275
<HobbyList
258276
hobbyList={{ items: hobbyItems }}
259-
onDeleteItem={this.onDeleteHobby}
277+
onDeleteItem={this.onHandleDeleteHobby}
260278
/>
261279
)
262280
}

‎src/shared/components/Settings/Tools/Devices/index.jsx

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import PT from 'prop-types';
1212
import ConsentComponent from 'components/Settings/ConsentComponent';
1313
import Select from 'components/Select';
1414
import { PrimaryButton } from 'topcoder-react-ui-kit';
15+
import ConfirmationModal from '../../CofirmationModal';
1516
import dropdowns from './dropdowns.json';
1617
import DeviceList from './List';
1718

@@ -46,6 +47,8 @@ export default class Devices extends ConsentComponent {
4647
errorMessage: '',
4748
isMobileView: false,
4849
screenSM: 767,
50+
showConfirmation: false,
51+
indexNo: null,
4952
};
5053
}
5154

@@ -91,7 +94,10 @@ export default class Devices extends ConsentComponent {
9194
}
9295

9396
onHandleDeleteDevice(indexNo) {
94-
this.showConsent(this.onDeleteDevice.bind(this, indexNo));
97+
this.setState({
98+
showConfirmation: true,
99+
indexNo,
100+
});
95101
}
96102

97103
/**
@@ -118,6 +124,10 @@ export default class Devices extends ConsentComponent {
118124
} else {
119125
deleteUserTrait(handle, 'device', tokenV3);
120126
}
127+
this.setState({
128+
showConfirmation: false,
129+
indexNo: null,
130+
});
121131
}
122132

123133
/**
@@ -271,7 +281,9 @@ export default class Devices extends ConsentComponent {
271281
}
272282

273283
render() {
274-
const { deviceTrait, isMobileView } = this.state;
284+
const {
285+
deviceTrait, isMobileView, showConfirmation, indexNo,
286+
} = this.state;
275287
const deviceItems = deviceTrait.traits
276288
? deviceTrait.traits.data.slice() : [];
277289
const { newDevice, formInvalid, errorMessage } = this.state;
@@ -282,6 +294,13 @@ export default class Devices extends ConsentComponent {
282294
{
283295
this.shouldRenderConsent() && this.renderConsent()
284296
}
297+
{showConfirmation
298+
&& (
299+
<ConfirmationModal
300+
onConfirm={() => this.showConsent(this.onDeleteDevice.bind(this, indexNo))}
301+
onCancel={() => this.setState({ showConfirmation: false, indexNo: null })}
302+
/>
303+
)}
285304
<h1>
286305
Devices
287306
</h1>
@@ -293,7 +312,7 @@ export default class Devices extends ConsentComponent {
293312
&& (
294313
<DeviceList
295314
deviceList={{ items: deviceItems }}
296-
onDeleteItem={this.onDeleteDevice}
315+
onDeleteItem={this.onHandleDeleteDevice}
297316
disabled={!canModifyTrait}
298317
/>
299318
)

‎src/shared/components/Settings/Tools/ServiceProviders/index.jsx

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import _ from 'lodash';
1212
import ConsentComponent from 'components/Settings/ConsentComponent';
1313
import Select from 'components/Select';
1414
import { PrimaryButton } from 'topcoder-react-ui-kit';
15+
import ConfirmationModal from '../../CofirmationModal';
1516
import dropdowns from './dropdowns.json';
1617
import ServiceProviderList from './List';
1718

@@ -42,6 +43,8 @@ export default class ServiceProviders extends ConsentComponent {
4243
},
4344
isMobileView: false,
4445
screenSM: 767,
46+
showConfirmation: false,
47+
indexNo: null,
4548
};
4649
}
4750

@@ -112,7 +115,10 @@ export default class ServiceProviders extends ConsentComponent {
112115
}
113116

114117
onHandleDeleteServiceProvider(indexNo) {
115-
this.showConsent(this.onDeleteServiceProvider.bind(this, indexNo));
118+
this.setState({
119+
showConfirmation: true,
120+
indexNo,
121+
});
116122
}
117123

118124
/**
@@ -139,6 +145,10 @@ export default class ServiceProviders extends ConsentComponent {
139145
} else {
140146
deleteUserTrait(handle, 'service_provider', tokenV3);
141147
}
148+
this.setState({
149+
showConfirmation: false,
150+
indexNo: null,
151+
});
142152
}
143153

144154
/**
@@ -238,7 +248,9 @@ export default class ServiceProviders extends ConsentComponent {
238248
}
239249

240250
render() {
241-
const { serviceProviderTrait, isMobileView } = this.state;
251+
const {
252+
serviceProviderTrait, isMobileView, showConfirmation, indexNo,
253+
} = this.state;
242254
const serviceProviderItems = serviceProviderTrait.traits
243255
? serviceProviderTrait.traits.data.slice() : [];
244256
const { newServiceProvider, formInvalid, errorMessage } = this.state;
@@ -249,6 +261,13 @@ export default class ServiceProviders extends ConsentComponent {
249261
{
250262
this.shouldRenderConsent() && this.renderConsent()
251263
}
264+
{showConfirmation
265+
&& (
266+
<ConfirmationModal
267+
onConfirm={() => this.showConsent(this.onDeleteServiceProvider.bind(this, indexNo))}
268+
onCancel={() => this.setState({ showConfirmation: false, indexNo: null })}
269+
/>
270+
)}
252271
<h1>
253272
Service Providers
254273
</h1>
@@ -260,7 +279,7 @@ export default class ServiceProviders extends ConsentComponent {
260279
&& (
261280
<ServiceProviderList
262281
serviceProviderList={{ items: serviceProviderItems }}
263-
onDeleteItem={this.onDeleteServiceProvider}
282+
onDeleteItem={this.onHandleDeleteServiceProvider}
264283
disabled={!canModifyTrait}
265284
/>
266285
)

0 commit comments

Comments
 (0)