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

package/build/index.js

@@ -4052,12 +4052,9 @@ var ErrorTextWrapper = styled__default["default"].div(templateObject_5 || (templ
 var DropDownSelectContainer = styled__default["default"].div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  padding-bottom: 20px;\n"], ["\n  padding-bottom: 20px;\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; });
-var UPRNPageTitleRow = styled__default["default"].div(templateObject_9 || (templateObject_9 = __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__default["default"].div(templateObject_10 || (templateObject_10 = __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__default["default"].div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-size: 2em;\n  font-weight: 700;\n"], ["\n  font-size: 2em;\n  font-weight: 700;\n"])));
-var UPRNPageUPRNTitle = styled__default["default"].div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  font-size: 1.5em;\n"], ["\n  font-size: 1.5em;\n"])));
-styled__default["default"].input(templateObject_13 || (templateObject_13 = __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, templateObject_13;
+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"])));
+styled__default["default"].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__default["default"].div`
   display: flex;
@@ -4323,14 +4320,16 @@ 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 = React.useContext(styled.ThemeContext);
     var _d = React.useState(false), isLoading = _d[0], setIsLoading = _d[1];
     var _e = React.useState(formError), isError = _e[0], setError = _e[1];
     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;
@@ -4399,7 +4398,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.
      */
@@ -4412,6 +4411,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) {
@@ -4424,13 +4429,15 @@ var BinCollection = function (_a) {
         setCalendarEvents({});
         setError(false);
         setErrorText('');
+        seenTitles.current.clear();
+        setNoResultsFound(false);
     };
     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];
@@ -4438,12 +4445,15 @@ var BinCollection = function (_a) {
                 return mapping.replacement;
             }
         }
-        return apiTitle;
+        return null;
     };
+    React.useEffect(function () {
+        seenTitles.current.clear();
+    }, [calendarEvents]);
     return (React__default["default"].createElement(Container$17, { "data-testid": "BinCollection" },
         React__default["default"].createElement(FormWithLine, { onSubmit: handleSubmit, isError: isError, lineColour: themeContext.theme_vars.colours.grey_dark, hideLine: true },
             React__default["default"].createElement(FormContainer$1, { isLoading: isLoading },
-                React__default["default"].createElement(Heading, { level: 2, text: "Bin Collection Checker" }),
+                React__default["default"].createElement(Heading, { level: 2, text: "Bin collection checker" }),
                 React__default["default"].createElement(ErrorTextWrapper, null, errorText && React__default["default"].createElement(ErrorText$1, null, errorText)),
                 React__default["default"].createElement(FormInnerContainer, null,
                     React__default["default"].createElement(Input$6, { type: "text", placeholder: "Enter a postcode", name: "postcode", isErrored: isError, maxLength: 10 }),
@@ -4451,16 +4461,21 @@ 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) }))),
+        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;
+            }
+            // Mark the title as seen
+            seenTitles.current.add(title);
             return (React__default["default"].createElement(React__default["default"].Fragment, { key: title },
-                React__default["default"].createElement(UPRNPageTitleRow, null,
-                    React__default["default"].createElement(UPRNPageSectionTitle, null, 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(UPRNPageUPRNRow, { key: "".concat(title, "-").concat(date.toString()) },
-                    React__default["default"].createElement(UPRNPageUPRNTitle, null, date.toLocaleDateString('en-GB', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })))); })));
+                    .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 }))));
 };