{ assets && assets.keys().includes(`./${device.deviceType.toLowerCase()}.svg`) ? : '' }
-
- {
- `${_.isEmpty(device.manufacturer) ? '' : `${device.manufacturer} | `}${_.isEmpty(device.model) ? '' : `${device.model} | `}${device.deviceType}`
- }
+
+ {hasModel ? (
+
+ {device.model}
+
+ ) : null}
+
+ {secondLine}
- {
- hasSecondLine() && (
-
- {
- `${_.isEmpty(device.operatingSystem) ? '' : `${device.operatingSystem} `}${_.isEmpty(device.osVersion) ? '' : `${device.osVersion} `}${_.isEmpty(device.osLanguage) ? '' : `${device.osLanguage}`}`
- }
-
- )
- }
@@ -87,6 +86,7 @@ export default function Item(props) {
Item.propTypes = {
device: PT.shape().isRequired,
index: PT.number.isRequired,
+ isEditing: PT.bool.isRequired,
onDeleteItem: PT.func.isRequired,
onEditItem: PT.func.isRequired,
};
diff --git a/src/shared/components/Settings/Tools/Devices/List/Item/styles.scss b/src/shared/components/Settings/Tools/Devices/List/Item/styles.scss
index 674c5f021b..5a283b9eec 100644
--- a/src/shared/components/Settings/Tools/Devices/List/Item/styles.scss
+++ b/src/shared/components/Settings/Tools/Devices/List/Item/styles.scss
@@ -8,10 +8,14 @@
justify-content: space-between;
height: 100%;
width: 100%;
- padding: 20px;
+ padding: 19px 20px 18px 45px;
border: 1px solid $tc-gray-10;
border-bottom: none;
background-color: $tc-white;
+
+ &.isEditing {
+ border: 1px solid $tc-gray-75;
+ }
}
.device-info {
@@ -24,7 +28,10 @@
.device-icon {
height: 49px;
width: 49px;
- margin-right: 18px;
+ margin-right: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.device-parameters {
@@ -33,8 +40,7 @@
display: flex;
flex-direction: column;
justify-items: center;
- justify-content: left;
- font-size: 15px;
+ justify-content: center;
line-height: 20px;
padding-right: 20px;
flex: 1;
@@ -43,21 +49,26 @@
flex-direction: row;
align-items: center;
}
-}
-.parameter-first-line {
- font-weight: 500;
- color: $tc-black;
- margin-bottom: 10px;
+ > div:first-child {
+ @include roboto-medium;
- &.single-line {
- margin-bottom: 0;
+ font-size: 15px !important;
+ letter-spacing: -0.16px !important;
+ color: $tc-black !important;
}
}
+.parameter-model {
+ margin-bottom: 8px;
+}
+
.parameter-second-line {
- color: $tc-gray-50;
- font-weight: 400;
+ @include roboto-regular;
+
+ font-size: 13px;
+ letter-spacing: -0.14px;
+ color: #888894;
}
.operation-container {
diff --git a/src/shared/components/Settings/Tools/Devices/List/index.jsx b/src/shared/components/Settings/Tools/Devices/List/index.jsx
index dfa7877f91..5c934f3d65 100644
--- a/src/shared/components/Settings/Tools/Devices/List/index.jsx
+++ b/src/shared/components/Settings/Tools/Devices/List/index.jsx
@@ -13,6 +13,7 @@ export default function DeviceList(props) {
onDeleteItem,
disabled,
onEditItem,
+ indexNo,
} = props;
return (
@@ -24,6 +25,7 @@ export default function DeviceList(props) {
? (
- {
+ toastr.error('Looks like you\'ve already entered this device.');
+ });
+ return;
+ }
+ }
this.showConsent(this.onAddDevice.bind(this));
}
@@ -110,7 +139,7 @@ export default class Devices extends ConsentComponent {
* @param indexNo the device index no
*/
onDeleteDevice(indexNo) {
- const { deviceTrait } = this.state;
+ const { deviceTrait, isEdit } = this.state;
const newDeviceTrait = { ...deviceTrait };
newDeviceTrait.traits.data.splice(indexNo, 1);
this.setState({
@@ -135,6 +164,9 @@ export default class Devices extends ConsentComponent {
isSubmit: false,
formInvalid: false,
});
+ if (isEdit) {
+ this.onCancelEditStatus();
+ }
}
/**
@@ -143,19 +175,33 @@ export default class Devices extends ConsentComponent {
*/
onEditDevice(indexNo) {
const { deviceTrait } = this.state;
+ const {
+ getManufacturers,
+ getModels,
+ getOses,
+ } = this.props;
this.setState({
newDevice: {
deviceType: deviceTrait.traits.data[indexNo].deviceType,
manufacturer: _.isEmpty(deviceTrait.traits.data[indexNo].manufacturer) ? '' : deviceTrait.traits.data[indexNo].manufacturer,
model: _.isEmpty(deviceTrait.traits.data[indexNo].model) ? '' : deviceTrait.traits.data[indexNo].model,
operatingSystem: _.isEmpty(deviceTrait.traits.data[indexNo].operatingSystem) ? '' : deviceTrait.traits.data[indexNo].operatingSystem,
- osVersion: _.isEmpty(deviceTrait.traits.data[indexNo].osVersion) ? '' : deviceTrait.traits.data[indexNo].osVersion,
- osLanguage: _.isEmpty(deviceTrait.traits.data[indexNo].osLanguage) ? '' : deviceTrait.traits.data[indexNo].osLanguage,
},
isEdit: true,
indexNo,
isSubmit: false,
});
+ const selectDevice = deviceTrait.traits.data[indexNo];
+ const {
+ deviceType,
+ manufacturer,
+ model,
+ } = selectDevice;
+
+ // preload all select
+ getManufacturers(deviceType);
+ getModels(1, deviceType, manufacturer);
+ getOses(1, deviceType, manufacturer, model);
}
/**
@@ -172,6 +218,7 @@ export default class Devices extends ConsentComponent {
tokenV3,
updateUserTrait,
addUserTrait,
+ clearDeviceState,
} = this.props;
const {
deviceTrait,
@@ -186,12 +233,6 @@ export default class Devices extends ConsentComponent {
if (_.isEmpty(device.operatingSystem)) {
delete device.operatingSystem;
}
- if (_.isEmpty(device.osVersion)) {
- delete device.osVersion;
- }
- if (_.isEmpty(device.osVersion)) {
- delete device.osVersion;
- }
if (deviceTrait.traits && deviceTrait.traits.data.length > 0) {
const newDeviceTrait = _.cloneDeep(deviceTrait);
if (isEdit) {
@@ -209,8 +250,6 @@ export default class Devices extends ConsentComponent {
manufacturer: '',
model: '',
operatingSystem: '',
- osVersion: '',
- osLanguage: '',
};
this.setState({
newDevice: empty,
@@ -218,6 +257,7 @@ export default class Devices extends ConsentComponent {
indexNo: null,
isSubmit: false,
});
+ clearDeviceState();
// save personalization
if (_.isEmpty(personalizationTrait)) {
const personalizationData = { userConsent: answer };
@@ -250,30 +290,103 @@ export default class Devices extends ConsentComponent {
}
/**
- * Update input value
+ * Update deviceType
* @param e event
*/
- onUpdateInput(e) {
+ onUpdateType(val) {
+ const {
+ getManufacturers,
+ } = this.props;
+
+ const newDevice = { deviceType: val };
+ newDevice.manufacturer = '';
+ newDevice.model = '';
+ newDevice.operatingSystem = '';
+ this.setState({ newDevice, isSubmit: false });
+
+ // preload manufacturers
+ getManufacturers(val);
+ }
+
+ /**
+ * Update manufacturer
+ * @param e event
+ */
+ onUpdateManufacturer(val) {
+ const {
+ getModels,
+ } = this.props;
const { newDevice: device } = this.state;
- const newDevice = { ...device };
- newDevice[e.target.name] = e.target.value;
+ const newDevice = { ..._.pick(device, ['deviceType']) };
+ newDevice.manufacturer = val;
+ newDevice.model = '';
+ newDevice.operatingSystem = '';
this.setState({ newDevice, isSubmit: false });
+ // preload models
+ getModels(1, newDevice.deviceType, newDevice.manufacturer);
}
/**
- * Update select value
- * @param option selected value
+ * Update model
+ * @param e event
*/
- onUpdateSelect(option) {
- if (option) {
- const { newDevice: device } = this.state;
- const newDevice = { ...device };
- newDevice[option.key] = option.name;
- this.setState({
- newDevice,
- isSubmit: false,
- });
- }
+ onUpdateModel(val) {
+ const {
+ getOses,
+ // lookupData: {modelPage}
+ } = this.props;
+ const { newDevice: device } = this.state;
+ const newDevice = { ..._.pick(device, ['deviceType', 'manufacturer']) };
+ newDevice.model = val;
+ newDevice.operatingSystem = '';
+ this.setState({ newDevice, isSubmit: false });
+
+ // preload oses
+ getOses(1, newDevice.deviceType, newDevice.manufacturer, newDevice.model);
+ }
+
+ /**
+ * Update operatingSystem
+ * @param e event
+ */
+ onUpdateOs(val) {
+ const { newDevice: device } = this.state;
+ const newDevice = { ..._.pick(device, ['deviceType', 'manufacturer', 'model']) };
+ newDevice.operatingSystem = val;
+ this.setState({ newDevice, isSubmit: false });
+ }
+
+ onLoadMoreModels() {
+ const {
+ lookupData: {
+ modelPage,
+ },
+ getMoreModels,
+ } = this.props;
+
+ const {
+ newDevice: {
+ deviceType,
+ manufacturer,
+ },
+ } = this.state;
+ getMoreModels(modelPage + 1, deviceType, manufacturer);
+ }
+
+ onLoadMoreOses() {
+ const {
+ lookupData: {
+ osPage,
+ },
+ getMoreOses,
+ } = this.props;
+ const {
+ newDevice: {
+ deviceType,
+ manufacturer, model,
+ },
+ } = this.state;
+ getMoreOses(osPage + 1, deviceType, manufacturer, model);
}
/**
@@ -307,6 +420,7 @@ export default class Devices extends ConsentComponent {
}
onCancelEditStatus() {
+ const { clearDeviceState } = this.props;
const { isEdit } = this.state;
if (isEdit) {
this.setState({
@@ -319,14 +433,26 @@ export default class Devices extends ConsentComponent {
manufacturer: '',
model: '',
operatingSystem: '',
- osVersion: '',
- osLanguage: '',
},
});
+ clearDeviceState();
}
}
render() {
+ const {
+ lookupData,
+ } = this.props;
+ const {
+ types,
+ manufacturers,
+ models,
+ oses,
+ hasMoreModels,
+ hasMoreOses,
+ isModelsLoading,
+ isOsesLoading,
+ } = lookupData;
const {
deviceTrait, isMobileView, showConfirmation, indexNo, isEdit,
formInvalid, isSubmit,
@@ -360,6 +486,7 @@ export default class Devices extends ConsentComponent {
@@ -382,15 +509,14 @@ export default class Devices extends ConsentComponent {
* Required
-
{
@@ -408,7 +534,16 @@ export default class Devices extends ConsentComponent {
-
+
@@ -419,40 +554,42 @@ export default class Devices extends ConsentComponent {