@sok-brand-sites/common-frontend-components 0.0.1-security → 1.643.1

package/dist/components/PlaceOfBusiness/OpeningHours/OpeningHours.styles.js

@@ -0,0 +1,68 @@
+import { __makeTemplateObject } from '../../../_virtual/_tslib.js';
+import styled, { css } from 'styled-components';
+var OpeningHoursContainer = styled.div.withConfig({
+  displayName: "OpeningHoursstyles__OpeningHoursContainer",
+  componentId: "sc-9qb51m-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  row-gap: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  row-gap: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing20;
+});
+var ButtonsContainer = styled.div.withConfig({
+  displayName: "OpeningHoursstyles__ButtonsContainer",
+  componentId: "sc-9qb51m-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  column-gap: ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  column-gap: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing12;
+});
+var Button = styled.button.withConfig({
+  displayName: "OpeningHoursstyles__Button",
+  componentId: "sc-9qb51m-2"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: none;\n  background: transparent;\n  cursor: pointer;\n\n  color: ", ";\n  :hover {\n    color: ", ";\n  }\n\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n\n  ", "\n"], ["\n  border: none;\n  background: transparent;\n  cursor: pointer;\n\n  color: ", ";\n  :hover {\n    color: ", ";\n  }\n\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.openingHours.button.textColor;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.openingHours.button.hoverColor;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.openingHours.button.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.openingHours.button.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.openingHours.button.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.openingHours.button.fontSizes.mobile.lineHeight;
+}, function (_a) {
+  var active = _a.active;
+  return active && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: ", ";\n\n      :hover {\n        color: ", ";\n      }\n      cursor: unset;\n    "], ["\n      color: ", ";\n\n      :hover {\n        color: ", ";\n      }\n      cursor: unset;\n    "])), function (_a) {
+    var theme = _a.theme;
+    return theme.components.placeOfBusiness.openingHours.button.activeColor;
+  }, function (_a) {
+    var theme = _a.theme;
+    return theme.components.placeOfBusiness.openingHours.button.activeColor;
+  });
+});
+var OpeningHoursList = styled.dl.withConfig({
+  displayName: "OpeningHoursstyles__OpeningHoursList",
+  componentId: "sc-9qb51m-3"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  row-gap: ", ";\n  width: 300px;\n  margin: 0;\n"], ["\n  display: flex;\n  flex-direction: column;\n  row-gap: ", ";\n  width: 300px;\n  margin: 0;\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing8;
+});
+var HoursRow = styled.div.withConfig({
+  displayName: "OpeningHoursstyles__HoursRow",
+  componentId: "sc-9qb51m-4"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n"], ["\n  display: flex;\n  flex-direction: row;\n"])));
+var Day = styled.dt.withConfig({
+  displayName: "OpeningHoursstyles__Day",
+  componentId: "sc-9qb51m-5"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex-basis: 20%;\n"], ["\n  display: flex;\n  flex-basis: 20%;\n"])));
+var Hours = styled.dd.withConfig({
+  displayName: "OpeningHoursstyles__Hours",
+  componentId: "sc-9qb51m-6"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin-inline-start: 0;\n  display: flex;\n  flex-direction: column;\n"], ["\n  margin-inline-start: 0;\n  display: flex;\n  flex-direction: column;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+export { Button, ButtonsContainer, Day, Hours, HoursRow, OpeningHoursContainer, OpeningHoursList };

package/dist/components/PlaceOfBusiness/PlaceOfBusinessInfo/PlaceOfBusinessInfo.js

@@ -0,0 +1,125 @@
+import { __read, __awaiter, __generator } from '../../../_virtual/_tslib.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { PlaceOfBusinessInfoContainer, FlexContainer, FlexColumnContainer } from './PlaceOfBusinessInfo.styles.js';
+import OpenToday from '../OpenToday/OpenToday.js';
+import LogoTitle from '../LogoTitle/LogoTitle.js';
+import OpeningHours from '../OpeningHours/OpeningHours.js';
+import ContactInformation from '../ContactInformation/ContactInformation.js';
+import SocialMediaLinks from '../../SocialMediaLinks/SocialMediaLinks.js';
+import Services from '../Services/Services.js';
+import translationJSON from '../../../locales/translations.json.js';
+import axios from 'axios';
+
+var PlaceOfBusinessInfo = function PlaceOfBusinessInfo(_a) {
+  var _b, _c;
+
+  var laariId = _a.laariId,
+      endpoint = _a.endpoint,
+      lang = _a.lang;
+
+  var _d = __read(useState(), 2),
+      data = _d[0],
+      setData = _d[1];
+
+  var _e = __read(useState(true), 2),
+      loading = _e[0],
+      setLoading = _e[1];
+
+  var _f = __read(useState(false), 2),
+      error = _f[0],
+      setError = _f[1];
+
+  useEffect(function () {
+    var fetchData = function fetchData() {
+      return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              _a.trys.push([0, 2,, 3]);
+
+              return [4
+              /*yield*/
+              , axios.get(endpoint + "/pobs/" + laariId + "?lang=" + lang.toLowerCase())];
+
+            case 1:
+              response = _a.sent();
+
+              if (response === null || response === void 0 ? void 0 : response.data) {
+                setData(response.data);
+                setLoading(false);
+              } else {
+                setError(true);
+              }
+
+              return [3
+              /*break*/
+              , 3];
+
+            case 2:
+              _a.sent();
+
+              setError(true);
+              return [3
+              /*break*/
+              , 3];
+
+            case 3:
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    };
+
+    fetchData();
+  }, []);
+  var socialMediaLinks = (_b = data === null || data === void 0 ? void 0 : data.links) === null || _b === void 0 ? void 0 : _b.reduce(function (obj, link) {
+    if (link.category === 'SOME') {
+      // @ts-ignore
+      obj[link.type] = link.url;
+    }
+
+    return obj;
+  }, {});
+  return jsxs(Fragment, {
+    children: [error && jsx("p", {
+      children: translationJSON.placeOfBusiness.error[lang]
+    }, void 0), !loading && !error && jsxs(PlaceOfBusinessInfoContainer, {
+      children: [jsx(LogoTitle, {
+        name: data === null || data === void 0 ? void 0 : data.name,
+        logoUrl: (_c = data === null || data === void 0 ? void 0 : data.media) === null || _c === void 0 ? void 0 : _c.logoCircle.svg
+      }, void 0), jsxs(FlexContainer, {
+        children: [(data === null || data === void 0 ? void 0 : data.weeklyOpeningTimes) && jsxs(FlexColumnContainer, {
+          children: [jsx(OpenToday, {
+            weeklyOpeningTimes: data === null || data === void 0 ? void 0 : data.weeklyOpeningTimes,
+            lang: lang,
+            large: true
+          }, void 0), jsx(OpeningHours, {
+            weeklyOpeningTimes: data === null || data === void 0 ? void 0 : data.weeklyOpeningTimes,
+            lang: lang
+          }, void 0)]
+        }, void 0), jsxs(FlexColumnContainer, {
+          children: [jsx(ContactInformation, {
+            location: data === null || data === void 0 ? void 0 : data.location,
+            contactInfo: data === null || data === void 0 ? void 0 : data.contactInfo,
+            website: data === null || data === void 0 ? void 0 : data.website,
+            lang: lang
+          }, void 0), socialMediaLinks && jsx(SocialMediaLinks, {
+            socialMediaLinks: socialMediaLinks,
+            defaultColors: true
+          }, void 0)]
+        }, void 0)]
+      }, void 0), (data === null || data === void 0 ? void 0 : data.description) && jsx("p", {
+        children: data.description
+      }, void 0), jsx(Services, {
+        services: data === null || data === void 0 ? void 0 : data.services,
+        lang: lang
+      }, void 0)]
+    }, void 0)]
+  }, void 0);
+};
+
+export { PlaceOfBusinessInfo, PlaceOfBusinessInfo as default };

package/dist/components/PlaceOfBusiness/PlaceOfBusinessInfo/PlaceOfBusinessInfo.styles.js

@@ -0,0 +1,32 @@
+import { __makeTemplateObject } from '../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+import media from '../../../styles/media.js';
+var PlaceOfBusinessInfoContainer = styled.div.withConfig({
+  displayName: "PlaceOfBusinessInfostyles__PlaceOfBusinessInfoContainer",
+  componentId: "sc-94l050-0"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  row-gap: ", ";\n  max-width: 768px;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  row-gap: ", ";\n  max-width: 768px;\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}, media.desktop(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    row-gap: ", ";\n  "], ["\n    row-gap: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing64;
+}));
+var FlexContainer = styled.div.withConfig({
+  displayName: "PlaceOfBusinessInfostyles__FlexContainer",
+  componentId: "sc-94l050-1"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  column-gap: ", ";\n  row-gap: ", ";\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  column-gap: ", ";\n  row-gap: ", ";\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing64;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}, media.tablet(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n  "], ["\n    flex-direction: row;\n  "]))));
+var FlexColumnContainer = styled.div.withConfig({
+  displayName: "PlaceOfBusinessInfostyles__FlexColumnContainer",
+  componentId: "sc-94l050-2"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  row-gap: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  row-gap: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+export { FlexColumnContainer, FlexContainer, PlaceOfBusinessInfoContainer };

package/dist/components/PlaceOfBusiness/PlaceOfBusinessListItem/PlaceOfBusinessListItem.js

@@ -0,0 +1,85 @@
+import { __assign } from '../../../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { getUrl } from '../utils.js';
+import translationJSON from '../../../locales/translations.json.js';
+import { PlaceOfBusinessListItemContainer, LogoTitleContainer, Logo, LocationLinkContainer, LocationLinkText, ContactInfoContainer, ContactInfo, ContactInfoLabel, StyledLink, OpeningTimesContainer } from './PlaceOfBusinessListItem.styles.js';
+import { icons } from '../../../assets/icons/Icons.js';
+import OpenToday from '../OpenToday/OpenToday.js';
+import { parseInternalLink } from '../../utils.js';
+
+var PlaceOfBusinessListItem = function PlaceOfBusinessListItem(_a) {
+  var _b, _c, _d, _e, _f, _g, _h, _j;
+
+  var pob = _a.pob,
+      language = _a.language,
+      forceGeneratedPages = _a.forceGeneratedPages,
+      contactInfoToShow = _a.contactInfoToShow;
+  var location = pob.location,
+      weeklyOpeningTimes = pob.weeklyOpeningTimes,
+      name = pob.name,
+      relations = pob.relations,
+      website = pob.website,
+      contactInfo = pob.contactInfo;
+  var logoSrc = (_c = (_b = pob.media) === null || _b === void 0 ? void 0 : _b.logoCircle) === null || _c === void 0 ? void 0 : _c.svg;
+  var fullAddress = (location === null || location === void 0 ? void 0 : location.address) ? (location.address.street ? location.address.street + "," : '') + " " + location.address.postcode + " " + location.address.postcodeName : undefined;
+  var generatedPageUrl = name ? getUrl(name, (_d = relations === null || relations === void 0 ? void 0 : relations.laari) === null || _d === void 0 ? void 0 : _d.id, language) : '';
+  var pobLink = !forceGeneratedPages && (website === null || website === void 0 ? void 0 : website.url) ? website.url : parseInternalLink(generatedPageUrl);
+  var showPhoneNumber = ((_e = contactInfo === null || contactInfo === void 0 ? void 0 : contactInfo.phoneNumber) === null || _e === void 0 ? void 0 : _e.number) && (contactInfoToShow === 'phone' || contactInfoToShow === 'all');
+  var showAddress = (location === null || location === void 0 ? void 0 : location.address) && (contactInfoToShow === 'address' || contactInfoToShow === 'all');
+  return jsxs(PlaceOfBusinessListItemContainer, {
+    children: [jsxs(LogoTitleContainer, {
+      children: [logoSrc && jsx(Logo, {
+        src: logoSrc
+      }, void 0), jsx("p", {
+        children: name
+      }, void 0)]
+    }, void 0), pobLink && jsxs(LocationLinkContainer, __assign({
+      href: pobLink,
+      rel: "noopener noreferrer",
+      target: !(website === null || website === void 0 ? void 0 : website.url) || forceGeneratedPages ? '_self' : '_blank',
+      isArrow: forceGeneratedPages || !(website === null || website === void 0 ? void 0 : website.url),
+      "data-testid": 'pob-link'
+    }, {
+      children: [jsx(LocationLinkText, {
+        children: translationJSON.placeOfBusiness.placeOfBusinessSearch.detailsAndServices[language]
+      }, void 0), forceGeneratedPages || !(website === null || website === void 0 ? void 0 : website.url) ? jsx(icons.Arrow, {}, void 0) : jsx(icons.ExternalLink, {}, void 0)]
+    }), void 0), (showPhoneNumber || showAddress) && jsxs(ContactInfoContainer, {
+      children: [showAddress && jsxs(ContactInfo, {
+        children: [jsx(ContactInfoLabel, {
+          children: translationJSON.placeOfBusiness.placeOfBusinessSearch.address[language]
+        }, void 0), jsx("p", {
+          children: (_f = location === null || location === void 0 ? void 0 : location.address) === null || _f === void 0 ? void 0 : _f.street
+        }, void 0), jsx("p", {
+          children: ((_g = location === null || location === void 0 ? void 0 : location.address) === null || _g === void 0 ? void 0 : _g.postcode) + " " + ((_h = location === null || location === void 0 ? void 0 : location.address) === null || _h === void 0 ? void 0 : _h.postcodeName)
+        }, void 0), fullAddress && jsx(StyledLink, __assign({
+          href: "https://www.google.com/maps/place/" + fullAddress,
+          rel: "noopener noreferrer",
+          target: "_blank"
+        }, {
+          children: translationJSON.placeOfBusiness.getRoute[language]
+        }), void 0)]
+      }, void 0), showPhoneNumber && jsxs(ContactInfo, {
+        children: [jsx(ContactInfoLabel, {
+          children: translationJSON.placeOfBusiness.phone[language]
+        }, void 0), jsx("p", {
+          children: (_j = contactInfo === null || contactInfo === void 0 ? void 0 : contactInfo.phoneNumber) === null || _j === void 0 ? void 0 : _j.number
+        }, void 0)]
+      }, void 0)]
+    }, void 0), jsxs(OpeningTimesContainer, {
+      children: [weeklyOpeningTimes && jsx(OpenToday, {
+        weeklyOpeningTimes: weeklyOpeningTimes,
+        lang: language,
+        large: false
+      }, void 0), ((website === null || website === void 0 ? void 0 : website.url) || weeklyOpeningTimes) && jsx(StyledLink, __assign({
+        href: pobLink,
+        rel: "noopener noreferrer",
+        target: "_blank",
+        "data-testid": 'opening-times-link'
+      }, {
+        children: translationJSON.placeOfBusiness.allOpeningTimes[language]
+      }), void 0)]
+    }, void 0)]
+  }, void 0);
+};
+
+export { PlaceOfBusinessListItem, PlaceOfBusinessListItem as default };

package/dist/components/PlaceOfBusiness/PlaceOfBusinessListItem/PlaceOfBusinessListItem.styles.js

@@ -0,0 +1,134 @@
+import { __makeTemplateObject } from '../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+import media from '../../../styles/media.js';
+var PlaceOfBusinessListItemContainer = styled.div.withConfig({
+  displayName: "PlaceOfBusinessListItemstyles__PlaceOfBusinessListItemContainer",
+  componentId: "sc-stje0q-0"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: ", ";\n  padding: ", ";\n  margin-bottom: ", ";\n  display: flex;\n  flex-wrap: wrap;\n\n  ", "\n\n  // This is necessary due to sokospalvelut theme having default font size of 20px for all paragraphs (defined in <GlobalStyle/>)\n  // which is too large in this context. Therefore we cannot rely on the default <p> font styling in all themes\n  // and have to set the size specifically in each theme. For most themes, this is the same as the default paragraph font size\n  p {\n    font-size: ", ";\n  }\n"], ["\n  border: ", ";\n  padding: ", ";\n  margin-bottom: ", ";\n  display: flex;\n  flex-wrap: wrap;\n\n  ", "\n\n  // This is necessary due to sokospalvelut theme having default font size of 20px for all paragraphs (defined in <GlobalStyle/>)\n  // which is too large in this context. Therefore we cannot rely on the default <p> font styling in all themes\n  // and have to set the size specifically in each theme. For most themes, this is the same as the default paragraph font size\n  p {\n    font-size: ", ";\n  }\n"])), function (_a) {
+  var theme = _a.theme;
+  return "1px solid " + theme.components.placeOfBusiness.listItem.borderColor;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+}, media.desktop(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-wrap: unset;\n    align-items: center;\n  "], ["\n    flex-wrap: unset;\n    align-items: center;\n  "]))), function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.fontSizes.medium.fontSize;
+});
+var LogoTitleContainer = styled.div.withConfig({
+  displayName: "PlaceOfBusinessListItemstyles__LogoTitleContainer",
+  componentId: "sc-stje0q-1"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 85%;\n  display: flex;\n  align-items: center;\n  margin-bottom: ", ";\n  word-break: break-word;\n\n  ", "\n"], ["\n  width: 85%;\n  display: flex;\n  align-items: center;\n  margin-bottom: ", ";\n  word-break: break-word;\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+}, media.desktop(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: 35%;\n    order: 0;\n    margin-right: ", ";\n    margin-bottom: unset;\n  "], ["\n    width: 35%;\n    order: 0;\n    margin-right: ", ";\n    margin-bottom: unset;\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}));
+var LocationLinkContainer = styled.a.withConfig({
+  displayName: "PlaceOfBusinessListItemstyles__LocationLinkContainer",
+  componentId: "sc-stje0q-2"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  margin-bottom: 16px;\n\n  svg {\n    transform: ", ";\n    path {\n      fill: ", ";\n    }\n  }\n\n  ", "\n"], ["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  margin-bottom: 16px;\n\n  svg {\n    transform: ", ";\n    path {\n      fill: ", ";\n    }\n  }\n\n  ", "\n"])), function (_a) {
+  var isArrow = _a.isArrow;
+  return isArrow ? 'rotate(180deg)' : 'unset';
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.listItem.externalLinkHoverColor;
+}, media.desktop(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    order: 3;\n    margin-bottom: 0;\n  "], ["\n    order: 3;\n    margin-bottom: 0;\n  "]))));
+styled.div.withConfig({
+  displayName: "PlaceOfBusinessListItemstyles__StatusCircleContainer",
+  componentId: "sc-stje0q-3"
+})(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 (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing8;
+});
+var ContactInfoContainer = styled.div.withConfig({
+  displayName: "PlaceOfBusinessListItemstyles__ContactInfoContainer",
+  componentId: "sc-stje0q-4"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: 45%;\n  margin-right: 10%;\n  display: flex;\n  flex-direction: column;\n  row-gap: ", ";\n\n  ", "\n"], ["\n  width: 45%;\n  margin-right: 10%;\n  display: flex;\n  flex-direction: column;\n  row-gap: ", ";\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+}, media.desktop(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    width: 25%;\n    order: 2;\n    margin-right: ", ";\n    row-gap: ", ";\n  "], ["\n    width: 25%;\n    order: 2;\n    margin-right: ", ";\n    row-gap: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing8;
+}));
+var ContactInfo = styled.div.withConfig({
+  displayName: "PlaceOfBusinessListItemstyles__ContactInfo",
+  componentId: "sc-stje0q-5"
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  word-break: break-word;\n"], ["\n  display: flex;\n  flex-direction: column;\n  word-break: break-word;\n"])));
+var ContactInfoLabel = styled.div.withConfig({
+  displayName: "PlaceOfBusinessListItemstyles__ContactInfoLabel",
+  componentId: "sc-stje0q-6"
+})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n\n"], ["\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.fontSizes.small.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.fontSizes.small.lineHeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.listItem.labelColor;
+});
+var OpeningTimesContainer = styled.div.withConfig({
+  displayName: "PlaceOfBusinessListItemstyles__OpeningTimesContainer",
+  componentId: "sc-stje0q-7"
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  width: 45%;\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"], ["\n  width: 45%;\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), media.desktop(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    width: 15%;\n    order: 1;\n    margin-right: ", ";\n  "], ["\n    width: 15%;\n    order: 1;\n    margin-right: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}));
+styled.div.withConfig({
+  displayName: "PlaceOfBusinessListItemstyles__OpeningHoursContainer",
+  componentId: "sc-stje0q-8"
+})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-bottom: ", ";\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+}, media.desktop(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    margin-bottom: unset;\n  "], ["\n    margin-bottom: unset;\n  "]))));
+var Logo = styled.img.withConfig({
+  displayName: "PlaceOfBusinessListItemstyles__Logo",
+  componentId: "sc-stje0q-9"
+})(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  width: 33px;\n  height: 33px;\n  margin-right: ", ";\n\n  ", "\n"], ["\n  width: 33px;\n  height: 33px;\n  margin-right: ", ";\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+}, media.desktop(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    width: 65px;\n    height: 65px;\n    margin-right: ", ";\n  "], ["\n    width: 65px;\n    height: 65px;\n    margin-right: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}));
+var StyledLink = styled.a.withConfig({
+  displayName: "PlaceOfBusinessListItemstyles__StyledLink",
+  componentId: "sc-stje0q-10"
+})(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n"], ["\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.fontSizes.small.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.fontSizes.small.lineHeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing4;
+});
+var LocationLinkText = styled.p.withConfig({
+  displayName: "PlaceOfBusinessListItemstyles__LocationLinkText",
+  componentId: "sc-stje0q-11"
+})(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  display: none;\n  ", "\n"], ["\n  display: none;\n  ", "\n"])), media.desktop(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    display: inline;\n    color: ", ";\n    white-space: nowrap;\n    margin-right: ", ";\n    &:hover {\n      color: ", ";\n    }\n  "], ["\n    display: inline;\n    color: ", ";\n    white-space: nowrap;\n    margin-right: ", ";\n    &:hover {\n      color: ", ";\n    }\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.listItem.externalLinkColor;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing8;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.listItem.externalLinkHoverColor;
+}));
+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, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;
+export { ContactInfo, ContactInfoContainer, ContactInfoLabel, LocationLinkContainer, LocationLinkText, Logo, LogoTitleContainer, OpeningTimesContainer, PlaceOfBusinessListItemContainer, StyledLink };

package/dist/components/PlaceOfBusiness/PlaceOfBusinessSearch/PlaceOfBusinessSearch.js

@@ -0,0 +1,142 @@
+import { __rest, __read, __assign, __awaiter, __generator } from '../../../_virtual/_tslib.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect } from 'react';
+import MoonLoader from 'react-spinners/MoonLoader';
+import { PlaceOfBusinessSearchContainer, Input, LoaderContainer, NoSearchResults } from './PlaceOfBusinessSearch.styles.js';
+import translationJSON from '../../../locales/translations.json.js';
+import { getCurrentLanguage } from '../../utils.js';
+import { filterPobs } from '../utils.js';
+import Button from '../../Button/Button.js';
+import PlaceOfBusinessListItem from '../PlaceOfBusinessListItem/PlaceOfBusinessListItem.js';
+import axios from 'axios';
+var PlaceOfBusinessSearch = forwardRef(function (_a, ref) {
+  var hideInitial = _a.hideInitial,
+      pageSize = _a.pageSize,
+      _b = _a.forceGeneratedPages,
+      forceGeneratedPages = _b === void 0 ? false : _b,
+      pobsEndpointWithoutProtocol = _a.pobsEndpointWithoutProtocol,
+      databaseId = _a.databaseId,
+      blockId = _a.blockId,
+      contactInfoToShow = _a.contactInfoToShow,
+      rest = __rest(_a, ["hideInitial", "pageSize", "forceGeneratedPages", "pobsEndpointWithoutProtocol", "databaseId", "blockId", "contactInfoToShow"]);
+
+  var lang = getCurrentLanguage();
+
+  var _c = __read(useState([]), 2),
+      locations = _c[0],
+      setLocations = _c[1];
+
+  var _d = __read(useState(false), 2),
+      error = _d[0],
+      setError = _d[1];
+
+  var _e = __read(useState([]), 2),
+      filteredLocations = _e[0],
+      setFilteredLocations = _e[1];
+
+  var _f = __read(useState([]), 2),
+      locationsToShow = _f[0],
+      setLocationsToShow = _f[1];
+
+  var _g = __read(useState(1), 2),
+      currentPage = _g[0],
+      setCurrentPage = _g[1];
+
+  var _h = __read(useState(hideInitial), 2),
+      hide = _h[0],
+      setHide = _h[1];
+
+  var onInputChange = function onInputChange(event) {
+    var filteredLocations = filterPobs(locations, event.target.value);
+    setFilteredLocations(filteredLocations);
+    setLocationsToShow(filteredLocations.slice(0, pageSize));
+    setCurrentPage(1);
+    setHide(false);
+  };
+
+  var onButtonClick = function onButtonClick() {
+    setCurrentPage(currentPage + 1);
+    setLocationsToShow(filteredLocations.slice(0, (currentPage + 1) * pageSize));
+  };
+
+  useEffect(function () {
+    var fetchData = function fetchData() {
+      return __awaiter(void 0, void 0, void 0, function () {
+        var url, response;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              _a.trys.push([0, 2,, 3]);
+
+              url = "https://" + pobsEndpointWithoutProtocol + "/pobs?blockId=" + blockId + "&databaseId=" + databaseId + "&lang=" + lang.toLowerCase();
+              return [4
+              /*yield*/
+              , axios.get(url)];
+
+            case 1:
+              response = _a.sent();
+              setLocations(response.data);
+              setFilteredLocations(response.data);
+
+              if (!hide) {
+                setLocationsToShow(response.data.slice(0, pageSize));
+              }
+
+              return [3
+              /*break*/
+              , 3];
+
+            case 2:
+              _a.sent();
+
+              setError(true);
+              return [3
+              /*break*/
+              , 3];
+
+            case 3:
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    };
+
+    fetchData();
+  }, []);
+  return jsxs(PlaceOfBusinessSearchContainer, __assign({
+    ref: ref
+  }, rest, {
+    children: [jsx(Input, {
+      onChange: onInputChange,
+      placeholder: translationJSON.placeOfBusiness.placeOfBusinessSearch.search[lang],
+      size: 'large',
+      buttonLabel: translationJSON.placeOfBusiness.placeOfBusinessSearch.search[lang],
+      disabled: (locations === null || locations === void 0 ? void 0 : locations.length) === 0,
+      "data-testid": "pob-search-input"
+    }, void 0), (locations === null || locations === void 0 ? void 0 : locations.length) === 0 && !error && jsx(LoaderContainer, {
+      children: jsx(MoonLoader, {
+        size: 30
+      }, void 0)
+    }, void 0), error && jsx("p", {
+      children: translationJSON.placeOfBusiness.error[lang]
+    }, void 0), (locations === null || locations === void 0 ? void 0 : locations.length) > 0 && jsxs(Fragment, {
+      children: [!hide && locationsToShow.map(function (pob) {
+        return jsx(PlaceOfBusinessListItem, {
+          pob: pob,
+          language: lang,
+          forceGeneratedPages: forceGeneratedPages,
+          contactInfoToShow: contactInfoToShow
+        }, pob.id);
+      }), !hide && (locationsToShow === null || locationsToShow === void 0 ? void 0 : locationsToShow.length) > 0 && locationsToShow.length !== (filteredLocations === null || filteredLocations === void 0 ? void 0 : filteredLocations.length) && jsx(Button, {
+        align: 'center',
+        onClick: onButtonClick,
+        buttonText: translationJSON.placeOfBusiness.placeOfBusinessSearch.showMore[lang]
+      }, void 0), !filteredLocations || filteredLocations.length === 0 && jsx(NoSearchResults, {
+        children: translationJSON.placeOfBusiness.placeOfBusinessSearch.noResults[lang]
+      }, void 0)]
+    }, void 0)]
+  }), void 0);
+});
+export { PlaceOfBusinessSearch, PlaceOfBusinessSearch as default };

package/dist/components/PlaceOfBusiness/PlaceOfBusinessSearch/PlaceOfBusinessSearch.styles.js

@@ -0,0 +1,43 @@
+import { __makeTemplateObject } from '../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+import { SearchInput } from '@sok/design-system';
+var PlaceOfBusinessSearchContainer = styled.div.withConfig({
+  displayName: "PlaceOfBusinessSearchstyles__PlaceOfBusinessSearchContainer",
+  componentId: "sc-1x8bn8n-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n\n  // Override font\n  .ant-input-group-wrapper .ant-input-affix-wrapper > input,\n  .ant-input-group-wrapper .ant-input-affix-wrapper > input::placeholder {\n    font-family: ", ";\n  }\n\n  // Fix alignment of the input clear icon\n  .ant-input-suffix {\n    margin-top: 3px;\n  }\n  // Fix search button height to be equal to the input field\n  .search-input-btn {\n    height: 54px !important;\n    width: 54px !important;\n    border-bottom-left-radius: 0px !important;\n    border-top-left-radius: 0px !important;\n    pointer-events: none;\n  }\n\n  // Do not round the end of the input and start of the button\n  .ant-input-affix-wrapper.ant-input-affix-wrapper-lg {\n    border-bottom-right-radius: 0px !important;\n    border-top-right-radius: 0px !important;\n    border-right: 0 !important;\n  }\n\n  // For some reason left: -1px is added which adds a 1px white gap in mobile\n  .ant-input-group-addon {\n    left: 0 !important;\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n\n  // Override font\n  .ant-input-group-wrapper .ant-input-affix-wrapper > input,\n  .ant-input-group-wrapper .ant-input-affix-wrapper > input::placeholder {\n    font-family: ", ";\n  }\n\n  // Fix alignment of the input clear icon\n  .ant-input-suffix {\n    margin-top: 3px;\n  }\n  // Fix search button height to be equal to the input field\n  .search-input-btn {\n    height: 54px !important;\n    width: 54px !important;\n    border-bottom-left-radius: 0px !important;\n    border-top-left-radius: 0px !important;\n    pointer-events: none;\n  }\n\n  // Do not round the end of the input and start of the button\n  .ant-input-affix-wrapper.ant-input-affix-wrapper-lg {\n    border-bottom-right-radius: 0px !important;\n    border-top-right-radius: 0px !important;\n    border-right: 0 !important;\n  }\n\n  // For some reason left: -1px is added which adds a 1px white gap in mobile\n  .ant-input-group-addon {\n    left: 0 !important;\n  }\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.fontFamily;
+});
+var Input = styled(SearchInput).withConfig({
+  displayName: "PlaceOfBusinessSearchstyles__Input",
+  componentId: "sc-1x8bn8n-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-bottom: ", " !important;\n"], ["\n  margin-bottom: ", " !important;\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+});
+styled.div.withConfig({
+  displayName: "PlaceOfBusinessSearchstyles__ButtonContainer",
+  componentId: "sc-1x8bn8n-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin-top: ", ";\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin-top: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+});
+var NoSearchResults = styled.div.withConfig({
+  displayName: "PlaceOfBusinessSearchstyles__NoSearchResults",
+  componentId: "sc-1x8bn8n-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n"], ["\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.fontSizes.medium.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.fontSizes.medium.lineHeight;
+});
+var LoaderContainer = styled.div.withConfig({
+  displayName: "PlaceOfBusinessSearchstyles__LoaderContainer",
+  componentId: "sc-1x8bn8n-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+export { Input, LoaderContainer, NoSearchResults, PlaceOfBusinessSearchContainer };