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

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';
@@ -4037,12 +4037,9 @@ var ErrorTextWrapper = styled.div(templateObject_5 || (templateObject_5 = __make
 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; });
-var UPRNPageTitleRow = styled.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.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.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.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  font-size: 1.5em;\n"], ["\n  font-size: 1.5em;\n"])));
-styled.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.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;
@@ -4308,14 +4305,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 = 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 _h = useState(false), noResultsFound = _h[0], setNoResultsFound = _h[1];
     var handleSubmit = function (e) {
         e.preventDefault();
         var enteredPostcode = e.target.elements.postcode.value;
@@ -4384,7 +4383,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.
      */
@@ -4397,6 +4396,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) {
@@ -4409,13 +4414,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];
@@ -4423,12 +4430,15 @@ 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", isErrored: isError, maxLength: 10 }),
@@ -4436,16 +4446,21 @@ 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) }))),
+        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;
+            }
+            // 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 }))));
 };