@faststore/core 2.0.132-alpha.0 → 2.0.133-alpha.0

package/.turbo/turbo-build.log

@@ -16,32 +16,33 @@ info  - Collecting page data...
 info  - Generating static pages (0/7)
 info  - Generating static pages (1/7)
 info  - Generating static pages (3/7)
+warn - IncentivesHeader not found. Add a new component for this section or remove it from the CMS
 warn - CallToAction not found. Add a new component for this section or remove it from the CMS
 info  - Generating static pages (5/7)
 info  - Generating static pages (7/7)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      2.88 kB         126 kB
-├   └ css/d730f6a28e01cf84.css             7.22 kB
+┌ ● /                                      2.87 kB         126 kB
+├   └ css/56ac93c668f9132f.css             7.22 kB
 ├   /_app                                  0 B            77.9 kB
-├ ● /[...slug]                             7.49 kB         133 kB
+├ ● /[...slug]                             9.96 kB         132 kB
 ├   └ css/408ab64ab5c04787.css             7.95 kB
-├ ● /[slug]/p                              11.2 kB         135 kB
+├ ● /[slug]/p                              11.2 kB         134 kB
 ├   └ css/bc39c02d387d74b8.css             9.34 kB
-├ ○ /404                                   1.11 kB         110 kB
-├ ● /500                                   1.12 kB         110 kB
-├ ● /account                               669 B           110 kB
+├ ○ /404                                   1.09 kB         113 kB
+├ ● /500                                   1.11 kB         113 kB
+├ ● /account                               672 B           113 kB
 ├ λ /api/graphql                           0 B            77.9 kB
 ├ λ /api/preview                           0 B            77.9 kB
-├ ● /checkout                              657 B           110 kB
-├ ● /login                                 1.02 kB         110 kB
-└ ● /s                                     961 B           121 kB
+├ ● /checkout                              659 B           113 kB
+├ ● /login                                 1.01 kB         113 kB
+└ ● /s                                     964 B           123 kB
 + First Load JS shared by all              80.7 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-fd466221927468fd.js        23.9 kB
-  ├ chunks/pages/_app-b601536188b9a919.js  6.43 kB
-  ├ chunks/webpack-9f89bcf71cec5fbe.js     2.27 kB
+  ├ chunks/pages/_app-3e4e7e579cb0681a.js  6.43 kB
+  ├ chunks/webpack-ff9d67a587aa8a8e.js     2.29 kB
   └ css/587c27bbda64e700.css               2.8 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.133-alpha.0](https://github.com/vtex/faststore/compare/v2.0.132-alpha.0...v2.0.133-alpha.0) (2023-05-09)
+
+### Features
+
+- Adjust `Footer` for CMS ([#1743](https://github.com/vtex/faststore/issues/1743)) ([86dd67a](https://github.com/vtex/faststore/commit/86dd67a293dcd3a67a5b96ac45dc27d097f95381))
+
 ## [2.0.132-alpha.0](https://github.com/vtex/faststore/compare/v2.0.131-alpha.0...v2.0.132-alpha.0) (2023-05-09)
 
 ### Bug Fixes

package/cms/faststore/sections.json

@@ -532,7 +532,7 @@
                         ],
                         "enum": [
                           "Visa",
-                          "DinersClub",
+                          "Diners",
                           "Mastercard",
                           "EloCard",
                           "PayPal",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.132-alpha.0",
+  "version": "2.0.133-alpha.0",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -30,10 +30,10 @@
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
     "@faststore/api": "^2.0.118-alpha.0",
-    "@faststore/components": "^2.0.132-alpha.0",
+    "@faststore/components": "^2.0.133-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.118-alpha.0",
-    "@faststore/ui": "^2.0.132-alpha.0",
+    "@faststore/ui": "^2.0.133-alpha.0",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
     "autoprefixer": "^10.4.0",
@@ -108,5 +108,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "e6d7561f0783b20ba4966d9e7c971146300ff129"
+  "gitHead": "d6ccdde94a4a7210b6e2ebf77a6caf358ecb07b2"
 }

package/src/components/cms/GlobalSections.tsx

@@ -5,13 +5,14 @@ import type { ComponentType } from 'react'
 import CUSTOM_COMPONENTS from 'src/customizations/components'
 import { PageContentType, getPage } from 'src/server/cms'
 
-import Footer from 'src/components/common/Footer'
 import RegionBar from 'src/components/common/RegionBar'
 import Toast from 'src/components/common/Toast'
 import Navbar from 'src/components/navigation/Navbar'
-import Alert from 'src/components/sections/Alert/Alert'
 import RenderSections from './RenderSections'
 
+import Footer from 'src/components/sections/Footer'
+import Alert from 'src/components/sections/Alert/Alert'
+
 export const GLOBAL_SECTIONS_CONTENT_TYPE = 'globalSections'
 
 export type GlobalSectionsData = {
@@ -21,6 +22,7 @@ export type GlobalSectionsData = {
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
   Alert,
+  Footer,
   ...CUSTOM_COMPONENTS,
 }
 
@@ -56,7 +58,6 @@ function GlobalSections({
         {children}
       </main>
 
-      <Footer />
       {hasChildren && (
         <RenderSections sections={lastSections} components={COMPONENTS} />
       )}

package/src/components/common/Footer/Footer.tsx

@@ -1,127 +1,32 @@
-import {
-  Icon,
-  List as UIList,
-  PaymentMethods as UIPaymentMethods,
-} from '@faststore/ui'
-
-import Link from 'src/components/ui/Link'
-import Logo from 'src/components/ui/Logo'
 import { mark } from 'src/sdk/tests/mark'
 
-import Incentives from 'src/components/ui/Incentives/Incentives'
-import { incentivesMockFooter } from 'src/components/ui/Incentives/incentivesMock'
-import FooterFlags from './FooterFlags'
-import FooterLinks from './FooterLinks'
-import styles from './section.module.scss'
+export function FooterInfo({ children }) {
+  return (
+    <div data-fs-footer-info className="layout__content">
+      {children}
+    </div>
+  )
+}
 
-type FooterProps = {
-  /**
-   * Enables Incentives Section
-   */
-  sectionIncentives?: boolean
-  /**
-   * Enables Social Section
-   */
-  sectionSocial?: boolean
-  /**
-   * Enables Payment Methods Section
-   */
-  sectionPaymentMethods?: boolean
+export function FooterNavigation({ children }) {
+  return (
+    <div data-fs-footer-navigation className="layout__content">
+      {children}
+    </div>
+  )
 }
 
-export function Footer({
-  sectionIncentives = true,
-  sectionSocial = true,
-  sectionPaymentMethods = true,
-}: FooterProps) {
+export function Footer({ children }) {
   return (
-    <footer className={`section ${styles.section} section-footer`}>
-      <div
-        data-fs-footer
-        data-fs-footer-incentives={sectionIncentives}
-        data-fs-footer-social={sectionSocial}
-        data-fs-footer-payment-methods={sectionPaymentMethods}
-        className="layout__content-full"
-      >
-        {sectionIncentives && <Incentives incentives={incentivesMockFooter} />}
-        <div data-fs-footer-nav className="layout__content">
-          <FooterLinks />
-          {sectionSocial && (
-            <section data-fs-footer-social>
-              <p data-fs-footer-title>Follow us</p>
-              <UIList>
-                <li>
-                  <Link
-                    variant="display"
-                    size="small"
-                    href="https://www.facebook.com/"
-                    title="Facebook"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Icon name="Facebook" />
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    variant="display"
-                    size="small"
-                    href="https://www.instagram.com/"
-                    title="Instagram"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Icon name="Instagram" />
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    variant="display"
-                    size="small"
-                    href="https://www.pinterest.com/"
-                    title="Pinterest"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Icon name="Pinterest" />
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    variant="display"
-                    size="small"
-                    href="https://twitter.com/"
-                    title="Twitter"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Icon name="Twitter" />
-                  </Link>
-                </li>
-              </UIList>
-            </section>
-          )}
-        </div>
-        <div data-fs-footer-note className="layout__content">
-          <Logo />
-          {sectionPaymentMethods && (
-            <UIPaymentMethods
-              title={<p>Payment Methods</p>}
-              flagList={FooterFlags}
-            />
-          )}
-          <div data-fs-footer-copyright className="text__legend">
-            <p>This website uses VTEX technology</p>
-            <p>
-              In-store price may vary. Prices and offers are subject to change.
-              2021 Store name. All rights reserved. Store is a trademark of
-              Store and its affiliated companies.
-            </p>
-            <address>Mount St, 000, New York / NY - 00000.</address>
-          </div>
-        </div>
-      </div>
-    </footer>
+    <div
+      data-fs-footer
+      data-fs-footer-social
+      data-fs-footer-incentives
+      data-fs-footer-payment-methods
+      className="layout__content-full"
+    >
+      {children}
+    </div>
   )
 }
 

package/src/components/common/Footer/FooterLinks.tsx

@@ -9,101 +9,23 @@ import { useState } from 'react'
 
 import Link from 'src/components/ui/Link'
 
-const links = [
-  {
-    title: 'Our company',
-    items: [
-      {
-        href: '/',
-        name: 'About Us',
-      },
-      {
-        href: '/',
-        name: 'Our Blog',
-      },
-      {
-        href: '/',
-        name: 'Stores',
-      },
-      {
-        href: '/',
-        name: 'Work With Us',
-      },
-    ],
-  },
-  {
-    title: 'Orders & Purchases',
-    items: [
-      {
-        href: '/',
-        name: 'Check Order Status',
-      },
-      {
-        href: '/',
-        name: 'Returns and Exchanges',
-      },
-      {
-        href: '/',
-        name: 'Product Recall',
-      },
-      {
-        href: '/',
-        name: 'Gift Cards',
-      },
-    ],
-  },
-  {
-    title: 'Support & Services',
-    items: [
-      {
-        href: '/',
-        name: 'Support Center',
-      },
-      {
-        href: '/',
-        name: 'Schedule a Service',
-      },
-      {
-        href: '/',
-        name: 'Contact Us',
-      },
-    ],
-  },
-  {
-    title: 'Partnerships',
-    items: [
-      {
-        href: '/',
-        name: 'Affiliate Program',
-      },
-      {
-        href: '/',
-        name: 'Advertise with US',
-      },
-      {
-        href: '/',
-        name: 'Market Place',
-      },
-    ],
-  },
-]
-
-type LinkItem = {
-  href: string
-  name: string
+type Item = {
+  url: string
+  text: string
 }
 
-interface LinksListProps {
-  items: LinkItem[]
+type FooterLink = {
+  items: Item[]
+  sectionTitle: string
 }
 
-function LinksList({ items }: LinksListProps) {
+function Links({ items }: Pick<FooterLink, 'items'>) {
   return (
     <UIList>
       {items.map((item) => (
-        <li key={item.name}>
-          <Link variant="display" size="small" href={item.href}>
-            {item.name}
+        <li key={item.text}>
+          <Link variant="display" size="small" href={item.url}>
+            {item.text}
           </Link>
         </li>
       ))}
@@ -111,7 +33,11 @@ function LinksList({ items }: LinksListProps) {
   )
 }
 
-function FooterLinks() {
+export interface FooterLinksProps {
+  links: FooterLink[]
+}
+
+function FooterLinks({ links }: FooterLinksProps) {
   const [indicesExpanded, setIndicesExpanded] = useState<Set<number>>(
     new Set([])
   )
@@ -129,11 +55,11 @@ function FooterLinks() {
     <section data-fs-footer data-fs-footer-links>
       <div className="display-mobile">
         <UIAccordion indices={indicesExpanded} onChange={onChange}>
-          {links.map((section) => (
-            <UIAccordionItem key={section.title}>
-              <UIAccordionButton>{section.title}</UIAccordionButton>
+          {links.map(({ sectionTitle, items }) => (
+            <UIAccordionItem key={sectionTitle}>
+              <UIAccordionButton>{sectionTitle}</UIAccordionButton>
               <UIAccordionPanel>
-                <LinksList items={section.items} />
+                <Links items={items} />
               </UIAccordionPanel>
             </UIAccordionItem>
           ))}
@@ -142,10 +68,10 @@ function FooterLinks() {
 
       <div className="hidden-mobile">
         <nav data-fs-footer-links-columns>
-          {links.map((section) => (
-            <div key={section.title}>
-              <p data-fs-footer-title>{section.title}</p>
-              <LinksList items={section.items} />
+          {links.map(({ sectionTitle, items }) => (
+            <div key={sectionTitle}>
+              <p data-fs-footer-links-title>{sectionTitle}</p>
+              <Links items={items} />
             </div>
           ))}
         </nav>

package/src/components/common/Footer/FooterSocial.tsx

@@ -0,0 +1,42 @@
+import { Icon as UIIcon, List as UIList } from '@faststore/ui'
+
+import Link from 'src/components/ui/Link'
+
+type FooterSocialLink = {
+  icon: {
+    icon: string
+  }
+  alt: string
+  url: string
+}
+
+export interface FooterSocialProps {
+  title: string
+  links: FooterSocialLink[]
+}
+
+function FooterSocial({ title, links }: FooterSocialProps) {
+  return (
+    <section data-fs-footer-social>
+      <p data-fs-footer-social-title>{title}</p>
+      <UIList>
+        {links.map(({ icon: { icon }, url }) => (
+          <li key={icon}>
+            <Link
+              href={url}
+              title={icon}
+              size="small"
+              target="_blank"
+              variant="display"
+              rel="noopener noreferrer"
+            >
+              <UIIcon name={icon} />
+            </Link>
+          </li>
+        ))}
+      </UIList>
+    </section>
+  )
+}
+
+export default FooterSocial

package/src/components/common/Footer/index.ts

@@ -1,3 +1,8 @@
 export { default } from './Footer'
+export { FooterInfo, FooterNavigation } from './Footer'
+
 export { default as FooterLinks } from './FooterLinks'
-export { default as FooterFlags } from './FooterFlags'
+export type { FooterLinksProps } from './FooterLinks'
+
+export { default as FooterSocial } from './FooterSocial'
+export type { FooterSocialProps } from './FooterSocial'

package/src/components/sections/Footer/Footer.tsx

@@ -0,0 +1,87 @@
+import { PaymentMethods as UIPaymentMethods } from '@faststore/ui'
+import type { PaymentMethodsProps as UIPaymentMethodProps } from '@faststore/ui'
+
+import Section from '../Section'
+
+import UIFooter, {
+  FooterLinks,
+  FooterSocial,
+  FooterInfo as UIFooterInfo,
+  FooterNavigation as UIFooterNavigation,
+} from '../../common/Footer'
+import type { FooterLinksProps, FooterSocialProps } from '../../common/Footer'
+
+import { Image } from '../../ui/Image'
+import UIIncentives from '../../ui/Incentives'
+import type { Incentive } from '../../ui/Incentives'
+
+import styles from './section.module.scss'
+
+export type FooterProps = {
+  incentives: Incentive[]
+  footerLinks: FooterLinksProps['links']
+  footerSocial: {
+    title?: FooterSocialProps['title']
+    socialLinks: FooterSocialProps['links']
+  }
+  logo: {
+    src: string
+    alt: string
+  }
+  copyrightInfo: string
+  acceptedPaymentMethods: {
+    showPaymentMethods: boolean
+    title?: string
+    paymentMethods?: UIPaymentMethodProps['flagList']
+  }
+}
+
+const Footer = ({
+  incentives,
+  footerLinks,
+  footerSocial,
+  footerSocial: { title: footerSocialTitle },
+  logo: { src: logoSrc, alt: logoAlt },
+  copyrightInfo,
+  acceptedPaymentMethods: {
+    showPaymentMethods,
+    title: acceptedPaymentMethodsTitle,
+    paymentMethods,
+  },
+}: FooterProps) => {
+  return (
+    <Section className={`${styles.section} section-footer`}>
+      <UIFooter>
+        <UIIncentives incentives={incentives} />
+        <UIFooterNavigation>
+          <FooterLinks links={footerLinks} />
+          <FooterSocial
+            title={footerSocialTitle}
+            links={footerSocial.socialLinks}
+          />
+        </UIFooterNavigation>
+        <UIFooterInfo>
+          <Image
+            data-fs-footer-logo
+            loading="lazy"
+            src={logoSrc}
+            alt={logoAlt}
+            width={112}
+            height={119}
+          />
+          {showPaymentMethods && (
+            <UIPaymentMethods
+              flagList={paymentMethods}
+              title={<p>{acceptedPaymentMethodsTitle}</p>}
+            />
+          )}
+          <div data-fs-footer-copyright className="text__legend">
+            <p>{copyrightInfo}</p>
+          </div>
+        </UIFooterInfo>
+      </UIFooter>
+    </Section>
+  )
+}
+
+export default Footer

package/src/components/sections/Footer/index.ts

@@ -0,0 +1 @@
+export { default } from './Footer'

package/src/components/sections/Incentives/Incentives.tsx

@@ -0,0 +1,19 @@
+import UIIncentives from 'src/components/ui/Incentives/Incentives'
+import type { Incentive } from 'src/components/ui/Incentives'
+
+import Section from '../Section'
+import styles from './section.module.scss'
+
+interface Props {
+  incentives: Incentive[]
+}
+
+function Incentives({ incentives }: Props) {
+  return (
+    <Section className={`${styles.section} section-incentives`}>
+      <UIIncentives incentives={incentives} colored />
+    </Section>
+  )
+}
+
+export default Incentives

package/src/components/sections/Incentives/index.ts

@@ -0,0 +1 @@
+export { default } from './Incentives'

package/src/components/ui/Incentives/Incentives.tsx

@@ -1,10 +1,15 @@
-import { Icon, Incentive as UIIncentive, List as UIList } from '@faststore/ui'
+import {
+  Icon as UIIcon,
+  List as UIList,
+  Incentive as UIIncentive,
+} from '@faststore/ui'
 
-interface Incentive {
+export type Incentive = {
   icon: string
-  title?: string
+  title: string
   firstLineText: string
   secondLineText?: string
+  alt?: string
 }
 
 export interface IncentivesProps {
@@ -34,16 +39,15 @@ function Incentives({
         {incentives.map((incentive, index) => (
           <li key={String(index)}>
             <UIIncentive>
-              <Icon
+              <UIIcon
                 data-fs-incentive-icon
+                aria-label={incentive.alt}
                 name={incentive.icon}
                 width={32}
                 height={32}
               />
               <div data-fs-incentive-content>
-                {incentive.title && (
-                  <p data-fs-incentive-title>{incentive.title}</p>
-                )}
+                <p data-fs-incentive-title>{incentive.title}</p>
                 <span data-fs-incentive-description>
                   {incentive.firstLineText}
                 </span>

package/src/components/ui/Incentives/index.ts

@@ -1,2 +1,2 @@
 export { default } from './Incentives'
-export type { IncentivesProps } from './Incentives'
+export type { IncentivesProps, Incentive } from './Incentives'

package/src/pages/index.tsx

@@ -6,7 +6,7 @@ import type { ComponentType } from 'react'
 import RenderSections from 'src/components/cms/RenderSections'
 import BannerText from 'src/components/sections/BannerText'
 import Hero from 'src/components/sections/Hero'
-import IncentivesHeader from 'src/components/sections/IncentivesHeader/IncentivesHeader'
+import Incentives from 'src/components/sections/Incentives'
 import Newsletter from 'src/components/sections/Newsletter'
 import ProductShelf from 'src/components/sections/ProductShelf'
 import ProductTiles from 'src/components/sections/ProductTiles'
@@ -24,7 +24,7 @@ import GlobalSections, {
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
   Hero,
-  IncentivesHeader,
+  Incentives,
   ProductShelf,
   ProductTiles,
   BannerText,

package/src/components/common/Footer/FooterFlags.tsx

@@ -1,26 +0,0 @@
-import { Icon } from '@faststore/ui'
-
-const FooterFlags = [
-  { image: <Icon width={32} height={22.5} name="Visa" />, text: 'Visa' },
-  {
-    image: <Icon width={32} height={22.5} name="Diners" />,
-    text: 'Diners Club',
-  },
-  {
-    image: <Icon width={32} height={22.5} name="Mastercard" />,
-    text: 'Mastercard',
-  },
-  { image: <Icon width={32} height={22.5} name="EloCard" />, text: 'Elo Card' },
-  { image: <Icon width={32} height={22.5} name="PayPal" />, text: 'PayPal' },
-  { image: <Icon width={32} height={22.5} name="Stripe" />, text: 'Stripe' },
-  {
-    image: <Icon width={32} height={22.5} name="GooglePay" />,
-    text: 'GooglePay',
-  },
-  {
-    image: <Icon width={32} height={22.5} name="ApplePay" />,
-    text: 'ApplePay',
-  },
-]
-
-export default FooterFlags

package/src/components/sections/IncentivesHeader/IncentivesHeader.tsx

@@ -1,24 +0,0 @@
-import Incentives from 'src/components/ui/Incentives/Incentives'
-import Section from '../Section'
-import styles from './section.module.scss'
-
-interface Incentive {
-  icon: string
-  title?: string
-  firstLineText: string
-  secondLineText?: string
-}
-
-interface Props {
-  incentives: Incentive[]
-}
-
-function IncentivesHeader({ incentives }: Props) {
-  return (
-    <Section className={`${styles.section} section-incentives-header`}>
-      <Incentives incentives={incentives} colored />
-    </Section>
-  )
-}
-
-export default IncentivesHeader

package/src/components/sections/IncentivesHeader/index.ts

@@ -1 +0,0 @@
-export { default } from './IncentivesHeader'

package/src/components/ui/Incentives/incentivesMock.ts

@@ -1,27 +0,0 @@
-export const incentivesMockFooter = [
-  {
-    icon: 'ShieldCheck',
-    firstLineText: 'Trusted',
-    secondLineText: 'by Safecon',
-  },
-  {
-    icon: 'Medal',
-    firstLineText: 'Quality',
-    secondLineText: 'Products',
-  },
-  {
-    icon: 'CircleWavyCheck',
-    firstLineText: '3-year',
-    secondLineText: 'Guarantee',
-  },
-  {
-    icon: 'Storefront',
-    firstLineText: 'Pickup',
-    secondLineText: 'Options',
-  },
-  {
-    icon: 'Truck',
-    firstLineText: 'Free',
-    secondLineText: 'Shippping',
-  },
-]