@nnc-digital/nnc-design-system 0.4.14 → 0.4.16

package/build/index.js

@@ -4049,7 +4049,7 @@ var FormContainer$1 = styled__default["default"].div(templateObject_4 || (templa
     return props.isLoading && "\n          opacity: 0.5; \n          pointer-events: none;\n      ";
 });
 var ErrorTextWrapper = styled__default["default"].div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  width: 100%;\n"], ["\n  display: block;\n  width: 100%;\n"])));
-var DropDownSelectContainer = styled__default["default"].div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  padding-bottom: 20px;\n"], ["\n  padding-bottom: 20px;\n"])));
+var DropDownSelectContainer = styled__default["default"].div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  padding-bottom: 20px;\n  width: 90%;\n"], ["\n  padding-bottom: 20px;\n  width: 90%;\n"])));
 var FormInnerContainer = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n"])));
 styled__default["default"].label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n"])), function (props) { return props.theme.theme_vars.spacingSizes.small; });
 styled__default["default"].div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: left;\n  margin-bottom: .5em;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: left;\n  margin-bottom: .5em;\n  width: 100%;\n"])));
@@ -4329,6 +4329,7 @@ var BinCollection = function (_a) {
     var _f = React.useState(''), errorText = _f[0], setErrorText = _f[1];
     var _g = React.useState([]), addressOptions = _g[0], setAddressOptions = _g[1];
     var seenTitles = React.useRef(new Set());
+    var _h = React.useState(false), noResultsFound = _h[0], setNoResultsFound = _h[1];
     var handleSubmit = function (e) {
         e.preventDefault();
         var enteredPostcode = e.target.elements.postcode.value;
@@ -4341,14 +4342,23 @@ var BinCollection = function (_a) {
             fetchAddresses(enteredPostcode);
         }
     };
+    var formatUKPostcode = function (postcode) {
+        // Remove existing spaces and convert to uppercase
+        var cleaned = postcode.replace(/\s/g, '').toUpperCase();
+        // Add space before the last 3 characters
+        var formatted = cleaned.slice(0, -3) + " " + cleaned.slice(-3);
+        return formatted;
+    };
     /**
      * Returns an array of address options based on the entered postcode.
      */
     var fetchAddresses = function (postcode) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
+            setCalendarEvents({});
             setError(false);
             setErrorText('');
             setIsLoading(true);
+            postcode = formatUKPostcode(postcode);
             axios__default["default"].get("".concat(BinCollectionApiUrl).concat(postcode))
                 .then(function (response) {
                 setIsLoading(false);
@@ -4397,7 +4407,7 @@ var BinCollection = function (_a) {
             return acc;
         }, {});
     };
-    var _h = React.useState({}), calendarEvents = _h[0], setCalendarEvents = _h[1];
+    var _j = React.useState({}), calendarEvents = _j[0], setCalendarEvents = _j[1];
     /**
      * Returns an array of calendar events based on selected address for next 42 days.
      */
@@ -4410,6 +4420,12 @@ var BinCollection = function (_a) {
             axios__default["default"].get("".concat(CalendarEventsApiUrl).concat(selectedUPRN, "/").concat(startDate, "/").concat(endDate))
                 .then(function (response) {
                 var groupedData = groupByTitle(response.data);
+                if (Object.keys(groupedData).length === 0) {
+                    setNoResultsFound(true);
+                }
+                else {
+                    setNoResultsFound(false);
+                }
                 setCalendarEvents(groupedData);
             })
                 .catch(function (error) {
@@ -4423,18 +4439,53 @@ var BinCollection = function (_a) {
         setError(false);
         setErrorText('');
         seenTitles.current.clear();
+        setNoResultsFound(false);
     };
     var formatTitle = function (apiTitle) {
         var mappings = [
-            { keyword: 'Refuse', replacement: 'General refuse bin' },
-            { keyword: 'Recycling', replacement: 'Recycling bin' },
-            { keyword: 'Garden', replacement: 'Garden bin' },
-            { keyword: 'Food', replacement: 'Food caddy' },
+            {
+                keyword: 'Refuse',
+                replacement: 'General refuse bin',
+                allowedValues: [
+                    'Refuse bin 1100l', 'Refuse bin 140l', 'Refuse bin 180l',
+                    'Refuse bin 240l', 'Refuse bin 360l', 'Refuse bin 660l',
+                    'Refuse Chamberlain', 'Refuse Palladin', 'Authorised bin (larger h/hold) 120l',
+                    'Authorised bin (larger h/hold) 140l', 'Authorised bin (larger h/hold) 180l',
+                    'Authorised bin (offensive) 140l', 'Authorised bin (offensive) 180l', 'Authorised bin (offensive) 240l',
+                ]
+            },
+            {
+                keyword: 'Recycling',
+                replacement: 'Recycling bin',
+                allowedValues: [
+                    'Recycling 1100l', 'Recycling 140l', 'Recycling 180l',
+                    'Recycling 240l', 'Recycling bin 1100l'
+                ]
+            },
+            {
+                keyword: 'Garden',
+                replacement: 'Garden bin',
+                allowedValues: [
+                    'Garden 140l', 'Garden 180l', 'Garden 240l'
+                ]
+            },
+            {
+                keyword: 'Food',
+                replacement: 'Food caddy',
+                allowedValues: [
+                    'Communal food bin (exterior) 180L',
+                    'Food Caddy (exterior) 23l',
+                    'Food Caddy (indoor) 5l'
+                ]
+            },
         ];
         for (var _i = 0, mappings_1 = mappings; _i < mappings_1.length; _i++) {
             var mapping = mappings_1[_i];
-            if (apiTitle.includes(mapping.keyword)) {
-                return mapping.replacement;
+            for (var _a = 0, _b = mapping.allowedValues; _a < _b.length; _a++) {
+                var value = _b[_a];
+                if (apiTitle.includes(value)) {
+                    return mapping.replacement;
+                }
             }
         }
         return null;
@@ -4453,21 +4504,20 @@ var BinCollection = function (_a) {
                         React__default["default"].createElement(FormButton, { size: "large", type: "submit", "aria-label": "Submit", text: "Find" }))))),
         addressOptions.length > 0 && (React__default["default"].createElement(DropDownSelectContainer, null,
             React__default["default"].createElement(DropDownSelect, { onChange: handleAddressChange, id: "address", label: "Select your address", options: __spreadArray([{ title: 'Select an address', value: '' }], addressOptions, true) }))),
-        React__default["default"].createElement("div", null, Object.entries(calendarEvents).map(function (_a) {
-            var apiTitle = _a[0], dates = _a[1];
-            var title = formatTitle(apiTitle);
-            // If we've seen this title before, or if title is null, we skip rendering it
-            if (seenTitles.current.has(title) || title === null) {
-                return null;
-            }
-            // Mark the title as seen
-            seenTitles.current.add(title);
-            return (React__default["default"].createElement(React__default["default"].Fragment, { key: title },
-                React__default["default"].createElement(Heading, { level: 3, text: title }),
-                dates
-                    .sort(function (a, b) { return new Date(a).getTime() - new Date(b).getTime(); })
-                    .map(function (date) { return (React__default["default"].createElement("p", null, date.toLocaleDateString('en-GB', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }))); })));
-        })),
+        noResultsFound && React__default["default"].createElement("p", null, "No results found."),
+        React__default["default"].createElement("div", null, (function () {
+            var order = ['General refuse bin', 'Recycling bin', 'Garden bin', 'Food caddy'];
+            var uniqueTitles = Array.from(new Set(Object.keys(calendarEvents).map(function (apiTitle) { return formatTitle(apiTitle); }).filter(function (title) { return title !== null; })));
+            var sortedTitles = uniqueTitles.sort(function (a, b) { return order.indexOf(a) - order.indexOf(b); });
+            return sortedTitles.map(function (title, index) {
+                var apiTitlesForThisType = Object.keys(calendarEvents).filter(function (apiTitle) { return formatTitle(apiTitle) === title; });
+                return (React__default["default"].createElement(React__default["default"].Fragment, { key: "".concat(title, "-").concat(index) },
+                    React__default["default"].createElement(Heading, { level: 3, text: title }),
+                    apiTitlesForThisType.flatMap(function (apiTitle) { return calendarEvents[apiTitle]; })
+                        .sort(function (a, b) { return new Date(a).getTime() - new Date(b).getTime(); })
+                        .map(function (date) { return (React__default["default"].createElement("p", null, date.toLocaleDateString('en-GB', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }))); })));
+            });
+        })()),
         Object.keys(calendarEvents).length > 0 && (React__default["default"].createElement(FormButton, { size: "small", type: "button", "aria-label": "Reset", text: "Find a different address", onClick: resetForm }))));
 };