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

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"])));
@@ -4327,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);
@@ -4418,16 +4427,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;
@@ -4447,21 +4491,23 @@ var BinCollection = function (_a) {
         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) }))),
         noResultsFound && React.createElement("p", null, "No results found."),
-        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;
+        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); });
+            var noResultsFound = sortedTitles.length === 0;
+            {
+                noResultsFound && React.createElement("p", null, "No results found.");
             }
-            // 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' }))); })));
-        })),
+            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 }))));
 };
 
@@ -23196,8 +23242,9 @@ const AccessibleLinks = styled.a`
 
 var AccessibleLink = function (_a) {
     var _b = _a.AccessibleLinksArray, AccessibleLinksArray = _b === void 0 ? null : _b;
-    return (React.createElement(React.Fragment, null, AccessibleLinksArray && AccessibleLinksArray.map(function (link, i) {
-        return React.createElement(AccessibleLinks, { key: 'accessible-link-' + i, href: link.url }, link.title);
+    return (React.createElement("ul", null, AccessibleLinksArray && AccessibleLinksArray.map(function (link, i) {
+        return React.createElement("li", { key: 'accessible-link-li-' + i },
+            React.createElement(AccessibleLinks, { key: 'accessible-link-' + i, href: link.url }, link.title));
     })));
 };
 
@@ -23270,10 +23317,10 @@ const InnerContainer$1 = styled.div`
 const BannerContentContainer = styled.div`
   flex-grow: 1;
   padding-right: ${(props) => props.theme.theme_vars.spacingSizes.medium};
+  font-weight: bold;
 `;
 
 const BannerTitle = styled.p`
-  font-weight: bold;
   margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
 `;
 
@@ -23289,6 +23336,7 @@ const HideLink = styled.button`
   background: none;
   cursor: pointer;
   flex-grow: 0;
+  font-weight: bold;
 
   &:focus {
     outline: none;