@dnanpm/styleguide 4.0.9 → 4.0.10

package/build/es/components/Footer/Components/FooterComponents.js

@@ -7,361 +7,320 @@ import ButtonIcon from '../../ButtonIcon/ButtonIcon.js';
 import FooterContext from '../context/FooterContext.js';
 import BusinessMenu from '../../MainHeaderNavigation/ChildComponents/BusinessMenu.js';
 
-const linkHoverStyles = css `
-    &:hover,
-    &:focus,
-    &:active {
-        text-decoration: underline;
-        text-decoration-thickness: from-font;
-    }
-`;
-const LinksListEl = styled.li `
-    a {
-        ${linkHoverStyles}
-    }
-    button,
-    button:focus {
-        border: 0;
-        text-underline-offset: 0.2em;
-        ${linkHoverStyles}
-    }
-`;
-const BaseContainer = styled.div `
-    display: grid;
-    padding: ${getMultipliedSize(theme.base.baseHeight, 2)};
-    gap: ${getMultipliedSize(theme.base.baseHeight, 3)};
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-    max-width: ${theme.layout.content.containerMaxWidth.wide}px;
-    margin-left: auto;
-    margin-right: auto;
-
-    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-        padding: ${getMultipliedSize(theme.base.baseHeight, 4)};
-    }
-`;
-const CategoryLinks = styled.ul `
-    display: ${({ $active }) => ($active ? 'flex' : 'none')};
-    transition:
-        all 0.3s ease-in-out,
-        padding 0s linear ${({ $active }) => ($active ? '0s' : '0.3s')};
-    max-height: ${({ $active }) => ($active ? '500' : '0')}px;
-    flex-direction: column;
-    gap: ${getMultipliedSize(theme.base.baseHeight, 1)};
-`;
-const CategoryHeader = styled.button `
-    display: flex;
-    text-align: left;
-    gap: ${getMultipliedSize(theme.base.baseHeight, 2)};
-    width: 100%;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    color: ${theme.color.text.white};
-    background: transparent;
-    justify-content: space-between;
-    &:focus-visible {
-        outline: 1px solid transparent;
-        box-shadow:
-            0px 0px 0px 2px ${theme.color.focus.light},
-            0px 0px 0px 4px ${theme.color.focus.dark};
-        ${theme.radius.s};
-    }
-`;
-const CategoryName = styled.h2 `
-    font-size: ${theme.fontSize.h4};
-    line-height: ${theme.lineHeight.h4};
-    margin: 0;
-`;
-const CategoryWrapper = styled.div `
-    ${CategoryLinks} {
-        margin-top: ${getMultipliedSize(theme.base.baseHeight, 2)};
-        margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 1)};
-    }
-
-    svg {
-        transition: transform 0.2s ease-in;
-        transform: ${({ $active }) => ($active && 'rotate(180deg)') || 'rotate(0deg)'};
-    }
-`;
-const CategoryContainer = styled(BaseContainer) `
-    @media (max-width: ${({ $collapseSize }) => $collapseSize}px) {
-        gap: 0;
-        padding: 0;
-        padding-top: ${getMultipliedSize(theme.base.baseHeight, 1)};
-
-        > div {
-            border-bottom: 1px solid ${theme.color.default.white};
-            padding: ${getMultipliedSize(theme.base.baseHeight, 2.7)} ${getMultipliedSize(theme.base.baseWidth, 2)}
-                ${getMultipliedSize(theme.base.baseHeight, 2.2)} ${getMultipliedSize(theme.base.baseWidth, 2)};
-        }
-    }
-`;
-const LangLinksContainer = styled.div `
-    display: flex;
-    gap: ${getMultipliedSize(theme.base.baseWidth, 0.4)};
-    justify-content: center;
-`;
-const LangLink = styled.a `
-    background: ${({ $isActive }) => $isActive ? theme.color.background.white.default : 'transparent'};
-    color: ${({ $isActive }) => ($isActive ? theme.color.text.plum : theme.color.text.white)};
-    &:hover,
-    &:active,
-    &:focus {
-          color: ${({ $isActive }) => $isActive
-    ? theme.color.text.plum
-    : theme.color.text.white + theme.color.transparency.T80};
-        }
-    }
-`;
-const TopContainer = styled(BaseContainer) `
-    h2 {
-        margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 1.5)};
-    }
-    ul {
-        display: flex;
-        flex-direction: column;
-        gap: ${getMultipliedSize(theme.base.baseHeight, 1)};
-        padding: ${getMultipliedSize(theme.base.baseHeight, 0.5)} 0;
-    }
-    a {
-        display: inline-flex;
-        align-items: center;
-        gap: ${getMultipliedSize(theme.base.baseHeight, 0.8)};
-        font-weight: ${theme.fontWeight.bold};
-    }
-    > div > svg {
-        margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 2)};
-    }
-`;
-const AppSection = styled.div `
-    text-align: center;
-
-    img {
-        max-width: 100%;
-    }
-`;
-const AppList = styled.div `
-    display: flex;
-    gap: ${getMultipliedSize(theme.base.baseWidth, 1)};
-    justify-content: center;
-    a {
-        display: block;
-        width: 142px;
-    }
-`;
-const BottomContainer = styled(BaseContainer) `
-    display: flex;
-    flex-direction: column;
-    gap: ${getMultipliedSize(theme.base.baseHeight, 3)};
-
-    a {
-        font-weight: ${theme.fontWeight.medium};
-    }
-
-    ${LangLinksContainer} {
-        ${LangLink} {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 32px;
-            height: 32px;
-            border-radius: ${theme.radius.circle};
-            transition: all 0.2s ease;
-            &:hover,
-            &:active,
-            &:focus {
-                text-decoration: none;
-            }
-        }
-    }
-
-    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
-        flex-direction: row;
-        align-items: flex-start;
-        justify-content: space-between;
-        position: relative;
-
-        &:before {
-            content: '';
-            display: block;
-            position: absolute;
-            top: 0;
-            left: ${getMultipliedSize(theme.base.baseHeight, 4)};
-            width: calc(100% - ${getMultipliedSize(theme.base.baseHeight, 8)});
-            border-top: 1px solid ${theme.color.default.white};
-        }
-
-        ${AppSection} {
-            text-align: left;
-            width: 142px;
-            flex: 0 0 auto;
-
-            p {
-                margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 1)};
-            }
-
-            ${AppList} {
-                flex-direction: column;
-            }
-        }
-    }
-`;
-const BottomCenter = styled.div `
-    display: flex;
-    flex-direction: column;
-    gap: ${getMultipliedSize(theme.base.baseHeight, 3)};
-    align-items: center;
-    max-width: 520px;
-    margin: 0 auto;
-    font-size: ${theme.fontSize.s};
-`;
-const SocialMediaLinksContainer = styled.div `
-    white-space: nowrap;
-    text-align: center;
-    a {
-        display: inline-block;
-        margin: 0 ${getMultipliedSize(theme.base.baseWidth, 1)};
-    }
-`;
-const GeneralInformationContainer = styled.div `
-    text-align: center;
-    display: flex;
-    gap: ${getMultipliedSize(theme.base.baseHeight, 1.5)};
-    flex-wrap: wrap;
-    justify-content: center;
-
-    a {
-        ${linkHoverStyles}
-    }
-`;
+const linkHoverStyles = css(["&:hover,&:focus,&:active{text-decoration:underline;text-decoration-thickness:from-font;}"]);
+const LinksListEl = styled.li.withConfig({
+  displayName: "FooterComponents__LinksListEl",
+  componentId: "sc-10hh8e5-0"
+})(["a{", "}button,button:focus{border:0;text-underline-offset:0.2em;", "}"], linkHoverStyles, linkHoverStyles);
+const BaseContainer = styled.div.withConfig({
+  displayName: "FooterComponents__BaseContainer",
+  componentId: "sc-10hh8e5-1"
+})(["display:grid;padding:", ";gap:", ";grid-template-columns:repeat(1,minmax(0,1fr));max-width:", "px;margin-left:auto;margin-right:auto;@media (min-width:", "px){grid-template-columns:repeat(3,minmax(0,1fr));padding:", ";}"], getMultipliedSize(theme.base.baseHeight, 2), getMultipliedSize(theme.base.baseHeight, 3), theme.layout.content.containerMaxWidth.wide, ({
+  $collapseSize
+}) => $collapseSize + 1, getMultipliedSize(theme.base.baseHeight, 4));
+const CategoryLinks = styled.ul.withConfig({
+  displayName: "FooterComponents__CategoryLinks",
+  componentId: "sc-10hh8e5-2"
+})(["display:", ";transition:all 0.3s ease-in-out,padding 0s linear ", ";max-height:", "px;flex-direction:column;gap:", ";"], ({
+  $active
+}) => $active ? 'flex' : 'none', ({
+  $active
+}) => $active ? '0s' : '0.3s', ({
+  $active
+}) => $active ? '500' : '0', getMultipliedSize(theme.base.baseHeight, 1));
+const CategoryHeader = styled.button.withConfig({
+  displayName: "FooterComponents__CategoryHeader",
+  componentId: "sc-10hh8e5-3"
+})(["display:flex;text-align:left;gap:", ";width:100%;border:0;margin:0;padding:0;color:", ";background:transparent;justify-content:space-between;&:focus-visible{outline:1px solid transparent;box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";", ";}"], getMultipliedSize(theme.base.baseHeight, 2), theme.color.text.white, theme.color.focus.light, theme.color.focus.dark, theme.radius.s);
+const CategoryName = styled.h2.withConfig({
+  displayName: "FooterComponents__CategoryName",
+  componentId: "sc-10hh8e5-4"
+})(["font-size:", ";line-height:", ";margin:0;"], theme.fontSize.h4, theme.lineHeight.h4);
+const CategoryWrapper = styled.div.withConfig({
+  displayName: "FooterComponents__CategoryWrapper",
+  componentId: "sc-10hh8e5-5"
+})(["", "{margin-top:", ";margin-bottom:", ";}svg{transition:transform 0.2s ease-in;transform:", ";}"], CategoryLinks, getMultipliedSize(theme.base.baseHeight, 2), getMultipliedSize(theme.base.baseHeight, 1), ({
+  $active
+}) => $active && 'rotate(180deg)' || 'rotate(0deg)');
+const CategoryContainer = styled(BaseContainer).withConfig({
+  displayName: "FooterComponents__CategoryContainer",
+  componentId: "sc-10hh8e5-6"
+})(["@media (max-width:", "px){gap:0;padding:0;padding-top:", ";> div{border-bottom:1px solid ", ";padding:", " ", " ", " ", ";}}"], ({
+  $collapseSize
+}) => $collapseSize, getMultipliedSize(theme.base.baseHeight, 1), theme.color.default.white, getMultipliedSize(theme.base.baseHeight, 2.7), getMultipliedSize(theme.base.baseWidth, 2), getMultipliedSize(theme.base.baseHeight, 2.2), getMultipliedSize(theme.base.baseWidth, 2));
+const LangLinksContainer = styled.div.withConfig({
+  displayName: "FooterComponents__LangLinksContainer",
+  componentId: "sc-10hh8e5-7"
+})(["display:flex;gap:", ";justify-content:center;"], getMultipliedSize(theme.base.baseWidth, 0.4));
+const LangLink = styled.a.withConfig({
+  displayName: "FooterComponents__LangLink",
+  componentId: "sc-10hh8e5-8"
+})(["background:", ";color:", ";&:hover,&:active,&:focus{color:", ";}}"], ({
+  $isActive
+}) => $isActive ? theme.color.background.white.default : 'transparent', ({
+  $isActive
+}) => $isActive ? theme.color.text.plum : theme.color.text.white, ({
+  $isActive
+}) => $isActive ? theme.color.text.plum : theme.color.text.white + theme.color.transparency.T80);
+const TopContainer = styled(BaseContainer).withConfig({
+  displayName: "FooterComponents__TopContainer",
+  componentId: "sc-10hh8e5-9"
+})(["h2{margin-bottom:", ";}ul{display:flex;flex-direction:column;gap:", ";padding:", " 0;}a{display:inline-flex;align-items:center;gap:", ";font-weight:", ";}> div > svg{margin-bottom:", ";}"], getMultipliedSize(theme.base.baseHeight, 1.5), getMultipliedSize(theme.base.baseHeight, 1), getMultipliedSize(theme.base.baseHeight, 0.5), getMultipliedSize(theme.base.baseHeight, 0.8), theme.fontWeight.bold, getMultipliedSize(theme.base.baseHeight, 2));
+const AppSection = styled.div.withConfig({
+  displayName: "FooterComponents__AppSection",
+  componentId: "sc-10hh8e5-10"
+})(["text-align:center;img{max-width:100%;}"]);
+const AppList = styled.div.withConfig({
+  displayName: "FooterComponents__AppList",
+  componentId: "sc-10hh8e5-11"
+})(["display:flex;gap:", ";justify-content:center;a{display:block;width:142px;}"], getMultipliedSize(theme.base.baseWidth, 1));
+const BottomContainer = styled(BaseContainer).withConfig({
+  displayName: "FooterComponents__BottomContainer",
+  componentId: "sc-10hh8e5-12"
+})(["display:flex;flex-direction:column;gap:", ";a{font-weight:", ";}", "{", "{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:", ";transition:all 0.2s ease;&:hover,&:active,&:focus{text-decoration:none;}}}@media (min-width:", "px){flex-direction:row;align-items:flex-start;justify-content:space-between;position:relative;&:before{content:'';display:block;position:absolute;top:0;left:", ";width:calc(100% - ", ");border-top:1px solid ", ";}", "{text-align:left;width:142px;flex:0 0 auto;p{margin-bottom:", ";}", "{flex-direction:column;}}}"], getMultipliedSize(theme.base.baseHeight, 3), theme.fontWeight.medium, LangLinksContainer, LangLink, theme.radius.circle, ({
+  $collapseSize
+}) => $collapseSize + 1, getMultipliedSize(theme.base.baseHeight, 4), getMultipliedSize(theme.base.baseHeight, 8), theme.color.default.white, AppSection, getMultipliedSize(theme.base.baseHeight, 1), AppList);
+const BottomCenter = styled.div.withConfig({
+  displayName: "FooterComponents__BottomCenter",
+  componentId: "sc-10hh8e5-13"
+})(["display:flex;flex-direction:column;gap:", ";align-items:center;max-width:520px;margin:0 auto;font-size:", ";"], getMultipliedSize(theme.base.baseHeight, 3), theme.fontSize.s);
+const SocialMediaLinksContainer = styled.div.withConfig({
+  displayName: "FooterComponents__SocialMediaLinksContainer",
+  componentId: "sc-10hh8e5-14"
+})(["white-space:nowrap;text-align:center;a{display:inline-block;margin:0 ", ";}"], getMultipliedSize(theme.base.baseWidth, 1));
+const GeneralInformationContainer = styled.div.withConfig({
+  displayName: "FooterComponents__GeneralInformationContainer",
+  componentId: "sc-10hh8e5-15"
+})(["text-align:center;display:flex;gap:", ";flex-wrap:wrap;justify-content:center;a{", "}"], getMultipliedSize(theme.base.baseHeight, 1.5), linkHoverStyles);
 const socialMediaIcons = {
-    facebook: Facebook,
-    instagram: Instagram,
-    linkedin: Linkedin,
-    tiktok: Tiktok,
-    threads: Threads,
-    twitter: X,
-    youtube: Youtube,
+  facebook: Facebook,
+  instagram: Instagram,
+  linkedin: Linkedin,
+  tiktok: Tiktok,
+  threads: Threads,
+  twitter: X,
+  youtube: Youtube
 };
-const mapCorporateSelector = (languagesObject) => Object.keys(languagesObject.urls).map(e => ({
-    title: e,
-    url: languagesObject.urls[e],
+const mapCorporateSelector = languagesObject => Object.keys(languagesObject.urls).map(e => ({
+  title: e,
+  url: languagesObject.urls[e]
 }));
-const TopSection = ({ topSection }) => {
-    const { collapseSize, language } = useContext(FooterContext);
-    return (React__default.createElement(TopContainer, { "$collapseSize": collapseSize }, topSection === null || topSection === void 0 ? void 0 : topSection.map((section, index) => (React__default.createElement("div", { key: `service-section-${index}`, "data-testid": `service-section-${index}` },
-        section.svgIconName[language] === 'user' && React__default.createElement(User, { size: "3rem" }),
-        section.svgIconName[language] === 'headset' && React__default.createElement(Headset, { size: "3rem" }),
-        section.svgIconName[language] === 'shop' && React__default.createElement(Shop, { size: "3rem" }),
-        React__default.createElement(CategoryName, null, section.title[language]),
-        React__default.createElement("ul", null, section.linkItems.map((item, i) => (React__default.createElement(LinksListEl, { key: `category-link-${i}`, "data-testid": `category-link-${i}` }, item.openChat[language] ? (React__default.createElement(ButtonIcon, { darkBg: true, icon: ArrowRight, className: "js-dna-chatbot-cta-btn" }, item.linkText[language])) : (React__default.createElement("a", { href: item.linkURL[language] },
-            React__default.createElement(ArrowRight, null),
-            item.linkText[language])))))))))));
+const TopSection = ({
+  topSection
+}) => {
+  const {
+    collapseSize,
+    language
+  } = useContext(FooterContext);
+  return /*#__PURE__*/React__default.createElement(TopContainer, {
+    "$collapseSize": collapseSize
+  }, topSection === null || topSection === void 0 ? void 0 : topSection.map((section, index) => (/*#__PURE__*/React__default.createElement("div", {
+    key: `service-section-${index}`,
+    "data-testid": `service-section-${index}`
+  }, section.svgIconName[language] === 'user' && /*#__PURE__*/React__default.createElement(User, {
+    size: "3rem"
+  }), section.svgIconName[language] === 'headset' && /*#__PURE__*/React__default.createElement(Headset, {
+    size: "3rem"
+  }), section.svgIconName[language] === 'shop' && /*#__PURE__*/React__default.createElement(Shop, {
+    size: "3rem"
+  }), /*#__PURE__*/React__default.createElement(CategoryName, null, section.title[language]), /*#__PURE__*/React__default.createElement("ul", null, section.linkItems.map((item, i) => (/*#__PURE__*/React__default.createElement(LinksListEl, {
+    key: `category-link-${i}`,
+    "data-testid": `category-link-${i}`
+  }, item.openChat[language] ? (/*#__PURE__*/React__default.createElement(ButtonIcon, {
+    darkBg: true,
+    icon: ArrowRight,
+    className: "js-dna-chatbot-cta-btn"
+  }, item.linkText[language])) : (/*#__PURE__*/React__default.createElement("a", {
+    href: item.linkURL[language]
+  }, /*#__PURE__*/React__default.createElement(ArrowRight, null), item.linkText[language]))))))))));
 };
-const Categories = ({ categories }) => {
-    const { collapseSize, language, isCollapsed, setIsCollapsed, isMobileFooter } = useContext(FooterContext);
-    const toggleCollapse = (currentIndex) => {
-        if (isMobileFooter) {
-            setIsCollapsed(Object.assign(Object.assign({}, isCollapsed), { [currentIndex]: !isCollapsed[currentIndex] }));
-        }
-    };
-    return (React__default.createElement(CategoryContainer, { "$collapseSize": collapseSize, "data-testid": "category-container" }, categories === null || categories === void 0 ? void 0 : categories.map((category, index) => (React__default.createElement(CategoryWrapper, { "$active": isCollapsed[index], "data-testid": `category-${index}`, key: `category-${index}` },
-        React__default.createElement(CategoryHeader, { onClick: () => toggleCollapse(index), "aria-expanded": isMobileFooter ? isCollapsed[index] : true },
-            React__default.createElement(CategoryName, null, category.description[language]),
-            isMobileFooter && React__default.createElement(ChevronDown, null)),
-        React__default.createElement(CategoryLinks, { "$active": isMobileFooter ? isCollapsed[index] : true }, category.category.map((categoryLink, linkIndex) => (React__default.createElement(LinksListEl, { key: `category-${index}-link-${linkIndex}`, "data-testid": `category-${index}-link-${linkIndex}` },
-            React__default.createElement("a", { href: categoryLink.urls[language] }, categoryLink.titles[language]))))))))));
+const Categories = ({
+  categories
+}) => {
+  const {
+    collapseSize,
+    language,
+    isCollapsed,
+    setIsCollapsed,
+    isMobileFooter
+  } = useContext(FooterContext);
+  const toggleCollapse = currentIndex => {
+    if (isMobileFooter) {
+      setIsCollapsed(Object.assign(Object.assign({}, isCollapsed), {
+        [currentIndex]: !isCollapsed[currentIndex]
+      }));
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(CategoryContainer, {
+    "$collapseSize": collapseSize,
+    "data-testid": "category-container"
+  }, categories === null || categories === void 0 ? void 0 : categories.map((category, index) => (/*#__PURE__*/React__default.createElement(CategoryWrapper, {
+    "$active": isCollapsed[index],
+    "data-testid": `category-${index}`,
+    key: `category-${index}`
+  }, /*#__PURE__*/React__default.createElement(CategoryHeader, {
+    onClick: () => toggleCollapse(index),
+    "aria-expanded": isMobileFooter ? isCollapsed[index] : true
+  }, /*#__PURE__*/React__default.createElement(CategoryName, null, category.description[language]), isMobileFooter && /*#__PURE__*/React__default.createElement(ChevronDown, null)), /*#__PURE__*/React__default.createElement(CategoryLinks, {
+    "$active": isMobileFooter ? isCollapsed[index] : true
+  }, category.category.map((categoryLink, linkIndex) => (/*#__PURE__*/React__default.createElement(LinksListEl, {
+    key: `category-${index}-link-${linkIndex}`,
+    "data-testid": `category-${index}-link-${linkIndex}`
+  }, /*#__PURE__*/React__default.createElement("a", {
+    href: categoryLink.urls[language]
+  }, categoryLink.titles[language])))))))));
 };
-const GeneralInformation = ({ generalInformation }) => {
-    const { language } = useContext(FooterContext);
-    const currentYear = new Date().getFullYear();
-    const COOKIE_SETTINGS_URL = 'cookie-settings';
-    const OT_SDK_CLASSNAME = 'ot-sdk-show-settings';
-    // TODO after release: Remove redundant `isNewModelUsed` condition and refactor it's usages (STYLE-905)
-    const isNewModelUsed = !!generalInformation.mandatoryLinks;
-    const typeToClassMap = {
-        cookie: 'ot-sdk-show-settings',
-    };
-    const orderMap = ['privacyPolicy', 'cookieSettings', 'terms'];
-    const getOrderedLinks = () => {
-        if (isNewModelUsed && Array.isArray(generalInformation.mandatoryLinks)) {
-            return generalInformation.mandatoryLinks;
-        }
-        return orderMap.map(id => new Map(Object.entries(generalInformation)).get(id));
-    };
-    const getLinkHref = (item) => {
-        var _a;
-        if (!((_a = item.urls) === null || _a === void 0 ? void 0 : _a[language]))
-            return '#!';
-        return item.urls[language] !== COOKIE_SETTINGS_URL ? item.urls[language] : '#!';
-    };
-    const getLinkClassName = (item) => {
-        var _a;
-        if (isNewModelUsed) {
-            return ((_a = item.urls) === null || _a === void 0 ? void 0 : _a[language]) === COOKIE_SETTINGS_URL ? OT_SDK_CLASSNAME : '';
-        }
-        return item.type ? typeToClassMap[item.type] : '';
-    };
-    const orderedGeneralInformation = getOrderedLinks();
-    return (React__default.createElement(GeneralInformationContainer, { "data-testid": "general-information-section" },
-        orderedGeneralInformation.map((item, index) => item && (React__default.createElement(Fragment, { key: `general-information-link-${index}` },
-            React__default.createElement("a", { href: getLinkHref(item), className: getLinkClassName(item) }, item.titles[language]),
-            React__default.createElement("span", { "aria-hidden": "true" }, "|")))),
-        "DNA ",
-        currentYear));
+const GeneralInformation = ({
+  generalInformation
+}) => {
+  const {
+    language
+  } = useContext(FooterContext);
+  const currentYear = new Date().getFullYear();
+  const COOKIE_SETTINGS_URL = 'cookie-settings';
+  const OT_SDK_CLASSNAME = 'ot-sdk-show-settings';
+  // TODO after release: Remove redundant `isNewModelUsed` condition and refactor it's usages (STYLE-905)
+  const isNewModelUsed = !!generalInformation.mandatoryLinks;
+  const typeToClassMap = {
+    cookie: 'ot-sdk-show-settings'
+  };
+  const orderMap = ['privacyPolicy', 'cookieSettings', 'terms'];
+  const getOrderedLinks = () => {
+    if (isNewModelUsed && Array.isArray(generalInformation.mandatoryLinks)) {
+      return generalInformation.mandatoryLinks;
+    }
+    return orderMap.map(id => new Map(Object.entries(generalInformation)).get(id));
+  };
+  const getLinkHref = item => {
+    var _a;
+    if (!((_a = item.urls) === null || _a === void 0 ? void 0 : _a[language])) return '#!';
+    return item.urls[language] !== COOKIE_SETTINGS_URL ? item.urls[language] : '#!';
+  };
+  const getLinkClassName = item => {
+    var _a;
+    if (isNewModelUsed) {
+      return ((_a = item.urls) === null || _a === void 0 ? void 0 : _a[language]) === COOKIE_SETTINGS_URL ? OT_SDK_CLASSNAME : '';
+    }
+    return item.type ? typeToClassMap[item.type] : '';
+  };
+  const orderedGeneralInformation = getOrderedLinks();
+  return /*#__PURE__*/React__default.createElement(GeneralInformationContainer, {
+    "data-testid": "general-information-section"
+  }, orderedGeneralInformation.map((item, index) => item && (/*#__PURE__*/React__default.createElement(Fragment, {
+    key: `general-information-link-${index}`
+  }, /*#__PURE__*/React__default.createElement("a", {
+    href: getLinkHref(item),
+    className: getLinkClassName(item)
+  }, item.titles[language]), /*#__PURE__*/React__default.createElement("span", {
+    "aria-hidden": "true"
+  }, "|")))), "DNA ", currentYear);
 };
-const LanguageLinks = ({ languages }) => (React__default.createElement(LangLinksContainer, { "data-testid": "language-selector-section" }, languages.map(language => (React__default.createElement(LangLink, { "aria-label": language.ariaLabel, href: language.url, lang: language.title.toLowerCase(), 
-    // not currently in use
-    // isActive={currentLanguage === language.title.toLowerCase()}
-    key: language.title }, language.title.toUpperCase())))));
-const SocialMediaLinks = ({ socialMedia }) => {
-    const { language } = useContext(FooterContext);
-    return (React__default.createElement(SocialMediaLinksContainer, { "data-testid": "social-media-section" }, socialMedia &&
-        Object.keys(socialMedia).map(socialMediaKey => {
-            var _a, _b;
-            const socialMediaName = socialMediaKey.charAt(0).toUpperCase() +
-                socialMediaKey.toLowerCase().slice(1);
-            const currentObject = socialMedia[socialMediaKey];
-            const url = (_a = currentObject === null || currentObject === void 0 ? void 0 : currentObject.urls) === null || _a === void 0 ? void 0 : _a[language];
-            const ariaLabel = (_b = currentObject === null || currentObject === void 0 ? void 0 : currentObject.ariaLabels) === null || _b === void 0 ? void 0 : _b[language];
-            const SocialIcon = socialMediaIcons[socialMediaKey.toLowerCase()];
-            if (!url) {
-                return null;
-            }
-            return (React__default.createElement("a", { href: url, key: `social-media-link-${socialMediaKey}`, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : socialMediaName }, SocialIcon && React__default.createElement(SocialIcon, null)));
-        })));
+const LanguageLinks = ({
+  languages
+}) => (/*#__PURE__*/React__default.createElement(LangLinksContainer, {
+  "data-testid": "language-selector-section"
+}, languages.map(language => (/*#__PURE__*/React__default.createElement(LangLink, {
+  "aria-label": language.ariaLabel,
+  href: language.url,
+  lang: language.title.toLowerCase(),
+  // not currently in use
+  // isActive={currentLanguage === language.title.toLowerCase()}
+  key: language.title
+}, language.title.toUpperCase())))));
+const SocialMediaLinks = ({
+  socialMedia
+}) => {
+  const {
+    language
+  } = useContext(FooterContext);
+  return /*#__PURE__*/React__default.createElement(SocialMediaLinksContainer, {
+    "data-testid": "social-media-section"
+  }, socialMedia && Object.keys(socialMedia).map(socialMediaKey => {
+    var _a, _b;
+    const socialMediaName = socialMediaKey.charAt(0).toUpperCase() + socialMediaKey.toLowerCase().slice(1);
+    const currentObject = socialMedia[socialMediaKey];
+    const url = (_a = currentObject === null || currentObject === void 0 ? void 0 : currentObject.urls) === null || _a === void 0 ? void 0 : _a[language];
+    const ariaLabel = (_b = currentObject === null || currentObject === void 0 ? void 0 : currentObject.ariaLabels) === null || _b === void 0 ? void 0 : _b[language];
+    const SocialIcon = socialMediaIcons[socialMediaKey.toLowerCase()];
+    if (!url) {
+      return null;
+    }
+    return /*#__PURE__*/React__default.createElement("a", {
+      href: url,
+      key: `social-media-link-${socialMediaKey}`,
+      "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : socialMediaName
+    }, SocialIcon && /*#__PURE__*/React__default.createElement(SocialIcon, null));
+  }));
 };
-const ApplicationLinks = ({ applicationLinks, language, }) => {
-    var _a, _b, _c, _d, _e, _f;
-    const { appStore, googlePlay, title } = applicationLinks;
-    return (React__default.createElement(AppSection, null,
-        React__default.createElement("p", null, title[language]),
-        React__default.createElement(AppList, null,
-            ((_a = appStore.urls) === null || _a === void 0 ? void 0 : _a[language]) && (React__default.createElement("a", { "aria-label": (_b = appStore.ariaLabels) === null || _b === void 0 ? void 0 : _b[language], href: appStore.urls[language], target: "_blank", rel: "noopener noreferrer" },
-                React__default.createElement("img", { src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/App_Store_Badge.png", alt: (_c = appStore.alts) === null || _c === void 0 ? void 0 : _c[language] }))),
-            ((_d = googlePlay.urls) === null || _d === void 0 ? void 0 : _d[language]) && (React__default.createElement("a", { "aria-label": (_e = googlePlay.ariaLabels) === null || _e === void 0 ? void 0 : _e[language], href: googlePlay.urls[language], target: "_blank", rel: "noopener noreferrer" },
-                React__default.createElement("img", { src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/Google_Play_Badge.png", alt: (_f = googlePlay.alts) === null || _f === void 0 ? void 0 : _f[language] }))))));
+const ApplicationLinks = ({
+  applicationLinks,
+  language
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  const {
+    appStore,
+    googlePlay,
+    title
+  } = applicationLinks;
+  return /*#__PURE__*/React__default.createElement(AppSection, null, /*#__PURE__*/React__default.createElement("p", null, title[language]), /*#__PURE__*/React__default.createElement(AppList, null, ((_a = appStore.urls) === null || _a === void 0 ? void 0 : _a[language]) && (/*#__PURE__*/React__default.createElement("a", {
+    "aria-label": (_b = appStore.ariaLabels) === null || _b === void 0 ? void 0 : _b[language],
+    href: appStore.urls[language],
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/App_Store_Badge.png",
+    alt: (_c = appStore.alts) === null || _c === void 0 ? void 0 : _c[language]
+  }))), ((_d = googlePlay.urls) === null || _d === void 0 ? void 0 : _d[language]) && (/*#__PURE__*/React__default.createElement("a", {
+    "aria-label": (_e = googlePlay.ariaLabels) === null || _e === void 0 ? void 0 : _e[language],
+    href: googlePlay.urls[language],
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/Google_Play_Badge.png",
+    alt: (_f = googlePlay.alts) === null || _f === void 0 ? void 0 : _f[language]
+  })))));
 };
-const BottomSection = ({ items }) => {
-    const { applicationLinks, businessSelector, customLinks, generalInformation, languageSelector, socialMedia, } = items.footerNavigation;
-    const { collapseSize, language } = useContext(FooterContext);
-    let languages = [];
-    if (items.businessId === 'Corporate') {
-        if (languageSelector) {
-            languages = mapCorporateSelector(languageSelector);
-        }
-    }
-    else {
-        languages = customLinks || [];
+const BottomSection = ({
+  items
+}) => {
+  const {
+    applicationLinks,
+    businessSelector,
+    customLinks,
+    generalInformation,
+    languageSelector,
+    socialMedia
+  } = items.footerNavigation;
+  const {
+    collapseSize,
+    language
+  } = useContext(FooterContext);
+  let languages = [];
+  if (items.businessId === 'Corporate') {
+    if (languageSelector) {
+      languages = mapCorporateSelector(languageSelector);
     }
-    return (React__default.createElement(BottomContainer, { "$collapseSize": collapseSize, "data-testid": "bottom-section" },
-        languages.length > 0 && (React__default.createElement(LanguageLinks, { currentLanguage: language, languages: languages })),
-        React__default.createElement(BottomCenter, null,
-            socialMedia && React__default.createElement(SocialMediaLinks, { socialMedia: socialMedia }),
-            React__default.createElement(BusinessMenu, { items: businessSelector === null || businessSelector === void 0 ? void 0 : businessSelector.items, currentBusinessId: items.businessId, lang: language }),
-            generalInformation && (React__default.createElement(GeneralInformation, { generalInformation: generalInformation }))),
-        applicationLinks && (React__default.createElement(ApplicationLinks, { applicationLinks: applicationLinks, language: language }))));
+  } else {
+    languages = customLinks || [];
+  }
+  return /*#__PURE__*/React__default.createElement(BottomContainer, {
+    "$collapseSize": collapseSize,
+    "data-testid": "bottom-section"
+  }, languages.length > 0 && (/*#__PURE__*/React__default.createElement(LanguageLinks, {
+    currentLanguage: language,
+    languages: languages
+  })), /*#__PURE__*/React__default.createElement(BottomCenter, null, socialMedia && /*#__PURE__*/React__default.createElement(SocialMediaLinks, {
+    socialMedia: socialMedia
+  }), /*#__PURE__*/React__default.createElement(BusinessMenu, {
+    items: businessSelector === null || businessSelector === void 0 ? void 0 : businessSelector.items,
+    currentBusinessId: items.businessId,
+    lang: language
+  }), generalInformation && (/*#__PURE__*/React__default.createElement(GeneralInformation, {
+    generalInformation: generalInformation
+  }))), applicationLinks && (/*#__PURE__*/React__default.createElement(ApplicationLinks, {
+    applicationLinks: applicationLinks,
+    language: language
+  })));
 };
 
 export { ApplicationLinks, BottomSection, Categories, GeneralInformation, LangLink, SocialMediaLinks, TopSection };