@nnc-digital/nnc-design-system 0.4.15 → 0.4.17

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"])));
@@ -4342,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);
@@ -4433,16 +4442,51 @@ var BinCollection = function (_a) {
         setNoResultsFound(false);
     };
     var formatTitle = function (apiTitle) {
+        console.log(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;
@@ -4462,21 +4506,23 @@ var BinCollection = function (_a) {
         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) }))),
         noResultsFound && React__default["default"].createElement("p", null, "No results found."),
-        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;
+        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); });
+            var noResultsFound = sortedTitles.length === 0;
+            {
+                noResultsFound && React__default["default"].createElement("p", null, "No results found.");
             }
-            // 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' }))); })));
-        })),
+            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 }))));
 };
 
@@ -23211,8 +23257,9 @@ const AccessibleLinks = styled__default["default"].a`
 
 var AccessibleLink = function (_a) {
     var _b = _a.AccessibleLinksArray, AccessibleLinksArray = _b === void 0 ? null : _b;
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, AccessibleLinksArray && AccessibleLinksArray.map(function (link, i) {
-        return React__default["default"].createElement(AccessibleLinks, { key: 'accessible-link-' + i, href: link.url }, link.title);
+    return (React__default["default"].createElement("ul", null, AccessibleLinksArray && AccessibleLinksArray.map(function (link, i) {
+        return React__default["default"].createElement("li", { key: 'accessible-link-li-' + i },
+            React__default["default"].createElement(AccessibleLinks, { key: 'accessible-link-' + i, href: link.url }, link.title));
     })));
 };
 
@@ -23285,10 +23332,10 @@ const InnerContainer$1 = styled__default["default"].div`
 const BannerContentContainer = styled__default["default"].div`
   flex-grow: 1;
   padding-right: ${(props) => props.theme.theme_vars.spacingSizes.medium};
+  font-weight: bold;
 `;
 
 const BannerTitle = styled__default["default"].p`
-  font-weight: bold;
   margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
 `;
 
@@ -23304,6 +23351,7 @@ const HideLink = styled__default["default"].button`
   background: none;
   cursor: pointer;
   flex-grow: 0;
+  font-weight: bold;
 
   &:focus {
     outline: none;