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

package/build/index.esm.js

@@ -1,4 +1,4 @@
-import React, { Component, cloneElement, useState, useContext, useEffect, useId, useRef, createContext } from 'react';
+import React, { Component, cloneElement, useState, useContext, useEffect, useRef, useId, createContext } from 'react';
 import styled, { css, ThemeContext, ThemeProvider, createGlobalStyle } from 'styled-components';
 import axios from 'axios';
 import require$$0 from 'tty';
@@ -4033,15 +4033,13 @@ var BinCollectionButtonStyles = styled.div(templateObject_3 || (templateObject_3
 var FormContainer$1 = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  ", "\n"])), function (props) {
     return props.isLoading && "\n          opacity: 0.5; \n          pointer-events: none;\n      ";
 });
-var DropDownSelectContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding-bottom: 20px;\n"], ["\n  padding-bottom: 20px;\n"])));
-var FormInnerContainer = styled.div(templateObject_6 || (templateObject_6 = __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_7 || (templateObject_7 = __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; });
-var UPRNPageTitleRow = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  justify-content: center;\n  margin-bottom: 1em;\n  margin-top: 2em;\n  width: 100%;\n"], ["\n  justify-content: center;\n  margin-bottom: 1em;\n  margin-top: 2em;\n  width: 100%;\n"])));
-var UPRNPageUPRNRow = 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"])));
-var UPRNPageSectionTitle = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  font-size: 2em;\n  font-weight: 700;\n"], ["\n  font-size: 2em;\n  font-weight: 700;\n"])));
-var UPRNPageUPRNTitle = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-size: 1.5em;\n"], ["\n  font-size: 1.5em;\n"])));
-styled.input(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
+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 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"])));
+styled.input(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
 
 const Container$16 = styled.div`
   display: flex;
@@ -4307,14 +4305,15 @@ var Heading = function (_a) {
  * Returns the Bin Collection Checker form component to conduct search by postcode.
  */
 var BinCollection = function (_a) {
-    var _b = _a.formError, formError = _b === void 0 ? false : _b, _c = _a.baseUrl, baseUrl = _c === void 0 ? process.env.NEXT_PUBLIC_DRUPAL_APP_API_BASE_URL : _c;
-    var BinCollectionApiUrl = "".concat(baseUrl, "bin-collection-search/premiselist/");
-    var CalendarEventsApiUrl = "".concat(baseUrl, "bin-collection-search/calendarevents/");
+    var _b = _a.formError, formError = _b === void 0 ? false : _b, _c = _a.graphqlApiEndpoint, graphqlApiEndpoint = _c === void 0 ? process.env.NEXT_PUBLIC_DRUPAL_APP_API_BASE_URL : _c;
+    var BinCollectionApiUrl = "".concat(graphqlApiEndpoint, "bin-collection-search/premiselist/");
+    var CalendarEventsApiUrl = "".concat(graphqlApiEndpoint, "bin-collection-search/calendarevents/");
     var themeContext = useContext(ThemeContext);
     var _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
     var _e = useState(formError), isError = _e[0], setError = _e[1];
     var _f = useState(''), errorText = _f[0], setErrorText = _f[1];
     var _g = useState([]), addressOptions = _g[0], setAddressOptions = _g[1];
+    var seenTitles = useRef(new Set());
     var handleSubmit = function (e) {
         e.preventDefault();
         var enteredPostcode = e.target.elements.postcode.value;
@@ -4332,13 +4331,22 @@ var BinCollection = function (_a) {
      */
     var fetchAddresses = function (postcode) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
+            setError(false);
+            setErrorText('');
+            setIsLoading(true);
             axios.get("".concat(BinCollectionApiUrl).concat(postcode))
                 .then(function (response) {
                 setIsLoading(false);
+                // Check if there are any addresses returned
+                if (response.data.data.length === 0) {
+                    setError(true);
+                    setErrorText('No addresses found for the provided postcode.');
+                    return;
+                }
                 // Transform the response data into the expected format
                 var transformedAddresses = response.data.data.map(function (item) { return ({
                     value: item.UPRN,
-                    title: "".concat(item.Address, ", ").concat(item.Locality, ", ").concat(item.Town)
+                    title: "".concat(item.Address)
                 }); });
                 setAddressOptions(transformedAddresses);
             })
@@ -4399,13 +4407,14 @@ var BinCollection = function (_a) {
         setCalendarEvents({});
         setError(false);
         setErrorText('');
+        seenTitles.current.clear();
     };
     var formatTitle = function (apiTitle) {
         var mappings = [
-            { keyword: 'Bin Refuse bin', replacement: 'Refuse bin' },
-            { keyword: 'Bin Recycling', replacement: 'Recycling bin' },
-            { keyword: 'Recycling Paper Box', replacement: 'Recycling Paper Box bin' },
-            { keyword: 'Garden', replacement: 'Garden bin' }
+            { keyword: 'Refuse', replacement: 'General refuse bin' },
+            { keyword: 'Recycling', replacement: 'Recycling bin' },
+            { keyword: 'Garden', replacement: 'Garden bin' },
+            { keyword: 'Food', replacement: 'Food caddy' },
         ];
         for (var _i = 0, mappings_1 = mappings; _i < mappings_1.length; _i++) {
             var mapping = mappings_1[_i];
@@ -4413,14 +4422,18 @@ var BinCollection = function (_a) {
                 return mapping.replacement;
             }
         }
-        return apiTitle;
+        return null;
     };
+    useEffect(function () {
+        seenTitles.current.clear();
+    }, [calendarEvents]);
     return (React.createElement(Container$17, { "data-testid": "BinCollection" },
         React.createElement(FormWithLine, { onSubmit: handleSubmit, isError: isError, lineColour: themeContext.theme_vars.colours.grey_dark, hideLine: true },
             React.createElement(FormContainer$1, { isLoading: isLoading },
-                React.createElement(Heading, { level: 2, text: "Bin Collection Checker" }),
+                React.createElement(Heading, { level: 2, text: "Bin collection checker" }),
+                React.createElement(ErrorTextWrapper, null, errorText && React.createElement(ErrorText$1, null, errorText)),
                 React.createElement(FormInnerContainer, null,
-                    React.createElement(Input$6, { type: "text", placeholder: "Enter a postcode", name: "postcode", errorText: errorText, isErrored: isError, maxLength: 10 }),
+                    React.createElement(Input$6, { type: "text", placeholder: "Enter a postcode", name: "postcode", isErrored: isError, maxLength: 10 }),
                     React.createElement(BinCollectionButtonStyles, null,
                         React.createElement(FormButton, { size: "large", type: "submit", "aria-label": "Submit", text: "Find" }))))),
         addressOptions.length > 0 && (React.createElement(DropDownSelectContainer, null,
@@ -4428,13 +4441,17 @@ var BinCollection = function (_a) {
         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(UPRNPageTitleRow, null,
-                    React.createElement(UPRNPageSectionTitle, null, 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(UPRNPageUPRNRow, { key: "".concat(title, "-").concat(date.toString()) },
-                    React.createElement(UPRNPageUPRNTitle, null, date.toLocaleDateString('en-GB', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })))); })));
+                    .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 }))));
 };