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

package/build/index.esm.js

@@ -4034,7 +4034,7 @@ var FormContainer$1 = styled.div(templateObject_4 || (templateObject_4 = __makeT
     return props.isLoading && "\n          opacity: 0.5; \n          pointer-events: none;\n      ";
 });
 var ErrorTextWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  width: 100%;\n"], ["\n  display: block;\n  width: 100%;\n"])));
-var DropDownSelectContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  padding-bottom: 20px;\n"], ["\n  padding-bottom: 20px;\n"])));
+var DropDownSelectContainer = styled.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.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.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.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"])));
@@ -4314,6 +4314,7 @@ var BinCollection = function (_a) {
     var _f = useState(''), errorText = _f[0], setErrorText = _f[1];
     var _g = useState([]), addressOptions = _g[0], setAddressOptions = _g[1];
     var seenTitles = useRef(new Set());
+    var _h = useState(false), noResultsFound = _h[0], setNoResultsFound = _h[1];
     var handleSubmit = function (e) {
         e.preventDefault();
         var enteredPostcode = e.target.elements.postcode.value;
@@ -4326,14 +4327,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.get("".concat(BinCollectionApiUrl).concat(postcode))
                 .then(function (response) {
                 setIsLoading(false);
@@ -4382,7 +4392,7 @@ var BinCollection = function (_a) {
             return acc;
         }, {});
     };
-    var _h = useState({}), calendarEvents = _h[0], setCalendarEvents = _h[1];
+    var _j = useState({}), calendarEvents = _j[0], setCalendarEvents = _j[1];
     /**
      * Returns an array of calendar events based on selected address for next 42 days.
      */
@@ -4395,6 +4405,12 @@ var BinCollection = function (_a) {
             axios.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) {
@@ -4408,18 +4424,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;
@@ -4438,21 +4489,20 @@ var BinCollection = function (_a) {
                         React.createElement(FormButton, { size: "large", type: "submit", "aria-label": "Submit", text: "Find" }))))),
         addressOptions.length > 0 && (React.createElement(DropDownSelectContainer, null,
             React.createElement(DropDownSelect, { onChange: handleAddressChange, id: "address", label: "Select your address", options: __spreadArray([{ title: 'Select an address', value: '' }], addressOptions, true) }))),
-        React.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.createElement(React.Fragment, { key: title },
-                React.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.createElement("p", null, date.toLocaleDateString('en-GB', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }))); })));
-        })),
+        noResultsFound && React.createElement("p", null, "No results found."),
+        React.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.createElement(React.Fragment, { key: "".concat(title, "-").concat(index) },
+                    React.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.createElement("p", null, date.toLocaleDateString('en-GB', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }))); })));
+            });
+        })()),
         Object.keys(calendarEvents).length > 0 && (React.createElement(FormButton, { size: "small", type: "button", "aria-label": "Reset", text: "Find a different address", onClick: resetForm }))));
 };