@bonlineza/luxity-lib 2.9.2 → 2.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AddInterest.js +9455 -1701
- package/BrandSelector.js +11077 -374
- package/GraphQLDropdownSelector.js +11646 -0
- package/GraphQLMultiSelector.js +69 -16
- package/InterestItem.js +17 -1
- package/Interests.js +3019 -2454
- package/LuxityGraphQLDropdownSelector.js +11646 -0
- package/LuxityGraphQLMultiselector.js +74 -21
- package/LuxityLoader.js +75 -0
- package/LuxityPageReady.js +72 -6
- package/MaterialSelector.js +11646 -0
- package/ModelSelector.js +11646 -0
- package/NotificationDropDown.js +65 -9
- package/README.md +7 -0
- package/RareStepFooter.js +194 -0
- package/RareStepHeader.js +317 -0
- package/RareStepLoginModal.js +15 -0
- package/StyleSelector.js +78 -25
- package/build/bundle.js +592 -154
- package/package.json +1 -1
- package/svg/LuxityArrowLeft.js +28 -0
- package/svg/LuxityArrowRight.js +28 -0
- package/svg/RareStepLogo.js +8 -0
package/build/bundle.js
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-animate-height'), require('styled-components'), require('numeral'), require('@bonlineza/b-lib/
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-animate-height', 'styled-components', 'numeral', '@bonlineza/b-lib/
|
|
4
|
-
(global = global || self, factory(global.blib = {}, global.React, global.AnimateHeight, global.styled, global.numeral, global.
|
|
5
|
-
}(this, (function (exports, React, AnimateHeight, styled, numeral,
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-animate-height'), require('styled-components'), require('numeral'), require('@bonlineza/b-lib/PageReady'), require('stylis-rule-sheet'), require('react-dom'), require('prop-types'), require('raf'), require('react-input-autosize'), require('react-transition-group'), require('@bonlineza/b-lib/functions'), require('rc-slider'), require('react-notify-toast')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-animate-height', 'styled-components', 'numeral', '@bonlineza/b-lib/PageReady', 'stylis-rule-sheet', 'react-dom', 'prop-types', 'raf', 'react-input-autosize', 'react-transition-group', '@bonlineza/b-lib/functions', 'rc-slider', 'react-notify-toast'], factory) :
|
|
4
|
+
(global = global || self, factory(global.blib = {}, global.React, global.AnimateHeight, global.styled, global.numeral, global.PageReady, global['stylis-rule-sheet'], global.reactDom, global.PropTypes, global.raf, global['react-input-autosize'], global['react-transition-group'], global.function, global.rcSlider, global['react-notify-toast']));
|
|
5
|
+
}(this, (function (exports, React, AnimateHeight, styled, numeral, PageReady, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, functions, rcSlider, Notifications) { 'use strict';
|
|
6
6
|
|
|
7
7
|
var React__default = 'default' in React ? React['default'] : React;
|
|
8
8
|
AnimateHeight = AnimateHeight && Object.prototype.hasOwnProperty.call(AnimateHeight, 'default') ? AnimateHeight['default'] : AnimateHeight;
|
|
9
9
|
var styled__default = 'default' in styled ? styled['default'] : styled;
|
|
10
10
|
numeral = numeral && Object.prototype.hasOwnProperty.call(numeral, 'default') ? numeral['default'] : numeral;
|
|
11
|
-
EllipsisLoader = EllipsisLoader && Object.prototype.hasOwnProperty.call(EllipsisLoader, 'default') ? EllipsisLoader['default'] : EllipsisLoader;
|
|
12
11
|
PageReady = PageReady && Object.prototype.hasOwnProperty.call(PageReady, 'default') ? PageReady['default'] : PageReady;
|
|
13
12
|
stylisRuleSheet = stylisRuleSheet && Object.prototype.hasOwnProperty.call(stylisRuleSheet, 'default') ? stylisRuleSheet['default'] : stylisRuleSheet;
|
|
14
13
|
PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
|
|
@@ -869,6 +868,22 @@
|
|
|
869
868
|
return /*#__PURE__*/React__default.createElement("span", {
|
|
870
869
|
key: "".concat(style.name, "-").concat(data.id)
|
|
871
870
|
}, style.name);
|
|
871
|
+
}) : 'All')), /*#__PURE__*/React__default.createElement("div", {
|
|
872
|
+
className: "interest-item__container_heading"
|
|
873
|
+
}, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Models:"), /*#__PURE__*/React__default.createElement("div", {
|
|
874
|
+
className: "list-items"
|
|
875
|
+
}, data.luxity_models != null && data.luxity_models.length > 0 ? data.luxity_models.map(function (model) {
|
|
876
|
+
return /*#__PURE__*/React__default.createElement("span", {
|
|
877
|
+
key: "".concat(model.name, "-").concat(data.id)
|
|
878
|
+
}, model.name);
|
|
879
|
+
}) : 'All')), /*#__PURE__*/React__default.createElement("div", {
|
|
880
|
+
className: "interest-item__container_heading"
|
|
881
|
+
}, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Materials:"), /*#__PURE__*/React__default.createElement("div", {
|
|
882
|
+
className: "list-items"
|
|
883
|
+
}, data.luxity_materials != null && data.luxity_materials.length > 0 ? data.luxity_materials.map(function (material) {
|
|
884
|
+
return /*#__PURE__*/React__default.createElement("span", {
|
|
885
|
+
key: "".concat(material.name, "-").concat(data.id)
|
|
886
|
+
}, material.name);
|
|
872
887
|
}) : 'All')), /*#__PURE__*/React__default.createElement("div", {
|
|
873
888
|
className: "interest-item__container_heading ".concat(data.category_type === interestCategories.SHOES ? '' : 'no-shoe-size-section')
|
|
874
889
|
}, data.category_type === interestCategories.SHOES ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Shoe Size:"), /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -895,7 +910,7 @@
|
|
|
895
910
|
var SheoSizeContentDiv = styled__default.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n @media (max-width: ", ") {\n display: none;\n }\n"])), media.xs);
|
|
896
911
|
var InterestItemTitle = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n font-weight: bold;\n display: none;\n\n @media (max-width: ", ") {\n display: inline;\n }\n"])), media.xs);
|
|
897
912
|
var InterestItemContainer = styled__default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n\n .no-shoe-size-section {\n @media (max-width: ", ") {\n display: none;\n }\n }\n"])), media.xs);
|
|
898
|
-
var InterestItemContent = styled__default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n width: 95%;\n height: 100%;\n border: 1px solid ", ";\n padding: 0.5em;\n margin-bottom: ", ";\n\n .interest-item__container_heading {\n color: ", ";\n flex-basis: calc(100% /
|
|
913
|
+
var InterestItemContent = styled__default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n width: 95%;\n height: 100%;\n border: 1px solid ", ";\n padding: 0.5em;\n margin-bottom: ", ";\n\n .interest-item__container_heading {\n color: ", ";\n flex-basis: calc(100% / 8);\n margin-left: ", ";\n margin-top: 0.3rem;\n\n @media (max-width: ", ") {\n display: inline;\n }\n }\n\n .list-items {\n display: inline-flex;\n flex-direction: column;\n\n @media (max-width: ", ") {\n margin-left: ", ";\n }\n }\n\n @media (max-width: ", ") {\n flex-direction: column;\n }\n"])), function (props) {
|
|
899
914
|
return props.theme.colors.borderColor;
|
|
900
915
|
}, function (props) {
|
|
901
916
|
return props.theme.marginPaddings[1];
|
|
@@ -922,6 +937,57 @@
|
|
|
922
937
|
return message.replace(':error_code', error.status || 'Network Down');
|
|
923
938
|
};
|
|
924
939
|
|
|
940
|
+
var LuxityArrowLeft = (function (props) {
|
|
941
|
+
return /*#__PURE__*/React__default.createElement("svg", {
|
|
942
|
+
version: "1.0",
|
|
943
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
944
|
+
width: props.width || '100%',
|
|
945
|
+
height: props.height || '100%',
|
|
946
|
+
viewBox: "0 0 177.000000 300.000000",
|
|
947
|
+
preserveAspectRatio: "xMidYMid meet"
|
|
948
|
+
}, /*#__PURE__*/React__default.createElement("g", {
|
|
949
|
+
transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
|
|
950
|
+
fill: "#000000",
|
|
951
|
+
stroke: "none"
|
|
952
|
+
}, /*#__PURE__*/React__default.createElement("path", {
|
|
953
|
+
d: "M808 2628 c-139 -205 -377 -557 -530 -781 l-277 -409 48 -71 c363\n-539 905 -1335 915 -1345 9 -9 90 -12 362 -10 l351 3 -350 515 c-192 283 -409\n603 -482 711 l-134 197 386 568 c212 313 450 665 529 782 l145 212 -355 0\n-355 0 -253 -372z"
|
|
954
|
+
})));
|
|
955
|
+
});
|
|
956
|
+
|
|
957
|
+
var LuxityArrowRight = (function (props) {
|
|
958
|
+
return /*#__PURE__*/React__default.createElement("svg", {
|
|
959
|
+
version: "1.0",
|
|
960
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
961
|
+
width: props.width || '100%',
|
|
962
|
+
height: props.height || '100%',
|
|
963
|
+
viewBox: "0 0 177.000000 300.000000",
|
|
964
|
+
preserveAspectRatio: "xMidYMid meet"
|
|
965
|
+
}, /*#__PURE__*/React__default.createElement("g", {
|
|
966
|
+
transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
|
|
967
|
+
fill: "#000000",
|
|
968
|
+
stroke: "none"
|
|
969
|
+
}, /*#__PURE__*/React__default.createElement("path", {
|
|
970
|
+
d: "M106 2973 c9 -16 226 -336 481 -711 255 -376 465 -687 466 -691 1 -4\n-233 -355 -520 -779 -288 -424 -523 -773 -523 -776 0 -3 159 -6 353 -5 l352 0\n525 776 c289 427 524 780 522 785 -1 5 -219 328 -484 719 l-481 709 -355 0\n-354 0 18 -27z"
|
|
971
|
+
})));
|
|
972
|
+
});
|
|
973
|
+
|
|
974
|
+
var _templateObject$a, _templateObject2$1, _templateObject3$1;
|
|
975
|
+
var LoaderContainer = styled__default.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n margin: 20px auto;\n"])));
|
|
976
|
+
var LeftImageContainer = styled__default.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: flex-start;\n width: 100%;\n height: 100%;\n object-fit: contain;\n animation: slide-left infinite 3s;\n background-color: white;\n\n @keyframes slide-left {\n 0% {\n transform: translateX(0);\n }\n 40% {\n transform: translateX(50%);\n }\n 100% {\n transform: translateX(150%);\n }\n }\n"])));
|
|
977
|
+
var RightImageContainer = styled__default.div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: flex-end;\n width: 100%;\n height: 100%;\n object-fit: contain;\n animation: slide-right infinite 3s;\n\n @keyframes slide-right {\n 0% {\n transform: translateX(0);\n }\n 40% {\n transform: translateX(-50%);\n opacity: 1;\n }\n 100% {\n transform: translateX(-150%);\n opacity: 0;\n }\n }\n"])));
|
|
978
|
+
|
|
979
|
+
function LuxityLoader(_ref) {
|
|
980
|
+
var width = _ref.width,
|
|
981
|
+
height = _ref.height;
|
|
982
|
+
return /*#__PURE__*/React__default.createElement(LoaderContainer, null, /*#__PURE__*/React__default.createElement(LeftImageContainer, null, /*#__PURE__*/React__default.createElement(LuxityArrowRight, {
|
|
983
|
+
width: width,
|
|
984
|
+
height: height
|
|
985
|
+
})), /*#__PURE__*/React__default.createElement(RightImageContainer, null, /*#__PURE__*/React__default.createElement(LuxityArrowLeft, {
|
|
986
|
+
width: width,
|
|
987
|
+
height: height
|
|
988
|
+
})));
|
|
989
|
+
}
|
|
990
|
+
|
|
925
991
|
var LuxityPageReadyContext = /*#__PURE__*/React__default.createContext({
|
|
926
992
|
data: null
|
|
927
993
|
});
|
|
@@ -997,7 +1063,10 @@
|
|
|
997
1063
|
customErrorMessage: customErrorMessage,
|
|
998
1064
|
customErrorHandler: customErrorHandler,
|
|
999
1065
|
renderCustomLoader: function renderCustomLoader() {
|
|
1000
|
-
return /*#__PURE__*/React__default.createElement(
|
|
1066
|
+
return /*#__PURE__*/React__default.createElement(LuxityLoader, {
|
|
1067
|
+
height: "40px",
|
|
1068
|
+
width: "95%"
|
|
1069
|
+
});
|
|
1001
1070
|
},
|
|
1002
1071
|
errorMessageInterpreter: interpretErrorMessage
|
|
1003
1072
|
}, /*#__PURE__*/React__default.createElement(LuxityPageReadyContext.Provider, {
|
|
@@ -1024,42 +1093,42 @@
|
|
|
1024
1093
|
}
|
|
1025
1094
|
};
|
|
1026
1095
|
|
|
1027
|
-
var _templateObject$a;
|
|
1028
|
-
var RadioButtonsContainer = styled__default.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
|
|
1029
|
-
|
|
1030
1096
|
var _templateObject$b;
|
|
1031
|
-
var
|
|
1097
|
+
var RadioButtonsContainer = styled__default.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
|
|
1098
|
+
|
|
1099
|
+
var _templateObject$c;
|
|
1100
|
+
var ButtonListWrapper = styled__default.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n display: flex;\n flex-grow: 1;\n flex-wrap: ", ";\n"])), function (_ref) {
|
|
1032
1101
|
var noWrap = _ref.noWrap;
|
|
1033
1102
|
return noWrap ? 'nowrap' : 'wrap';
|
|
1034
1103
|
});
|
|
1035
1104
|
|
|
1036
|
-
var _templateObject$
|
|
1037
|
-
var Title$1 = styled__default.div(_templateObject$
|
|
1105
|
+
var _templateObject$d;
|
|
1106
|
+
var Title$1 = styled__default.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n font-weight: bold;\n color: ", ";\n flex-basis: 40%;\n"])), function (props) {
|
|
1038
1107
|
return props.theme.colors.base;
|
|
1039
1108
|
});
|
|
1040
1109
|
|
|
1041
|
-
var _templateObject$
|
|
1042
|
-
var RadioButtonLabel = styled__default.label(_templateObject$
|
|
1110
|
+
var _templateObject$e;
|
|
1111
|
+
var RadioButtonLabel = styled__default.label(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n display: flex;\n margin-bottom: ", ";\n margin-right: ", ";\n"])), function (props) {
|
|
1043
1112
|
return props.theme.marginPaddings[0];
|
|
1044
1113
|
}, function (props) {
|
|
1045
1114
|
return props.theme.marginPaddings[0];
|
|
1046
1115
|
});
|
|
1047
1116
|
|
|
1048
|
-
var _templateObject$
|
|
1049
|
-
var RadioButtonCircle = styled__default.div(_templateObject$
|
|
1117
|
+
var _templateObject$f;
|
|
1118
|
+
var RadioButtonCircle = styled__default.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n height: 20px;\n width: 20px;\n border-radius: 50%;\n margin-right: 5px;\n border: 1px solid ", ";\n display: flex;\n"])), function (props) {
|
|
1050
1119
|
return props.theme.colors.base;
|
|
1051
1120
|
});
|
|
1052
1121
|
|
|
1053
|
-
var _templateObject$f;
|
|
1054
|
-
var RadioButtonCircleInner = styled__default.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n height: 8px;\n width: 8px;\n border-radius: 50%;\n margin: auto;\n"])));
|
|
1055
|
-
|
|
1056
1122
|
var _templateObject$g;
|
|
1057
|
-
var
|
|
1123
|
+
var RadioButtonCircleInner = styled__default.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n height: 8px;\n width: 8px;\n border-radius: 50%;\n margin: auto;\n"])));
|
|
1124
|
+
|
|
1125
|
+
var _templateObject$h;
|
|
1126
|
+
var RadioButtonInput = styled__default.input(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n display: none;\n :checked ~ ", " {\n ", " {\n background-color: ", ";\n }\n }\n"])), RadioButtonCircle, RadioButtonCircleInner, function (props) {
|
|
1058
1127
|
return props.theme.colors.base;
|
|
1059
1128
|
});
|
|
1060
1129
|
|
|
1061
|
-
var _templateObject$
|
|
1062
|
-
var RadioButtonText = styled__default.div(_templateObject$
|
|
1130
|
+
var _templateObject$i;
|
|
1131
|
+
var RadioButtonText = styled__default.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
|
|
1063
1132
|
|
|
1064
1133
|
var RadioButtonsFormWrapper = function RadioButtonsFormWrapper(_ref) {
|
|
1065
1134
|
var name = _ref.name,
|
|
@@ -1143,13 +1212,13 @@
|
|
|
1143
1212
|
};
|
|
1144
1213
|
var RadioButtons$1 = themed(RadioButtons);
|
|
1145
1214
|
|
|
1146
|
-
var _templateObject$
|
|
1215
|
+
var _templateObject$j, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5;
|
|
1147
1216
|
/* position relative is required for the Body element to be positioned correctly */
|
|
1148
1217
|
|
|
1149
|
-
var relativeInlineStyle = styled.css(_templateObject$
|
|
1150
|
-
var topMiddleBodyStyle = styled.css(_templateObject2$
|
|
1218
|
+
var relativeInlineStyle = styled.css(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n position: relative;\n"])));
|
|
1219
|
+
var topMiddleBodyStyle = styled.css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 1;\n bottom: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"])));
|
|
1151
1220
|
var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
|
|
1152
|
-
return styled.css(_templateObject3$
|
|
1221
|
+
return styled.css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n /*Bottom Arrow*/\n top: 100%; /* At the bottom of the tooltip */\n left: calc(50% - ", ");\n border-width: ", ";\n border-style: solid;\n border-color: ", " transparent transparent transparent;\n"])), props.apexWidth, props.apexWidth, props.theme.colors.base);
|
|
1153
1222
|
};
|
|
1154
1223
|
var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
|
|
1155
1224
|
return styled.css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n position: absolute;\n top: 100%;\n left: calc(50% - ", " / 2);\n"])), props.bodyWidth);
|
|
@@ -1158,7 +1227,7 @@
|
|
|
1158
1227
|
return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n /*Top Arrow*/\n bottom: 100%; /* At the top of the tooltip */\n top: initial;\n left: 50%;\n border-style: solid;\n border-color: transparent transparent ", " transparent;\n"])), props.theme.colors.base);
|
|
1159
1228
|
};
|
|
1160
1229
|
|
|
1161
|
-
var _templateObject$
|
|
1230
|
+
var _templateObject$k;
|
|
1162
1231
|
|
|
1163
1232
|
var getBodyStyle = function getBodyStyle() {
|
|
1164
1233
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
@@ -1193,7 +1262,7 @@
|
|
|
1193
1262
|
}
|
|
1194
1263
|
};
|
|
1195
1264
|
|
|
1196
|
-
var Body$1 = styled__default.span(_templateObject$
|
|
1265
|
+
var Body$1 = styled__default.span(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n ", ";\n visibility: hidden;\n opacity: 0;\n width: ", ";\n transition: visibility 0.3s linear, opacity 0.3s linear;\n background-color: ", ";\n color: white;\n text-align: center;\n border-radius: 5px;\n ", "\n &::after {\n content: ' ';\n position: absolute;\n ", "\n }\n"])), relativeInlineStyle, function (props) {
|
|
1197
1266
|
return props.bodyWidth;
|
|
1198
1267
|
}, function (props) {
|
|
1199
1268
|
return props.theme.colors.base || 'black';
|
|
@@ -1203,8 +1272,8 @@
|
|
|
1203
1272
|
return getAfterStyling(props);
|
|
1204
1273
|
});
|
|
1205
1274
|
|
|
1206
|
-
var _templateObject$
|
|
1207
|
-
var Container = styled__default.div(_templateObject$
|
|
1275
|
+
var _templateObject$l;
|
|
1276
|
+
var Container = styled__default.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n ", ";\n cursor: pointer;\n &:hover ", " {\n opacity: 1;\n visibility: visible;\n }\n"])), relativeInlineStyle, Body$1);
|
|
1208
1277
|
|
|
1209
1278
|
var Tooltip = function Tooltip(_ref) {
|
|
1210
1279
|
var children = _ref.children,
|
|
@@ -1235,14 +1304,14 @@
|
|
|
1235
1304
|
};
|
|
1236
1305
|
var index$1 = themed(Tooltip);
|
|
1237
1306
|
|
|
1238
|
-
var _templateObject$
|
|
1239
|
-
var disabledButtonStyle = styled.css(_templateObject$
|
|
1240
|
-
var baseButtonStyle = styled.css(_templateObject2$
|
|
1307
|
+
var _templateObject$m, _templateObject2$3;
|
|
1308
|
+
var disabledButtonStyle = styled.css(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n cursor: not-allowed;\n opacity: 0.4;\n"])));
|
|
1309
|
+
var baseButtonStyle = styled.css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n padding: 1rem 3.5rem;\n cursor: pointer;\n letter-spacing: 1.3px;\n border-style: none;\n text-transform: uppercase;\n font-size: 12px;\n color: #fff;\n transition: 0.2s ease-in-out;\n outline: none;\n min-width: 150px;\n"])));
|
|
1241
1310
|
|
|
1242
1311
|
var _excluded = ["children"];
|
|
1243
1312
|
|
|
1244
|
-
var _templateObject$
|
|
1245
|
-
var Button = styled__default.button(_templateObject$
|
|
1313
|
+
var _templateObject$n;
|
|
1314
|
+
var Button = styled__default.button(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n ", ";\n background-color: ", ";\n color: ", ";\n &:active,\n &:hover {\n background-color: #fff;\n color: ", ";\n }\n\n &:disabled {\n ", "\n\n &:hover {\n background-color: ", ";\n color: #ffff;\n }\n }\n"])), baseButtonStyle, function (props) {
|
|
1246
1315
|
return props.theme.colors.primary;
|
|
1247
1316
|
}, function (props) {
|
|
1248
1317
|
return props.theme.colors.ntrlMin;
|
|
@@ -1263,8 +1332,8 @@
|
|
|
1263
1332
|
|
|
1264
1333
|
var _excluded$1 = ["children"];
|
|
1265
1334
|
|
|
1266
|
-
var _templateObject$
|
|
1267
|
-
var Button$1 = styled__default.button(_templateObject$
|
|
1335
|
+
var _templateObject$o;
|
|
1336
|
+
var Button$1 = styled__default.button(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n ", ";\n background-color: ", ";\n color: ", ";\n border: 1px solid ", ";\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n &:disabled {\n ", "\n &:hover {\n background-color: ", ";\n }\n }\n"])), baseButtonStyle, function (props) {
|
|
1268
1337
|
return props.theme.colors.ntrlMin;
|
|
1269
1338
|
}, function (props) {
|
|
1270
1339
|
return props.theme.colors.primary;
|
|
@@ -1289,8 +1358,8 @@
|
|
|
1289
1358
|
|
|
1290
1359
|
var _excluded$2 = ["children"];
|
|
1291
1360
|
|
|
1292
|
-
var _templateObject$
|
|
1293
|
-
var Button$2 = styled__default.button(_templateObject$
|
|
1361
|
+
var _templateObject$p;
|
|
1362
|
+
var Button$2 = styled__default.button(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral(["\n ", ";\n background-color: transparent;\n color: ", ";\n &:hover {\n color: ", ";\n }\n &:disabled {\n ", ";\n color: ", ";\n }\n"])), baseButtonStyle, function (props) {
|
|
1294
1363
|
return props.theme.colors.base;
|
|
1295
1364
|
}, function (props) {
|
|
1296
1365
|
return props.theme.colors.primary;
|
|
@@ -1312,8 +1381,8 @@
|
|
|
1312
1381
|
|
|
1313
1382
|
var _excluded$3 = ["children"];
|
|
1314
1383
|
|
|
1315
|
-
var _templateObject$
|
|
1316
|
-
var Button$3 = styled__default(TextButton$1)(_templateObject$
|
|
1384
|
+
var _templateObject$q;
|
|
1385
|
+
var Button$3 = styled__default(TextButton$1)(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral(["\n color: ", ";\n background-color: ", ";\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n &:disabled {\n background-color: ", ";\n color: ", ";\n }\n"])), function (props) {
|
|
1317
1386
|
return props.theme.colors.ntrlMin;
|
|
1318
1387
|
}, function (props) {
|
|
1319
1388
|
return props.theme.colors.primary;
|
|
@@ -1338,8 +1407,8 @@
|
|
|
1338
1407
|
|
|
1339
1408
|
var _excluded$4 = ["children"];
|
|
1340
1409
|
|
|
1341
|
-
var _templateObject$
|
|
1342
|
-
var Button$4 = styled__default.button(_templateObject$
|
|
1410
|
+
var _templateObject$r;
|
|
1411
|
+
var Button$4 = styled__default.button(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n outline: none;\n cursor: pointer;\n background-color: transparent;\n border: none;\n &:disabled {\n ", ";\n }\n"])), disabledButtonStyle);
|
|
1343
1412
|
|
|
1344
1413
|
var WrapperButton = function WrapperButton(_ref) {
|
|
1345
1414
|
var children = _ref.children,
|
|
@@ -8587,8 +8656,8 @@
|
|
|
8587
8656
|
}
|
|
8588
8657
|
};
|
|
8589
8658
|
|
|
8590
|
-
var _templateObject$
|
|
8591
|
-
var SvgWrapper$1 = styled__default.div(_templateObject$
|
|
8659
|
+
var _templateObject$s;
|
|
8660
|
+
var SvgWrapper$1 = styled__default.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteral(["\n padding: ", ";\n border: 1px solid\n ", ";\n text-align: center;\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;\n background-color: ", ";\n color: ", ";\n\n h1 {\n color: ", ";\n }\n\n svg {\n margin-left: auto;\n margin-right: auto;\n max-height: 80px;\n width: auto;\n /*condition*/\n\n .fillColor {\n fill: ", ";\n }\n\n .outlineColor {\n fill: ", ";\n }\n }\n @media (max-width: ", ") {\n margin-bottom: ", ";\n }\n"])), function (props) {
|
|
8592
8661
|
return props.theme.marginPaddings[4];
|
|
8593
8662
|
}, function (props) {
|
|
8594
8663
|
return props.hasBorder ? props.theme.colors.borderColor : props.theme.colors.ntrlMin;
|
|
@@ -8619,8 +8688,8 @@
|
|
|
8619
8688
|
isChecked: false
|
|
8620
8689
|
};
|
|
8621
8690
|
|
|
8622
|
-
var _templateObject$
|
|
8623
|
-
var Body$2 = styled__default.div(_templateObject$
|
|
8691
|
+
var _templateObject$t;
|
|
8692
|
+
var Body$2 = styled__default.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteral(["\n .outlineColor {\n fill: #ffffff;\n }\n display: flex;\n flex-flow: row wrap;\n\n button {\n margin-top: 20px;\n width: 150px;\n cursor: pointer;\n padding: 0;\n &:not(:last-child) {\n margin-right: ", ";\n }\n }\n .outlineColor {\n fill: white;\n }\n\n @media (max-width: ", ") {\n display: block;\n button {\n width: 100%;\n &:not(:last-child) {\n margin-right: 0;\n }\n }\n }\n"])), function (props) {
|
|
8624
8693
|
return props.theme.marginPaddings[2];
|
|
8625
8694
|
}, media.sm);
|
|
8626
8695
|
|
|
@@ -8752,14 +8821,14 @@
|
|
|
8752
8821
|
}));
|
|
8753
8822
|
});
|
|
8754
8823
|
|
|
8755
|
-
var _templateObject$
|
|
8756
|
-
var ErrorMessage$1 = styled__default.div(_templateObject$
|
|
8824
|
+
var _templateObject$u;
|
|
8825
|
+
var ErrorMessage$1 = styled__default.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteral(["\n color: ", ";\n margin-top: ", ";\n"])), function (props) {
|
|
8757
8826
|
return props.theme.colors.primary;
|
|
8758
8827
|
}, function (props) {
|
|
8759
8828
|
return props.theme.marginPaddings[0];
|
|
8760
8829
|
});
|
|
8761
8830
|
|
|
8762
|
-
var _templateObject$
|
|
8831
|
+
var _templateObject$v, _templateObject2$4;
|
|
8763
8832
|
var categories = catArray;
|
|
8764
8833
|
|
|
8765
8834
|
var getSvg = function getSvg() {
|
|
@@ -8786,10 +8855,10 @@
|
|
|
8786
8855
|
}
|
|
8787
8856
|
};
|
|
8788
8857
|
|
|
8789
|
-
var Container$1 = styled__default.div(_templateObject$
|
|
8858
|
+
var Container$1 = styled__default.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n"])), function (props) {
|
|
8790
8859
|
return props.theme.marginPaddings[5];
|
|
8791
8860
|
});
|
|
8792
|
-
var CategoryTitle = styled__default.h1(_templateObject2$
|
|
8861
|
+
var CategoryTitle = styled__default.h1(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n margin-top: 10px;\n font-size: 14px;\n text-transform: uppercase;\n"])));
|
|
8793
8862
|
/**
|
|
8794
8863
|
* InterestCatSelector is a specialized selector for select luxity specific interest categories
|
|
8795
8864
|
*/
|
|
@@ -9582,12 +9651,12 @@
|
|
|
9582
9651
|
/* ::<number | string, string, string> */
|
|
9583
9652
|
(transparentize);
|
|
9584
9653
|
|
|
9585
|
-
var _templateObject$
|
|
9586
|
-
var baseSliderStyles = styled.css(_templateObject$
|
|
9654
|
+
var _templateObject$w;
|
|
9655
|
+
var baseSliderStyles = styled.css(_templateObject$w || (_templateObject$w = _taggedTemplateLiteral(["\n .rc-slider {\n position: relative;\n height: 14px;\n padding: 5px 0;\n width: 100%;\n border-radius: 6px;\n touch-action: none;\n box-sizing: border-box;\n }\n .rc-slider * {\n box-sizing: border-box;\n }\n .rc-slider-rail {\n position: absolute;\n width: 100%;\n background-color: #e9e9e9;\n height: 4px;\n border-radius: 6px;\n }\n .rc-slider-track {\n position: absolute;\n left: 0;\n height: 4px;\n border-radius: 6px;\n background-color: #abe2fb;\n }\n .rc-slider-handle {\n position: absolute;\n width: 14px;\n height: 14px;\n cursor: pointer;\n margin-top: -5px;\n border-radius: 50%;\n border: solid 2px #96dbfa;\n background-color: #fff;\n -ms-touch-action: pan-x;\n touch-action: pan-x;\n }\n .rc-slider-handle:focus {\n border-color: #57c5f7;\n box-shadow: 0 0 0 5px #96dbfa;\n outline: none;\n }\n .rc-slider-handle-click-focused:focus {\n border-color: #96dbfa;\n box-shadow: unset;\n }\n .rc-slider-handle:hover {\n border-color: #57c5f7;\n }\n .rc-slider-handle:active {\n border-color: #57c5f7;\n box-shadow: 0 0 5px #57c5f7;\n cursor: grabbing;\n }\n .rc-slider-mark {\n position: absolute;\n top: 18px;\n left: 0;\n width: 100%;\n font-size: 12px;\n }\n .rc-slider-mark-text {\n position: absolute;\n display: inline-block;\n vertical-align: middle;\n text-align: center;\n cursor: pointer;\n color: #999;\n }\n .rc-slider-mark-text-active {\n color: #666;\n }\n .rc-slider-step {\n position: absolute;\n width: 100%;\n height: 4px;\n background: transparent;\n }\n .rc-slider-dot {\n position: absolute;\n bottom: -2px;\n margin-left: -4px;\n width: 8px;\n height: 8px;\n border: 2px solid #e9e9e9;\n background-color: #fff;\n cursor: pointer;\n border-radius: 50%;\n vertical-align: middle;\n }\n .rc-slider-dot-active {\n border-color: #96dbfa;\n }\n .rc-slider-dot-reverse {\n margin-left: 0;\n margin-right: -4px;\n }\n .rc-slider-disabled {\n background-color: #e9e9e9;\n }\n .rc-slider-disabled .rc-slider-track {\n background-color: #ccc;\n }\n .rc-slider-disabled .rc-slider-handle,\n .rc-slider-disabled .rc-slider-dot {\n border-color: #ccc;\n box-shadow: none;\n background-color: #fff;\n cursor: not-allowed;\n }\n .rc-slider-disabled .rc-slider-mark-text,\n .rc-slider-disabled .rc-slider-dot {\n cursor: not-allowed !important;\n }\n .rc-slider-vertical {\n width: 14px;\n height: 100%;\n padding: 0 5px;\n }\n .rc-slider-vertical .rc-slider-rail {\n height: 100%;\n width: 4px;\n }\n .rc-slider-vertical .rc-slider-track {\n left: 5px;\n bottom: 0;\n width: 4px;\n }\n .rc-slider-vertical .rc-slider-handle {\n margin-left: -5px;\n -ms-touch-action: pan-y;\n touch-action: pan-y;\n }\n .rc-slider-vertical .rc-slider-mark {\n top: 0;\n left: 18px;\n height: 100%;\n }\n .rc-slider-vertical .rc-slider-step {\n height: 100%;\n width: 4px;\n }\n .rc-slider-vertical .rc-slider-dot {\n left: 2px;\n margin-bottom: -4px;\n }\n .rc-slider-vertical .rc-slider-dot:first-child {\n margin-bottom: -4px;\n }\n .rc-slider-vertical .rc-slider-dot:last-child {\n margin-bottom: -4px;\n }\n .rc-slider-tooltip-zoom-down-enter,\n .rc-slider-tooltip-zoom-down-appear {\n animation-duration: 0.3s;\n animation-fill-mode: both;\n display: block !important;\n animation-play-state: paused;\n }\n .rc-slider-tooltip-zoom-down-leave {\n animation-duration: 0.3s;\n animation-fill-mode: both;\n display: block !important;\n animation-play-state: paused;\n }\n .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,\n .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {\n animation-name: rcSliderTooltipZoomDownIn;\n animation-play-state: running;\n }\n .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {\n animation-name: rcSliderTooltipZoomDownOut;\n animation-play-state: running;\n }\n .rc-slider-tooltip-zoom-down-enter,\n .rc-slider-tooltip-zoom-down-appear {\n transform: scale(0, 0);\n animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);\n }\n .rc-slider-tooltip-zoom-down-leave {\n animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n }\n @keyframes rcSliderTooltipZoomDownIn {\n 0% {\n opacity: 0;\n transform-origin: 50% 100%;\n transform: scale(0, 0);\n }\n 100% {\n transform-origin: 50% 100%;\n transform: scale(1, 1);\n }\n }\n @keyframes rcSliderTooltipZoomDownOut {\n 0% {\n transform-origin: 50% 100%;\n transform: scale(1, 1);\n }\n 100% {\n opacity: 0;\n transform-origin: 50% 100%;\n transform: scale(0, 0);\n }\n }\n .rc-slider-tooltip {\n position: absolute;\n left: -9999px;\n top: -9999px;\n visibility: visible;\n box-sizing: border-box;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n }\n .rc-slider-tooltip * {\n box-sizing: border-box;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n }\n .rc-slider-tooltip-hidden {\n display: none;\n }\n .rc-slider-tooltip-placement-top {\n padding: 4px 0 8px 0;\n }\n .rc-slider-tooltip-inner {\n padding: 6px 2px;\n min-width: 24px;\n height: 24px;\n font-size: 12px;\n line-height: 1;\n color: #fff;\n text-align: center;\n text-decoration: none;\n background-color: #6c6c6c;\n border-radius: 6px;\n box-shadow: 0 0 4px #d9d9d9;\n }\n .rc-slider-tooltip-arrow {\n position: absolute;\n width: 0;\n height: 0;\n border-color: transparent;\n border-style: solid;\n }\n .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {\n bottom: 4px;\n left: 50%;\n margin-left: -4px;\n border-width: 4px 4px 0;\n border-top-color: #6c6c6c;\n }\n"])));
|
|
9587
9656
|
|
|
9588
|
-
var _templateObject$
|
|
9657
|
+
var _templateObject$x, _templateObject2$5, _templateObject3$3, _templateObject4$2;
|
|
9589
9658
|
var handleDimension = '14px';
|
|
9590
|
-
var SliderContainer = styled__default.div(_templateObject$
|
|
9659
|
+
var SliderContainer = styled__default.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteral(["\n ", ";\n position: relative;\n .rc-slider-handle {\n background-color: ", ";\n border-color: ", ";\n }\n\n .rc-slider {\n margin-bottom: ", ";\n max-width: calc(100% - ", ");\n margin-left: auto;\n margin-right: auto;\n }\n .rc-slider-track {\n background-color: ", ";\n }\n\n .rc-slider-handle {\n height: ", ";\n width: ", ";\n transition: border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;\n &:hover,\n &:focus {\n border: ", ";\n box-shadow: 0 0 0 5px\n ", ";\n }\n }\n ", "\n"])), baseSliderStyles, function (props) {
|
|
9591
9660
|
return props.theme.colors.primary;
|
|
9592
9661
|
}, function (props) {
|
|
9593
9662
|
return props.theme.colors.primary;
|
|
@@ -9606,22 +9675,22 @@
|
|
|
9606
9675
|
var getSliderMarkStyle = function getSliderMarkStyle(_ref) {
|
|
9607
9676
|
var showMarks = _ref.showMarks,
|
|
9608
9677
|
primary = _ref.theme.colors.primary;
|
|
9609
|
-
var visiblityStyle = showMarks ? styled.css(_templateObject2$
|
|
9678
|
+
var visiblityStyle = showMarks ? styled.css(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral([""]))) : styled.css(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n .rc-slider-mark-text,\n .rc-slider-dot {\n visibility: hidden;\n }\n "])));
|
|
9610
9679
|
return styled.css(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n .rc-slider-mark-text {\n color: ", ";\n }\n\n .rc-slider-dot {\n border-color: ", ";\n background-color: white;\n }\n ", "\n "])), primary, primary, visiblityStyle);
|
|
9611
9680
|
};
|
|
9612
9681
|
|
|
9613
|
-
var _templateObject$x;
|
|
9614
|
-
var ToolTipWrapper = styled__default.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteral(["\n position: absolute;\n right: auto;\n top: 20px;\n transform: translateX(-50%);\n width: 100px;\n text-align: center;\n"])));
|
|
9615
|
-
|
|
9616
9682
|
var _templateObject$y;
|
|
9617
|
-
var
|
|
9683
|
+
var ToolTipWrapper = styled__default.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteral(["\n position: absolute;\n right: auto;\n top: 20px;\n transform: translateX(-50%);\n width: 100px;\n text-align: center;\n"])));
|
|
9684
|
+
|
|
9685
|
+
var _templateObject$z;
|
|
9686
|
+
var Footer = styled__default.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteral(["\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-end;\n"])));
|
|
9618
9687
|
|
|
9619
9688
|
var _excluded$6 = ["dragging", "value", "offset", "index"],
|
|
9620
9689
|
_excluded2 = ["renderTitleSection", "marks", "defaultMinValue", "defaultMaxValue", "min", "max", "toolTipComponent", "renderFooterSection", "onChange", "children", "identifier", "showMarks"];
|
|
9621
9690
|
|
|
9622
|
-
var _templateObject$
|
|
9691
|
+
var _templateObject$A;
|
|
9623
9692
|
var debounceBuilder = functions.debounced(100);
|
|
9624
|
-
var ChildrenWrapper = styled__default.div(_templateObject$
|
|
9693
|
+
var ChildrenWrapper = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n"])), function (props) {
|
|
9625
9694
|
return props.theme.marginPaddings[3];
|
|
9626
9695
|
});
|
|
9627
9696
|
|
|
@@ -9780,11 +9849,11 @@
|
|
|
9780
9849
|
};
|
|
9781
9850
|
var RangeSlider$1 = themed(RangeSlider);
|
|
9782
9851
|
|
|
9783
|
-
var _templateObject$
|
|
9784
|
-
var Title$2 = styled__default.h1(_templateObject$
|
|
9852
|
+
var _templateObject$B, _templateObject2$6;
|
|
9853
|
+
var Title$2 = styled__default.h1(_templateObject$B || (_templateObject$B = _taggedTemplateLiteral(["\n font-size: ", ";\n font-weight: bold;\n margin-bottom: 0;\n text-transform: uppercase;\n"])), function (props) {
|
|
9785
9854
|
return props.theme.fontSizes[2];
|
|
9786
9855
|
});
|
|
9787
|
-
var InterestsSubheadingContainer = styled__default.div(_templateObject2$
|
|
9856
|
+
var InterestsSubheadingContainer = styled__default.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n padding-bottom: ", ";\n border-bottom: 1px solid ", ";\n margin-bottom: ", ";\n margin-top: ", ";\n width: 100%;\n align-items: center;\n"])), function (props) {
|
|
9788
9857
|
return props.theme.marginPaddings[1];
|
|
9789
9858
|
}, function (props) {
|
|
9790
9859
|
return props.theme.colors.primary;
|
|
@@ -9803,8 +9872,8 @@
|
|
|
9803
9872
|
}, /*#__PURE__*/React__default.createElement(Title$2, null, title), /*#__PURE__*/React__default.createElement("div", null, children));
|
|
9804
9873
|
};
|
|
9805
9874
|
|
|
9806
|
-
var _templateObject$
|
|
9807
|
-
var CurrencyInputWrapper = styled__default.div(_templateObject$
|
|
9875
|
+
var _templateObject$C;
|
|
9876
|
+
var CurrencyInputWrapper = styled__default.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteral(["\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n\n input[data-qe-id='masked-input-min'],\n input[data-qe-id='masked-input-max'] {\n flex-basis: 30%;\n border-left: none;\n border-right: none;\n border-top: none;\n border-bottom: 1px solid ", ";\n }\n"])), function (props) {
|
|
9808
9877
|
return props.theme.colors.primary;
|
|
9809
9878
|
});
|
|
9810
9879
|
|
|
@@ -10046,8 +10115,8 @@
|
|
|
10046
10115
|
showMessageOnError: true
|
|
10047
10116
|
};
|
|
10048
10117
|
|
|
10049
|
-
var _templateObject$
|
|
10050
|
-
var StyledHeader = styled__default.h5(_templateObject$
|
|
10118
|
+
var _templateObject$D;
|
|
10119
|
+
var StyledHeader = styled__default.h5(_templateObject$D || (_templateObject$D = _taggedTemplateLiteral(["\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n\n @media (max-width: ", ") {\n display: block;\n }\n\n .icon-header__left {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n\n @media (max-width: ", ") {\n align-self: flex-start;\n }\n\n svg {\n height: 1.5em;\n width: 1.5em;\n margin-right: ", ";\n }\n }\n\n .icon-header__right {\n display: flex;\n flex-grow: 1;\n justify-content: flex-end;\n }\n"])), media.sm, media.sm, function (props) {
|
|
10051
10120
|
return props.theme.marginPaddings[1];
|
|
10052
10121
|
});
|
|
10053
10122
|
|
|
@@ -10093,8 +10162,8 @@
|
|
|
10093
10162
|
}));
|
|
10094
10163
|
});
|
|
10095
10164
|
|
|
10096
|
-
var _templateObject$
|
|
10097
|
-
var NotifyContainer = styled__default.div(_templateObject$
|
|
10165
|
+
var _templateObject$E;
|
|
10166
|
+
var NotifyContainer = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteral(["\n .page-ready {\n display: flex;\n align-items: center;\n }\n\n .loader {\n min-width: 150px;\n }\n\n .notification-dropdown-select-container {\n min-width: 150px;\n\n .notification-dropdown-select__control {\n min-height: auto;\n background-color: ", ";\n border: none;\n border-radius: 0;\n\n &--is-focused {\n border: none;\n border-radius: 0;\n box-shadow: none;\n }\n\n .notification-dropdown-select__value-container {\n & > div {\n padding: 0;\n margin: 0;\n color: ", ";\n }\n & .notification-dropdown-select__single-value,\n & .notification-dropdown-select__placeholder {\n overflow: visible;\n font-weight: lighter;\n }\n }\n }\n }\n\n .notification-dropdown-select__indicators {\n padding: 0 !important;\n .notification-dropdown-select__dropdown-indicator {\n color: ", ";\n }\n }\n\n .notification-dropdown-select__menu {\n border-radius: 0;\n\n & > .notification-dropdown-select__menu-list {\n border-radius: 0;\n\n & > .notification-dropdown-select__option {\n font-weight: bold;\n &:last-child {\n border-bottom: none;\n }\n\n &.notification-dropdown-select__option--is-focused {\n background-color: ", ";\n border-style: hidden;\n }\n &.notification-dropdown-select__option--is-selected {\n color: ", ";\n background-color: ", ";\n border-style: hidden;\n }\n &.notification-dropdown-select__option--is-selected.notification-dropdown-select__option--is-focused {\n border-style: hidden;\n }\n }\n }\n }\n"])), function (props) {
|
|
10098
10167
|
return props.theme.colors.ntrlMin;
|
|
10099
10168
|
}, function (props) {
|
|
10100
10169
|
return props.theme.colors.base;
|
|
@@ -10203,7 +10272,10 @@
|
|
|
10203
10272
|
}
|
|
10204
10273
|
}, /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
|
|
10205
10274
|
className: "notification-dropdown-label"
|
|
10206
|
-
}, "Notification:\xA0"), updating ? /*#__PURE__*/React__default.createElement(
|
|
10275
|
+
}, "Notification:\xA0"), updating ? /*#__PURE__*/React__default.createElement(LuxityLoader, {
|
|
10276
|
+
height: "20px",
|
|
10277
|
+
width: "95%"
|
|
10278
|
+
}) : /*#__PURE__*/React__default.createElement(index$1$1, {
|
|
10207
10279
|
isMulti: false,
|
|
10208
10280
|
isSearchable: false,
|
|
10209
10281
|
components: {
|
|
@@ -10232,15 +10304,298 @@
|
|
|
10232
10304
|
|
|
10233
10305
|
var NotificationDropDown$1 = themed(NotificationDropDown);
|
|
10234
10306
|
|
|
10235
|
-
var _templateObject$
|
|
10307
|
+
var _templateObject$F;
|
|
10236
10308
|
var ALL_ITEM = {
|
|
10309
|
+
label: 'ALL',
|
|
10310
|
+
value: 'ALL'
|
|
10311
|
+
};
|
|
10312
|
+
var StyledMultiselector = styled__default.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteral(["\n .multiselector__selected-items,\n .multiselector__selectable-items {\n display: flex;\n flex-flow: no-wrap;\n margin-bottom: 40px;\n .dropdown-select-container {\n width: 100%;\n .dropdown-select {\n &__control {\n border-color: ", ";\n border-radius: 0px;\n background-color: ", ";\n color: ", ";\n }\n &__multi-value {\n background-color: ", ";\n }\n &__multi-value__label {\n color: ", ";\n font-size: 100%;\n }\n &__multi-value__remove {\n svg {\n fill: ", ";\n }\n }\n }\n }\n }\n"])), function (props) {
|
|
10313
|
+
return props.theme.colors.primary;
|
|
10314
|
+
}, function (props) {
|
|
10315
|
+
return props.theme.colors.ntrlMin;
|
|
10316
|
+
}, function (props) {
|
|
10317
|
+
return props.theme.colors.primary;
|
|
10318
|
+
}, function (props) {
|
|
10319
|
+
return props.theme.colors.primary;
|
|
10320
|
+
}, function (props) {
|
|
10321
|
+
return props.theme.colors.ntrlMin;
|
|
10322
|
+
}, function (props) {
|
|
10323
|
+
return props.theme.colors.ntrlMin;
|
|
10324
|
+
});
|
|
10325
|
+
/**
|
|
10326
|
+
* Multiselector with a GraphQL flavour (TODO: to be revised to make it remote api agnostic)
|
|
10327
|
+
*/
|
|
10328
|
+
|
|
10329
|
+
var GraphQLDropdownSelector = /*#__PURE__*/function (_React$Component) {
|
|
10330
|
+
_inherits(GraphQLDropdownSelector, _React$Component);
|
|
10331
|
+
|
|
10332
|
+
var _super = _createSuper(GraphQLDropdownSelector);
|
|
10333
|
+
|
|
10334
|
+
function GraphQLDropdownSelector(props) {
|
|
10335
|
+
var _this;
|
|
10336
|
+
|
|
10337
|
+
_classCallCheck(this, GraphQLDropdownSelector);
|
|
10338
|
+
|
|
10339
|
+
_this = _super.call(this, props);
|
|
10340
|
+
|
|
10341
|
+
_defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
|
|
10342
|
+
if (prevProps.graphQuery !== _this.props.graphQuery) {
|
|
10343
|
+
_this.makeRequest();
|
|
10344
|
+
}
|
|
10345
|
+
});
|
|
10346
|
+
|
|
10347
|
+
_defineProperty(_assertThisInitialized(_this), "makeRequest", function () {
|
|
10348
|
+
_this.pageReady.refreshPage();
|
|
10349
|
+
});
|
|
10350
|
+
|
|
10351
|
+
_defineProperty(_assertThisInitialized(_this), "emptySelected", function () {
|
|
10352
|
+
return _this.setState({
|
|
10353
|
+
selected: [ALL_ITEM]
|
|
10354
|
+
});
|
|
10355
|
+
});
|
|
10356
|
+
|
|
10357
|
+
_defineProperty(_assertThisInitialized(_this), "setNewResults", function (res) {
|
|
10358
|
+
var selectedIds = _this.state.selected.map(function (sel) {
|
|
10359
|
+
return sel.value;
|
|
10360
|
+
});
|
|
10361
|
+
|
|
10362
|
+
var pagination = _this.props.resultProcessor(res);
|
|
10363
|
+
|
|
10364
|
+
var allSelected = _this.state.selected.some(function (item) {
|
|
10365
|
+
return item.value === ALL_ITEM.value;
|
|
10366
|
+
});
|
|
10367
|
+
|
|
10368
|
+
var newList = pagination.filter(function (newItem) {
|
|
10369
|
+
return !selectedIds.includes(newItem.value);
|
|
10370
|
+
});
|
|
10371
|
+
newList = allSelected ? newList : [ALL_ITEM].concat(_toConsumableArray(newList)); // eslint-disable-next-line react/no-unused-state
|
|
10372
|
+
|
|
10373
|
+
_this.setState({
|
|
10374
|
+
list: newList,
|
|
10375
|
+
pagination: pagination
|
|
10376
|
+
});
|
|
10377
|
+
});
|
|
10378
|
+
|
|
10379
|
+
_defineProperty(_assertThisInitialized(_this), "onAddItem", function (addSelectedItem) {
|
|
10380
|
+
var newSelectedList;
|
|
10381
|
+
|
|
10382
|
+
if (addSelectedItem.includes(ALL_ITEM)) {
|
|
10383
|
+
newSelectedList = [ALL_ITEM];
|
|
10384
|
+
} else {
|
|
10385
|
+
newSelectedList = addSelectedItem.filter(function (item) {
|
|
10386
|
+
return item.value !== ALL_ITEM.value;
|
|
10387
|
+
});
|
|
10388
|
+
}
|
|
10389
|
+
|
|
10390
|
+
_this.setState(function (prevState) {
|
|
10391
|
+
return _objectSpread2(_objectSpread2({}, prevState), {}, {
|
|
10392
|
+
selected: newSelectedList
|
|
10393
|
+
});
|
|
10394
|
+
}, function () {
|
|
10395
|
+
_this.props.onChange(_this.state.selected.filter(function (item) {
|
|
10396
|
+
return item.value !== ALL_ITEM.value;
|
|
10397
|
+
}));
|
|
10398
|
+
});
|
|
10399
|
+
});
|
|
10400
|
+
|
|
10401
|
+
_defineProperty(_assertThisInitialized(_this), "onIsLoading", function (flag) {
|
|
10402
|
+
_this.setState({
|
|
10403
|
+
isLoading: flag
|
|
10404
|
+
});
|
|
10405
|
+
});
|
|
10406
|
+
|
|
10407
|
+
_defineProperty(_assertThisInitialized(_this), "render", function () {
|
|
10408
|
+
var _this$props = _this.props,
|
|
10409
|
+
baseClass = _this$props.baseClass,
|
|
10410
|
+
identifier = _this$props.identifier,
|
|
10411
|
+
triggerRequest = _this$props.triggerRequest,
|
|
10412
|
+
className = _this$props.className;
|
|
10413
|
+
var list = _this.state.list;
|
|
10414
|
+
return /*#__PURE__*/React__default.createElement(StyledMultiselector, null, /*#__PURE__*/React__default.createElement("div", {
|
|
10415
|
+
"data-qe-id": identifier,
|
|
10416
|
+
className: "".concat(className, " ").concat(baseClass)
|
|
10417
|
+
}, /*#__PURE__*/React__default.createElement(LuxityPageReady, {
|
|
10418
|
+
ref: function ref(inst) {
|
|
10419
|
+
_this.pageReady = inst;
|
|
10420
|
+
},
|
|
10421
|
+
onData: _this.setNewResults,
|
|
10422
|
+
onIsLoading: _this.onIsLoading,
|
|
10423
|
+
getRequestPromise: function getRequestPromise() {
|
|
10424
|
+
return triggerRequest();
|
|
10425
|
+
}
|
|
10426
|
+
}), /*#__PURE__*/React__default.createElement("div", {
|
|
10427
|
+
className: "".concat(baseClass, "__selectable-items")
|
|
10428
|
+
}, /*#__PURE__*/React__default.createElement(ReactSelectWrapper, {
|
|
10429
|
+
options: list,
|
|
10430
|
+
onChange: function onChange(value) {
|
|
10431
|
+
_this.onAddItem(value);
|
|
10432
|
+
},
|
|
10433
|
+
isMulti: true,
|
|
10434
|
+
isSearchable: true
|
|
10435
|
+
}))));
|
|
10436
|
+
});
|
|
10437
|
+
|
|
10438
|
+
_this.state = {
|
|
10439
|
+
selected: [ALL_ITEM],
|
|
10440
|
+
list: [],
|
|
10441
|
+
pagination: {},
|
|
10442
|
+
isLoading: false
|
|
10443
|
+
};
|
|
10444
|
+
return _this;
|
|
10445
|
+
}
|
|
10446
|
+
|
|
10447
|
+
return _createClass(GraphQLDropdownSelector);
|
|
10448
|
+
}(React__default.Component);
|
|
10449
|
+
|
|
10450
|
+
GraphQLDropdownSelector.defaultProps = {
|
|
10451
|
+
baseClass: 'multiselector'
|
|
10452
|
+
};
|
|
10453
|
+
var GraphQLDropdownSelector$1 = themed(GraphQLDropdownSelector);
|
|
10454
|
+
|
|
10455
|
+
/**
|
|
10456
|
+
* Luxity flavoured GraphQLMultiselector with text Search, category and limit controls
|
|
10457
|
+
*/
|
|
10458
|
+
var LuxityGraphQLDropdownSelector = /*#__PURE__*/function (_React$Component) {
|
|
10459
|
+
_inherits(LuxityGraphQLDropdownSelector, _React$Component);
|
|
10460
|
+
|
|
10461
|
+
var _super = _createSuper(LuxityGraphQLDropdownSelector);
|
|
10462
|
+
|
|
10463
|
+
function LuxityGraphQLDropdownSelector(props) {
|
|
10464
|
+
var _this;
|
|
10465
|
+
|
|
10466
|
+
_classCallCheck(this, LuxityGraphQLDropdownSelector);
|
|
10467
|
+
|
|
10468
|
+
_this = _super.call(this, props);
|
|
10469
|
+
|
|
10470
|
+
_defineProperty(_assertThisInitialized(_this), "multiSelectorRef", /*#__PURE__*/React__default.createRef());
|
|
10471
|
+
|
|
10472
|
+
_defineProperty(_assertThisInitialized(_this), "increaseLimit", function () {
|
|
10473
|
+
_this.setState(function (prevState) {
|
|
10474
|
+
return {
|
|
10475
|
+
limit: prevState.limit + _this.props.queryLimitIncrement
|
|
10476
|
+
};
|
|
10477
|
+
});
|
|
10478
|
+
});
|
|
10479
|
+
|
|
10480
|
+
_defineProperty(_assertThisInitialized(_this), "onChange", function (selection) {
|
|
10481
|
+
_this.props.onChange(selection);
|
|
10482
|
+
});
|
|
10483
|
+
|
|
10484
|
+
_defineProperty(_assertThisInitialized(_this), "render", function () {
|
|
10485
|
+
var _this$state = _this.state,
|
|
10486
|
+
limit = _this$state.limit,
|
|
10487
|
+
query_arguments = _this$state.query_arguments;
|
|
10488
|
+
var _this$props = _this.props,
|
|
10489
|
+
title = _this$props.title,
|
|
10490
|
+
baseClass = _this$props.baseClass,
|
|
10491
|
+
getGraphQuery = _this$props.getGraphQuery,
|
|
10492
|
+
resultProcessor = _this$props.resultProcessor,
|
|
10493
|
+
graphApi = _this$props.graphApi,
|
|
10494
|
+
identifier = _this$props.identifier,
|
|
10495
|
+
requestInstance = _this$props.requestInstance;
|
|
10496
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
10497
|
+
className: baseClass
|
|
10498
|
+
}, /*#__PURE__*/React__default.createElement(InterestsSubheading, {
|
|
10499
|
+
className: "".concat(baseClass, "__title"),
|
|
10500
|
+
title: title
|
|
10501
|
+
}), /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(GraphQLDropdownSelector$1, {
|
|
10502
|
+
triggerRequest: function triggerRequest() {
|
|
10503
|
+
return requestInstance.post(graphApi, {
|
|
10504
|
+
query: getGraphQuery(limit, 1, 'id|desc', query_arguments)
|
|
10505
|
+
});
|
|
10506
|
+
},
|
|
10507
|
+
graphQuery: getGraphQuery(limit, 1, 'id|desc', query_arguments),
|
|
10508
|
+
identifier: identifier,
|
|
10509
|
+
ref: _this.multiSelectorRef,
|
|
10510
|
+
onChange: _this.onChange,
|
|
10511
|
+
resultProcessor: resultProcessor
|
|
10512
|
+
})));
|
|
10513
|
+
});
|
|
10514
|
+
|
|
10515
|
+
_this.state = {
|
|
10516
|
+
limit: props.baseQueryLimit,
|
|
10517
|
+
query_arguments: props.query_arguments
|
|
10518
|
+
};
|
|
10519
|
+
return _this;
|
|
10520
|
+
}
|
|
10521
|
+
|
|
10522
|
+
_createClass(LuxityGraphQLDropdownSelector, [{
|
|
10523
|
+
key: "componentDidUpdate",
|
|
10524
|
+
value: function componentDidUpdate(prevProps) {
|
|
10525
|
+
var _this$multiSelectorRe;
|
|
10526
|
+
|
|
10527
|
+
if (prevProps.query_arguments !== this.props.query_arguments && (_this$multiSelectorRe = this.multiSelectorRef) !== null && _this$multiSelectorRe !== void 0 && _this$multiSelectorRe.current) {
|
|
10528
|
+
this.multiSelectorRef.current.emptySelected();
|
|
10529
|
+
}
|
|
10530
|
+
}
|
|
10531
|
+
}], [{
|
|
10532
|
+
key: "getDerivedStateFromProps",
|
|
10533
|
+
value: function getDerivedStateFromProps(props, prevState) {
|
|
10534
|
+
if (prevState.query_arguments !== props.query_arguments) {
|
|
10535
|
+
return {
|
|
10536
|
+
query_arguments: props.query_arguments
|
|
10537
|
+
};
|
|
10538
|
+
}
|
|
10539
|
+
|
|
10540
|
+
return null;
|
|
10541
|
+
}
|
|
10542
|
+
}]);
|
|
10543
|
+
|
|
10544
|
+
return LuxityGraphQLDropdownSelector;
|
|
10545
|
+
}(React__default.Component);
|
|
10546
|
+
|
|
10547
|
+
LuxityGraphQLDropdownSelector.defaultProps = {
|
|
10548
|
+
baseClass: '',
|
|
10549
|
+
searchPlaceHolder: '',
|
|
10550
|
+
queryLimitIncrement: 12,
|
|
10551
|
+
baseQueryLimit: 12
|
|
10552
|
+
};
|
|
10553
|
+
|
|
10554
|
+
var BrandSelector = function BrandSelector(_ref) {
|
|
10555
|
+
var onChange = _ref.onChange,
|
|
10556
|
+
category = _ref.category,
|
|
10557
|
+
graphApi = _ref.graphApi,
|
|
10558
|
+
getGraphQuery = _ref.getGraphQuery,
|
|
10559
|
+
resultProcessor = _ref.resultProcessor,
|
|
10560
|
+
requestInstance = _ref.requestInstance;
|
|
10561
|
+
return /*#__PURE__*/React__default.createElement(LuxityGraphQLDropdownSelector, {
|
|
10562
|
+
baseQueryLimit: 9999,
|
|
10563
|
+
title: "Brands",
|
|
10564
|
+
queryId: "getBrands",
|
|
10565
|
+
baseClass: "brand-selector",
|
|
10566
|
+
identifier: "brand-selector",
|
|
10567
|
+
searchPlaceHolder: "Search brands",
|
|
10568
|
+
query_arguments: category,
|
|
10569
|
+
onChange: onChange,
|
|
10570
|
+
graphApi: graphApi,
|
|
10571
|
+
getGraphQuery: getGraphQuery,
|
|
10572
|
+
resultProcessor: resultProcessor,
|
|
10573
|
+
requestInstance: requestInstance
|
|
10574
|
+
});
|
|
10575
|
+
};
|
|
10576
|
+
|
|
10577
|
+
BrandSelector.defaultProps = {
|
|
10578
|
+
resultProcessor: function resultProcessor(result) {
|
|
10579
|
+
return result.data.data.luxity_brands.data.map(function (_ref2) {
|
|
10580
|
+
var id = _ref2.id,
|
|
10581
|
+
name = _ref2.name;
|
|
10582
|
+
return {
|
|
10583
|
+
label: name,
|
|
10584
|
+
value: id
|
|
10585
|
+
};
|
|
10586
|
+
});
|
|
10587
|
+
}
|
|
10588
|
+
};
|
|
10589
|
+
|
|
10590
|
+
var _templateObject$G, _templateObject2$7;
|
|
10591
|
+
var ALL_ITEM$1 = {
|
|
10237
10592
|
id: 'ALL',
|
|
10238
10593
|
name: 'ALL'
|
|
10239
10594
|
};
|
|
10240
10595
|
var multiSelectorItemMaxHeight = '3rem';
|
|
10241
10596
|
var multiSelectorItemAnimationDuration = '300ms';
|
|
10242
|
-
var multiselectorItemFadeIn = styled.keyframes(_templateObject$
|
|
10243
|
-
var StyledMultiselector = styled__default.div(_templateObject2$
|
|
10597
|
+
var multiselectorItemFadeIn = styled.keyframes(_templateObject$G || (_templateObject$G = _taggedTemplateLiteral(["\n from {\n margin: 0;\n max-height: 0px;\n opacity: 0;\n }\n to {\n max-height: ", ";\n opacity: 1;\n }\n"])), multiSelectorItemMaxHeight);
|
|
10598
|
+
var StyledMultiselector$1 = styled__default.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n .multiselector__selected-items,\n .multiselector__selectable-items {\n display: flex;\n flex-flow: wrap;\n margin-left: calc(-1 * ", ");\n button {\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n border-color: ", ";\n background-color: ", ";\n color: ", ";\n padding: ", ";\n text-transform: none;\n box-sizing: border-box;\n animation: ", " ease-in-out\n ", " forwards;\n flex-basis: calc(25% - ", ");\n margin-bottom: ", ";\n margin-left: ", ";\n text-overflow: ellipsis;\n overflow-x: hidden;\n min-height: 40px;\n\n @media (max-width: ", ") {\n flex-basis: calc(50% - ", ");\n }\n }\n }\n\n .multiselector__footer {\n display: flex;\n justify-content: center;\n button {\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n background-color: ", ";\n color: ", ";\n }\n }\n"])), function (props) {
|
|
10244
10599
|
return props.theme.marginPaddings[2];
|
|
10245
10600
|
}, function (props) {
|
|
10246
10601
|
return props.theme.colors.ntrlMin;
|
|
@@ -10299,7 +10654,7 @@
|
|
|
10299
10654
|
|
|
10300
10655
|
_defineProperty(_assertThisInitialized(_this), "emptySelected", function () {
|
|
10301
10656
|
return _this.setState({
|
|
10302
|
-
selected: [ALL_ITEM]
|
|
10657
|
+
selected: [ALL_ITEM$1]
|
|
10303
10658
|
});
|
|
10304
10659
|
});
|
|
10305
10660
|
|
|
@@ -10311,13 +10666,13 @@
|
|
|
10311
10666
|
var pagination = _this.props.resultProcessor(res);
|
|
10312
10667
|
|
|
10313
10668
|
var allSelected = _this.state.selected.some(function (item) {
|
|
10314
|
-
return item.id === ALL_ITEM.id;
|
|
10669
|
+
return item.id === ALL_ITEM$1.id;
|
|
10315
10670
|
});
|
|
10316
10671
|
|
|
10317
10672
|
var newList = pagination.data.filter(function (newItem) {
|
|
10318
10673
|
return !selectedIds.includes(newItem.id);
|
|
10319
10674
|
});
|
|
10320
|
-
newList = allSelected ? newList : [ALL_ITEM].concat(_toConsumableArray(newList));
|
|
10675
|
+
newList = allSelected ? newList : [ALL_ITEM$1].concat(_toConsumableArray(newList));
|
|
10321
10676
|
|
|
10322
10677
|
_this.setState({
|
|
10323
10678
|
list: newList,
|
|
@@ -10330,21 +10685,21 @@
|
|
|
10330
10685
|
var newSelectedList;
|
|
10331
10686
|
var newList;
|
|
10332
10687
|
|
|
10333
|
-
if (addSelectedItem.id === ALL_ITEM.id) {
|
|
10688
|
+
if (addSelectedItem.id === ALL_ITEM$1.id) {
|
|
10334
10689
|
// Clear Selected List
|
|
10335
10690
|
// and move previous Selected items to list
|
|
10336
|
-
newSelectedList = [ALL_ITEM];
|
|
10691
|
+
newSelectedList = [ALL_ITEM$1];
|
|
10337
10692
|
newList = prevState.list.filter(function (item) {
|
|
10338
|
-
return item.id !== ALL_ITEM.id;
|
|
10693
|
+
return item.id !== ALL_ITEM$1.id;
|
|
10339
10694
|
}).concat(prevState.selected).sort(function (a, b) {
|
|
10340
10695
|
return a.id - b.id;
|
|
10341
10696
|
});
|
|
10342
10697
|
} else {
|
|
10343
10698
|
newSelectedList = _toConsumableArray(prevState.selected.filter(function (item) {
|
|
10344
|
-
return item.id !== ALL_ITEM.id;
|
|
10699
|
+
return item.id !== ALL_ITEM$1.id;
|
|
10345
10700
|
})).concat(addSelectedItem);
|
|
10346
|
-
newList = [ALL_ITEM].concat(_toConsumableArray(prevState.list.filter(function (item) {
|
|
10347
|
-
return item.id !== ALL_ITEM.id;
|
|
10701
|
+
newList = [ALL_ITEM$1].concat(_toConsumableArray(prevState.list.filter(function (item) {
|
|
10702
|
+
return item.id !== ALL_ITEM$1.id;
|
|
10348
10703
|
}).filter(function (item) {
|
|
10349
10704
|
return item.id !== addSelectedItem.id;
|
|
10350
10705
|
})));
|
|
@@ -10356,7 +10711,7 @@
|
|
|
10356
10711
|
};
|
|
10357
10712
|
}, function () {
|
|
10358
10713
|
_this.props.onChange(_this.state.selected.filter(function (item) {
|
|
10359
|
-
return item.id !== ALL_ITEM.id;
|
|
10714
|
+
return item.id !== ALL_ITEM$1.id;
|
|
10360
10715
|
}));
|
|
10361
10716
|
});
|
|
10362
10717
|
});
|
|
@@ -10364,7 +10719,7 @@
|
|
|
10364
10719
|
_defineProperty(_assertThisInitialized(_this), "onRemoveItem", function (removeSelectedItem) {
|
|
10365
10720
|
_this.setState(function (prevState) {
|
|
10366
10721
|
// Cannot remove ALL from selection by unselecting it
|
|
10367
|
-
if ((removeSelectedItem === null || removeSelectedItem === void 0 ? void 0 : removeSelectedItem.id) === ALL_ITEM.id) {
|
|
10722
|
+
if ((removeSelectedItem === null || removeSelectedItem === void 0 ? void 0 : removeSelectedItem.id) === ALL_ITEM$1.id) {
|
|
10368
10723
|
return {};
|
|
10369
10724
|
}
|
|
10370
10725
|
|
|
@@ -10373,18 +10728,18 @@
|
|
|
10373
10728
|
});
|
|
10374
10729
|
|
|
10375
10730
|
var newList = _toConsumableArray(prevState.list).concat(removeSelectedItem).filter(function (item) {
|
|
10376
|
-
return item.id !== ALL_ITEM.id;
|
|
10731
|
+
return item.id !== ALL_ITEM$1.id;
|
|
10377
10732
|
}).sort(function (a, b) {
|
|
10378
10733
|
return a.id - b.id;
|
|
10379
10734
|
});
|
|
10380
10735
|
|
|
10381
10736
|
return {
|
|
10382
10737
|
list: newList,
|
|
10383
|
-
selected: newSelectedList.length ? newSelectedList : [ALL_ITEM]
|
|
10738
|
+
selected: newSelectedList.length ? newSelectedList : [ALL_ITEM$1]
|
|
10384
10739
|
};
|
|
10385
10740
|
}, function () {
|
|
10386
10741
|
_this.props.onChange(_this.state.selected.filter(function (item) {
|
|
10387
|
-
return item.id !== ALL_ITEM.id;
|
|
10742
|
+
return item.id !== ALL_ITEM$1.id;
|
|
10388
10743
|
}));
|
|
10389
10744
|
});
|
|
10390
10745
|
});
|
|
@@ -10407,7 +10762,7 @@
|
|
|
10407
10762
|
selected = _this$state.selected,
|
|
10408
10763
|
pagination = _this$state.pagination,
|
|
10409
10764
|
isLoading = _this$state.isLoading;
|
|
10410
|
-
return /*#__PURE__*/React__default.createElement(StyledMultiselector, null, /*#__PURE__*/React__default.createElement("div", {
|
|
10765
|
+
return /*#__PURE__*/React__default.createElement(StyledMultiselector$1, null, /*#__PURE__*/React__default.createElement("div", {
|
|
10411
10766
|
"data-qe-id": identifier,
|
|
10412
10767
|
className: "".concat(className, " ").concat(baseClass)
|
|
10413
10768
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -10447,7 +10802,7 @@
|
|
|
10447
10802
|
});
|
|
10448
10803
|
|
|
10449
10804
|
_this.state = {
|
|
10450
|
-
selected: [ALL_ITEM],
|
|
10805
|
+
selected: [ALL_ITEM$1],
|
|
10451
10806
|
list: [],
|
|
10452
10807
|
pagination: {},
|
|
10453
10808
|
isLoading: false
|
|
@@ -10477,7 +10832,7 @@
|
|
|
10477
10832
|
}));
|
|
10478
10833
|
});
|
|
10479
10834
|
|
|
10480
|
-
var _templateObject$
|
|
10835
|
+
var _templateObject$H;
|
|
10481
10836
|
|
|
10482
10837
|
var Title$3 = function Title(_ref) {
|
|
10483
10838
|
var baseClass = _ref.baseClass,
|
|
@@ -10498,7 +10853,7 @@
|
|
|
10498
10853
|
})));
|
|
10499
10854
|
};
|
|
10500
10855
|
|
|
10501
|
-
var StyledTitle = styled__default(Title$3)(_templateObject$
|
|
10856
|
+
var StyledTitle = styled__default(Title$3)(_templateObject$H || (_templateObject$H = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n font-weight: bold;\n display: flex;\n align-items: center;\n font-size: ", ";\n\n .title__search,\n .title__search {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 30px;\n margin-bottom: ", ";\n\n svg {\n margin-left: ", ";\n fill: ", ";\n stroke: ", ";\n }\n\n input {\n width: 140px;\n border: none;\n font-size: ", ";\n transition: 0.2s border-color ease-in-out;\n margin-left: ", ";\n padding: 0;\n\n :focus {\n border-color: ", ";\n border-bottom: none;\n }\n }\n }\n"])), function (props) {
|
|
10502
10857
|
return props.theme.marginPaddings[2];
|
|
10503
10858
|
}, function (props) {
|
|
10504
10859
|
return props.theme.fontSizes[2];
|
|
@@ -10638,8 +10993,8 @@
|
|
|
10638
10993
|
baseQueryLimit: 12
|
|
10639
10994
|
};
|
|
10640
10995
|
|
|
10641
|
-
var _templateObject$
|
|
10642
|
-
var BaseButton = styled__default.button(_templateObject$
|
|
10996
|
+
var _templateObject$I;
|
|
10997
|
+
var BaseButton = styled__default.button(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral(["\n color: ", ";\n border: 1px solid ", ";\n background-color: ", ";\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n"])), function (props) {
|
|
10643
10998
|
return props.theme.colors.base;
|
|
10644
10999
|
}, function (props) {
|
|
10645
11000
|
return props.theme.colors.borderColor;
|
|
@@ -10665,38 +11020,6 @@
|
|
|
10665
11020
|
return selected ? /*#__PURE__*/React__default.createElement(PrimaryButton$1, props, item.name) : /*#__PURE__*/React__default.createElement(UnselectedButton, props, item.name);
|
|
10666
11021
|
};
|
|
10667
11022
|
|
|
10668
|
-
var BrandSelector = function BrandSelector(_ref) {
|
|
10669
|
-
var onChange = _ref.onChange,
|
|
10670
|
-
category = _ref.category,
|
|
10671
|
-
graphApi = _ref.graphApi,
|
|
10672
|
-
itemRenderer = _ref.itemRenderer,
|
|
10673
|
-
getGraphQuery = _ref.getGraphQuery,
|
|
10674
|
-
resultProcessor = _ref.resultProcessor,
|
|
10675
|
-
requestInstance = _ref.requestInstance;
|
|
10676
|
-
return /*#__PURE__*/React__default.createElement(LuxityGraphQLMultiselector, {
|
|
10677
|
-
baseQueryLimit: 16,
|
|
10678
|
-
title: "Brands",
|
|
10679
|
-
queryId: "getBrands",
|
|
10680
|
-
baseClass: "brand-selector",
|
|
10681
|
-
identifier: "brand-selector",
|
|
10682
|
-
searchPlaceHolder: "Search brands",
|
|
10683
|
-
category: category,
|
|
10684
|
-
onChange: onChange,
|
|
10685
|
-
graphApi: graphApi,
|
|
10686
|
-
itemRenderer: itemRenderer,
|
|
10687
|
-
getGraphQuery: getGraphQuery,
|
|
10688
|
-
resultProcessor: resultProcessor,
|
|
10689
|
-
requestInstance: requestInstance
|
|
10690
|
-
});
|
|
10691
|
-
};
|
|
10692
|
-
|
|
10693
|
-
BrandSelector.defaultProps = {
|
|
10694
|
-
itemRenderer: ItemRenderer,
|
|
10695
|
-
resultProcessor: function resultProcessor(result) {
|
|
10696
|
-
return result.data.data.luxity_brands;
|
|
10697
|
-
}
|
|
10698
|
-
};
|
|
10699
|
-
|
|
10700
11023
|
var StyleSelector = function StyleSelector(_ref) {
|
|
10701
11024
|
var onChange = _ref.onChange,
|
|
10702
11025
|
category = _ref.category,
|
|
@@ -10740,12 +11063,12 @@
|
|
|
10740
11063
|
}
|
|
10741
11064
|
};
|
|
10742
11065
|
|
|
10743
|
-
var _templateObject$
|
|
10744
|
-
var TitleWrapper = styled__default.div(_templateObject$
|
|
11066
|
+
var _templateObject$J, _templateObject2$8;
|
|
11067
|
+
var TitleWrapper = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteral(["\n display: flex;\n flex-flow: nowrap row;\n justify-content: space-between;\n margin-bottom: ", ";\n label {\n margin-bottom: 0;\n }\n"])), function (props) {
|
|
10745
11068
|
return props.theme.marginPaddings[4];
|
|
10746
11069
|
});
|
|
10747
11070
|
var onShoeSizeTypeChangeTimeout = 300;
|
|
10748
|
-
var ShoeSizeFadeContainer = styled__default.div(_templateObject2$
|
|
11071
|
+
var ShoeSizeFadeContainer = styled__default.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n transition: opacity ease-in-out ", "ms;\n opacity: ", ";\n .rc-slider-handle,\n .rc-slider-handle-2,\n .shoe-size-tooltip {\n transition: opacity ease-in-out ", "ms;\n opacity: ", ";\n }\n"])), onShoeSizeTypeChangeTimeout, function (props) {
|
|
10749
11072
|
return props.childVisible ? 1 : 0;
|
|
10750
11073
|
}, onShoeSizeTypeChangeTimeout, function (props) {
|
|
10751
11074
|
return props.childVisible ? 1 : 0;
|
|
@@ -10879,8 +11202,8 @@
|
|
|
10879
11202
|
}
|
|
10880
11203
|
};
|
|
10881
11204
|
|
|
10882
|
-
var _templateObject$
|
|
10883
|
-
var SelectionWrapper = styled__default.div(_templateObject$
|
|
11205
|
+
var _templateObject$K;
|
|
11206
|
+
var SelectionWrapper = styled__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteral(["\n display: flex;\n margin-left: calc(-1 * ", ");\n label {\n margin-bottom: ", ";\n flex-basis: calc(33.33% - ", ");\n margin-bottom: ", ";\n margin-left: ", ";\n }\n @media (max-width: ", ") {\n label {\n flex-basis: calc(50% - ", ");\n }\n }\n"])), function (props) {
|
|
10884
11207
|
return props.theme.marginPaddings[2];
|
|
10885
11208
|
}, function (props) {
|
|
10886
11209
|
return props.theme.marginPaddings[2];
|
|
@@ -10896,14 +11219,14 @@
|
|
|
10896
11219
|
|
|
10897
11220
|
var _excluded$7 = ["title", "checked", "renderIcon", "onChange", "checkedValue", "unCheckedValue"];
|
|
10898
11221
|
|
|
10899
|
-
var _templateObject$
|
|
10900
|
-
var Content = styled__default.div(_templateObject$
|
|
11222
|
+
var _templateObject$L, _templateObject2$9, _templateObject3$4;
|
|
11223
|
+
var Content = styled__default.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteral(["\n background-color: transparent;\n border: 1px solid ", ";\n transition: 200ms ease-in-out;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", ";\n cursor: pointer;\n"])), function (props) {
|
|
10901
11224
|
return props.theme.colors.primary;
|
|
10902
11225
|
}, function (props) {
|
|
10903
11226
|
return props.theme.marginPaddings[0];
|
|
10904
11227
|
});
|
|
10905
|
-
var InputText = styled__default.div(_templateObject2$
|
|
10906
|
-
var StyledLabel = styled__default.label(_templateObject3$
|
|
11228
|
+
var InputText = styled__default.div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n transition: 200ms ease-in;\n margin-left: auto;\n margin-right: auto;\n"])));
|
|
11229
|
+
var StyledLabel = styled__default.label(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n line-height: initial;\n display: block;\n box-sizing: border-box;\n transition: 200ms ease-in-out;\n text-align: center;\n\n &:hover ", " {\n color: ", ";\n }\n\n input {\n display: none;\n &:checked ~ ", " {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n\n &:checked ~ ", " ", " {\n color: ", ";\n }\n\n &:disabled ~ ", " {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n"])), InputText, function (props) {
|
|
10907
11230
|
return props.theme.colors.primary;
|
|
10908
11231
|
}, Content, function (props) {
|
|
10909
11232
|
return props.theme.colors.primary;
|
|
@@ -11062,23 +11385,93 @@
|
|
|
11062
11385
|
}));
|
|
11063
11386
|
});
|
|
11064
11387
|
|
|
11065
|
-
var
|
|
11388
|
+
var ModelSelector = function ModelSelector(_ref) {
|
|
11389
|
+
var onChange = _ref.onChange,
|
|
11390
|
+
brands = _ref.brands,
|
|
11391
|
+
graphApi = _ref.graphApi,
|
|
11392
|
+
getGraphQuery = _ref.getGraphQuery,
|
|
11393
|
+
resultProcessor = _ref.resultProcessor,
|
|
11394
|
+
requestInstance = _ref.requestInstance;
|
|
11395
|
+
return /*#__PURE__*/React__default.createElement(LuxityGraphQLDropdownSelector, {
|
|
11396
|
+
baseQueryLimit: 1000,
|
|
11397
|
+
title: "Models",
|
|
11398
|
+
queryId: "getModels",
|
|
11399
|
+
baseClass: "model-selector",
|
|
11400
|
+
identifier: "model-selector",
|
|
11401
|
+
query_arguments: brands,
|
|
11402
|
+
onChange: onChange,
|
|
11403
|
+
graphApi: graphApi,
|
|
11404
|
+
getGraphQuery: getGraphQuery,
|
|
11405
|
+
resultProcessor: resultProcessor,
|
|
11406
|
+
requestInstance: requestInstance
|
|
11407
|
+
});
|
|
11408
|
+
};
|
|
11409
|
+
|
|
11410
|
+
ModelSelector.defaultProps = {
|
|
11411
|
+
resultProcessor: function resultProcessor(result) {
|
|
11412
|
+
return result.data.data.luxity_models.data.map(function (_ref2) {
|
|
11413
|
+
var id = _ref2.id,
|
|
11414
|
+
name = _ref2.name;
|
|
11415
|
+
return {
|
|
11416
|
+
label: name,
|
|
11417
|
+
value: id
|
|
11418
|
+
};
|
|
11419
|
+
});
|
|
11420
|
+
}
|
|
11421
|
+
};
|
|
11422
|
+
|
|
11423
|
+
var MaterialSelector = function MaterialSelector(_ref) {
|
|
11424
|
+
var onChange = _ref.onChange,
|
|
11425
|
+
brands = _ref.brands,
|
|
11426
|
+
graphApi = _ref.graphApi,
|
|
11427
|
+
getGraphQuery = _ref.getGraphQuery,
|
|
11428
|
+
resultProcessor = _ref.resultProcessor,
|
|
11429
|
+
requestInstance = _ref.requestInstance;
|
|
11430
|
+
return /*#__PURE__*/React__default.createElement(LuxityGraphQLDropdownSelector, {
|
|
11431
|
+
baseQueryLimit: 1000,
|
|
11432
|
+
title: "Materials",
|
|
11433
|
+
queryId: "getMaterials",
|
|
11434
|
+
baseClass: "material-selector",
|
|
11435
|
+
identifier: "material-selector",
|
|
11436
|
+
query_arguments: brands,
|
|
11437
|
+
onChange: onChange,
|
|
11438
|
+
graphApi: graphApi,
|
|
11439
|
+
getGraphQuery: getGraphQuery,
|
|
11440
|
+
resultProcessor: resultProcessor,
|
|
11441
|
+
requestInstance: requestInstance
|
|
11442
|
+
});
|
|
11443
|
+
};
|
|
11444
|
+
|
|
11445
|
+
MaterialSelector.defaultProps = {
|
|
11446
|
+
resultProcessor: function resultProcessor(result) {
|
|
11447
|
+
return result.data.data.luxity_materials.data.map(function (_ref2) {
|
|
11448
|
+
var id = _ref2.id,
|
|
11449
|
+
name = _ref2.name;
|
|
11450
|
+
return {
|
|
11451
|
+
label: name,
|
|
11452
|
+
value: id
|
|
11453
|
+
};
|
|
11454
|
+
});
|
|
11455
|
+
}
|
|
11456
|
+
};
|
|
11457
|
+
|
|
11458
|
+
var _templateObject$M, _templateObject2$a, _templateObject3$5, _templateObject4$3, _templateObject5$1;
|
|
11066
11459
|
var UNISEX$1 = genders.UNISEX;
|
|
11067
|
-
var AddInterestContainer = styled__default.div(_templateObject$
|
|
11460
|
+
var AddInterestContainer = styled__default.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n border: 1px solid ", ";\n padding: ", ";\n"])), function (props) {
|
|
11068
11461
|
return props.theme.marginPaddings[6];
|
|
11069
11462
|
}, function (props) {
|
|
11070
11463
|
return props.theme.colors.borderColor;
|
|
11071
11464
|
}, function (props) {
|
|
11072
11465
|
return props.theme.marginPaddings[6];
|
|
11073
11466
|
});
|
|
11074
|
-
var SaveAndCancelButtonContainer = styled__default.div(_templateObject2$
|
|
11467
|
+
var SaveAndCancelButtonContainer = styled__default.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n margin-top: ", ";\n\n @media (max-width: ", ") {\n .fl-right__item {\n flex-direction: column;\n margin-right: 0;\n margin-left: ", ";\n }\n\n button {\n margin-bottom: ", ";\n }\n }\n"])), function (props) {
|
|
11075
11468
|
return props.theme.marginPaddings[6];
|
|
11076
11469
|
}, media.xs, function (props) {
|
|
11077
11470
|
return props.theme.marginPaddings[0];
|
|
11078
11471
|
}, function (props) {
|
|
11079
11472
|
return props.theme.marginPaddings[1];
|
|
11080
11473
|
});
|
|
11081
|
-
var CatSelectorParagraph = styled__default.div(_templateObject3$
|
|
11474
|
+
var CatSelectorParagraph = styled__default.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n font-weight: bold;\n color: ", ";\n margin-bottom: ", ";\n"])), function (props) {
|
|
11082
11475
|
return props.theme.colors.darkerGray;
|
|
11083
11476
|
}, function (props) {
|
|
11084
11477
|
return props.theme.marginPaddings[2];
|
|
@@ -11113,7 +11506,9 @@
|
|
|
11113
11506
|
styles: [],
|
|
11114
11507
|
gender: [],
|
|
11115
11508
|
request: _objectSpread2({}, request),
|
|
11116
|
-
isCategoriesShown: false
|
|
11509
|
+
isCategoriesShown: false,
|
|
11510
|
+
models: [],
|
|
11511
|
+
materials: []
|
|
11117
11512
|
};
|
|
11118
11513
|
/**
|
|
11119
11514
|
* Generates Interest UI and submits graph payloads as a highly specialised component
|
|
@@ -11167,7 +11562,7 @@
|
|
|
11167
11562
|
_defineProperty(_assertThisInitialized(_this), "onBrandsChanged", function (brandsArray) {
|
|
11168
11563
|
_this.setState({
|
|
11169
11564
|
brands: brandsArray.map(function (brand) {
|
|
11170
|
-
return brand.
|
|
11565
|
+
return brand.value;
|
|
11171
11566
|
})
|
|
11172
11567
|
});
|
|
11173
11568
|
});
|
|
@@ -11188,6 +11583,22 @@
|
|
|
11188
11583
|
});
|
|
11189
11584
|
});
|
|
11190
11585
|
|
|
11586
|
+
_defineProperty(_assertThisInitialized(_this), "onModelsChanged", function (modelsArray) {
|
|
11587
|
+
_this.setState({
|
|
11588
|
+
models: modelsArray.map(function (model) {
|
|
11589
|
+
return model.value;
|
|
11590
|
+
})
|
|
11591
|
+
});
|
|
11592
|
+
});
|
|
11593
|
+
|
|
11594
|
+
_defineProperty(_assertThisInitialized(_this), "onMaterialsChanged", function (materialsArray) {
|
|
11595
|
+
_this.setState({
|
|
11596
|
+
materials: materialsArray.map(function (material) {
|
|
11597
|
+
return material.value;
|
|
11598
|
+
})
|
|
11599
|
+
});
|
|
11600
|
+
});
|
|
11601
|
+
|
|
11191
11602
|
_defineProperty(_assertThisInitialized(_this), "payloadIsValid", function () {
|
|
11192
11603
|
// price/shoe-size always have initial values as soon as category is set
|
|
11193
11604
|
var category_type = _this.state.category_type;
|
|
@@ -11211,7 +11622,9 @@
|
|
|
11211
11622
|
styles = _this$state.styles,
|
|
11212
11623
|
category_type = _this$state.category_type,
|
|
11213
11624
|
requestState = _this$state.request,
|
|
11214
|
-
gender = _this$state.gender
|
|
11625
|
+
gender = _this$state.gender,
|
|
11626
|
+
models = _this$state.models,
|
|
11627
|
+
materials = _this$state.materials;
|
|
11215
11628
|
var payloadGender = gender[0];
|
|
11216
11629
|
|
|
11217
11630
|
if (gender.length > 1 || !gender.length) {
|
|
@@ -11225,7 +11638,9 @@
|
|
|
11225
11638
|
max_price: max_price,
|
|
11226
11639
|
styles: styles,
|
|
11227
11640
|
gender: payloadGender,
|
|
11228
|
-
request: requestState
|
|
11641
|
+
request: requestState,
|
|
11642
|
+
models: models,
|
|
11643
|
+
materials: materials
|
|
11229
11644
|
};
|
|
11230
11645
|
var shoeSizesPayload = category_type === interestCategories.SHOES ? {
|
|
11231
11646
|
min_shoe_size_id: min_shoe_size_id,
|
|
@@ -11282,14 +11697,17 @@
|
|
|
11282
11697
|
_defineProperty(_assertThisInitialized(_this), "render", function () {
|
|
11283
11698
|
var _this$state2 = _this.state,
|
|
11284
11699
|
category_type = _this$state2.category_type,
|
|
11285
|
-
fetching = _this$state2.request.fetching
|
|
11700
|
+
fetching = _this$state2.request.fetching,
|
|
11701
|
+
brands = _this$state2.brands;
|
|
11286
11702
|
var _this$props = _this.props,
|
|
11287
11703
|
requestInstance = _this$props.requestInstance,
|
|
11288
11704
|
baseGraphApi = _this$props.baseGraphApi,
|
|
11289
11705
|
getBrandsGraphQuery = _this$props.getBrandsGraphQuery,
|
|
11290
11706
|
getStylesGraphQuery = _this$props.getStylesGraphQuery,
|
|
11291
11707
|
getShoesGraphQuery = _this$props.getShoesGraphQuery,
|
|
11292
|
-
defaultShoeSizeType = _this$props.defaultShoeSizeType
|
|
11708
|
+
defaultShoeSizeType = _this$props.defaultShoeSizeType,
|
|
11709
|
+
getModelsGraphQuery = _this$props.getModelsGraphQuery,
|
|
11710
|
+
getMaterialsGraphQuery = _this$props.getMaterialsGraphQuery;
|
|
11293
11711
|
return /*#__PURE__*/React__default.createElement(React.Fragment, null, !_this.state.isCategoriesShown && /*#__PURE__*/React__default.createElement(AddInterestButtonContainer, {
|
|
11294
11712
|
onClick: _this.onAddInterestClick
|
|
11295
11713
|
}, /*#__PURE__*/React__default.createElement(AddInterestButton, null, "Add Interest"), /*#__PURE__*/React__default.createElement(AddIcon, {
|
|
@@ -11305,7 +11723,19 @@
|
|
|
11305
11723
|
requestInstance: requestInstance,
|
|
11306
11724
|
graphApi: "".concat(baseGraphApi, "?id=getBrands"),
|
|
11307
11725
|
getGraphQuery: getBrandsGraphQuery
|
|
11308
|
-
}),
|
|
11726
|
+
}), brands.length > 0 && /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(ModelSelector, {
|
|
11727
|
+
brands: brands,
|
|
11728
|
+
getGraphQuery: getModelsGraphQuery,
|
|
11729
|
+
graphApi: "".concat(baseGraphApi, "?id=getModels"),
|
|
11730
|
+
requestInstance: requestInstance,
|
|
11731
|
+
onChange: _this.onModelsChanged
|
|
11732
|
+
}), /*#__PURE__*/React__default.createElement(MaterialSelector, {
|
|
11733
|
+
brands: brands,
|
|
11734
|
+
getGraphQuery: getMaterialsGraphQuery,
|
|
11735
|
+
graphApi: "".concat(baseGraphApi, "?id=getMaterials"),
|
|
11736
|
+
requestInstance: requestInstance,
|
|
11737
|
+
onChange: _this.onMaterialsChanged
|
|
11738
|
+
})), category_type === interestCategories.SHOES && /*#__PURE__*/React__default.createElement(WrappedShoeSizeSelector, {
|
|
11309
11739
|
defaultShoeSizeType: defaultShoeSizeType,
|
|
11310
11740
|
getGraphQuery: getShoesGraphQuery,
|
|
11311
11741
|
graphApi: "".concat(baseGraphApi, "?id=shoeSizeQuery"),
|
|
@@ -11352,8 +11782,8 @@
|
|
|
11352
11782
|
|
|
11353
11783
|
var AddInterest$1 = themed(AddInterest);
|
|
11354
11784
|
|
|
11355
|
-
var _templateObject$
|
|
11356
|
-
var MyInterestTitleHeadingContainer = styled__default.div(_templateObject$
|
|
11785
|
+
var _templateObject$N;
|
|
11786
|
+
var MyInterestTitleHeadingContainer = styled__default.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n\n .heading-title-section {\n display: flex;\n justify-content: space-between;\n width: 95%;\n padding: ", ";\n }\n\n .heading-title {\n color: ", ";\n font-weight: bold;\n flex-basis: calc(100% / 6);\n margin-left: ", ";\n padding-bottom: 0;\n }\n\n .heading-title-empty {\n flex-basis: 5%;\n margin-left: 1rem;\n }\n\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (props) {
|
|
11357
11787
|
return props.theme.marginPaddings[0];
|
|
11358
11788
|
}, function (props) {
|
|
11359
11789
|
return props.theme.colors.primary;
|
|
@@ -11376,6 +11806,10 @@
|
|
|
11376
11806
|
className: "heading-title"
|
|
11377
11807
|
}, "Style"), /*#__PURE__*/React__default.createElement("div", {
|
|
11378
11808
|
className: "heading-title"
|
|
11809
|
+
}, "Models"), /*#__PURE__*/React__default.createElement("div", {
|
|
11810
|
+
className: "heading-title"
|
|
11811
|
+
}, "Materials"), /*#__PURE__*/React__default.createElement("div", {
|
|
11812
|
+
className: "heading-title"
|
|
11379
11813
|
}, "Shoe Size")), /*#__PURE__*/React__default.createElement("div", {
|
|
11380
11814
|
className: "heading-title-empty"
|
|
11381
11815
|
}));
|
|
@@ -11383,8 +11817,8 @@
|
|
|
11383
11817
|
|
|
11384
11818
|
var MyInterestTitleHeading$1 = themed(MyInterestTitleHeading);
|
|
11385
11819
|
|
|
11386
|
-
var _templateObject$
|
|
11387
|
-
var SvgWrapper$2 = styled__default.span(_templateObject$
|
|
11820
|
+
var _templateObject$O;
|
|
11821
|
+
var SvgWrapper$2 = styled__default.span(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n svg {\n path {\n fill: ", ";\n }\n }\n"])), function (props) {
|
|
11388
11822
|
return props.theme.colors.primary;
|
|
11389
11823
|
});
|
|
11390
11824
|
var AccountIcon = themed(function () {
|
|
@@ -11466,6 +11900,8 @@
|
|
|
11466
11900
|
getBrandsGraphQuery = _this$props2.getBrandsGraphQuery,
|
|
11467
11901
|
getStylesGraphQuery = _this$props2.getStylesGraphQuery,
|
|
11468
11902
|
getShoesGraphQuery = _this$props2.getShoesGraphQuery,
|
|
11903
|
+
getModelsGraphQuery = _this$props2.getModelsGraphQuery,
|
|
11904
|
+
getMaterialsGraphQuery = _this$props2.getMaterialsGraphQuery,
|
|
11469
11905
|
deleteInterestApi = _this$props2.deleteInterestApi,
|
|
11470
11906
|
setSchedule = _this$props2.setSchedule,
|
|
11471
11907
|
getSchedule = _this$props2.getSchedule,
|
|
@@ -11499,7 +11935,9 @@
|
|
|
11499
11935
|
getBrandsGraphQuery: getBrandsGraphQuery,
|
|
11500
11936
|
getStylesGraphQuery: getStylesGraphQuery,
|
|
11501
11937
|
getShoesGraphQuery: getShoesGraphQuery,
|
|
11502
|
-
defaultShoeSizeType: defaultShoeSizeType
|
|
11938
|
+
defaultShoeSizeType: defaultShoeSizeType,
|
|
11939
|
+
getModelsGraphQuery: getModelsGraphQuery,
|
|
11940
|
+
getMaterialsGraphQuery: getMaterialsGraphQuery
|
|
11503
11941
|
}), interests.length > 0 ? /*#__PURE__*/React__default.createElement(MyInterestTitleHeading$1, null) : '', /*#__PURE__*/React__default.createElement(LuxityPageReady, {
|
|
11504
11942
|
getRequestPromise: function getRequestPromise() {
|
|
11505
11943
|
return _this2.triggerInterestRequest();
|