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

package/src/components/sections/EmptyState/EmptyState.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react'
+import type { PropsWithChildren } from 'react'
+
+import Section from '../Section'
+import styles from './section.module.scss'
+
+import { EmptyState as UIEmptyState } from '@faststore/ui'
+
+export interface EmptyStateProps {
+  title: string
+  titleIcon?: ReactNode
+}
+
+function EmptyState({
+  title,
+  titleIcon,
+  children,
+}: PropsWithChildren<EmptyStateProps>) {
+  return (
+    <Section className={`${styles.section} section-empty-state`}>
+      <UIEmptyState title={title} titleIcon={titleIcon} bkgColor="light">
+        {children}
+      </UIEmptyState>
+    </Section>
+  )
+}
+
+export default EmptyState

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

@@ -0,0 +1,2 @@
+export { default } from './EmptyState'
+export type { EmptyStateProps } from './EmptyState'

package/src/components/sections/EmptyState/section.module.scss

@@ -0,0 +1,8 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@faststore/ui/src/styles/base/utilities.scss";
+
+.section {
+  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Loader/styles.scss";
+  @import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
+}

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/{common → sections}/Footer/section.module.scss

@@ -2,6 +2,7 @@
 @import "@faststore/ui/src/styles/base/utilities.scss";
 
 .section {
+  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
   @import "@faststore/ui/src/components/atoms/Link/styles.scss";
   @import "@faststore/ui/src/components/atoms/List/styles.scss";
   @import "@faststore/ui/src/components/atoms/Logo/styles.scss";

package/src/components/sections/Hero/Hero.tsx

@@ -41,7 +41,6 @@ const Hero = ({
         <UIHeroImage data-fs-hero-image>
           <Image
             loading="eager"
-            priority
             src={image.src}
             alt={image.alt}
             width={360}

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/sections/ProductDetails/section.module.scss

@@ -10,6 +10,7 @@
   @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
   @import "@faststore/ui/src/components/atoms/Button/styles.scss";
   @import "@faststore/ui/src/components/atoms/Input/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Price/styles.scss";
   @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
   @import "@faststore/ui/src/components/molecules/Breadcrumb/styles.scss";
   @import "@faststore/ui/src/components/molecules/BuyButton/styles.scss";

package/src/components/sections/ProductGallery/section.module.scss

@@ -16,6 +16,7 @@
   @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
   @import "@faststore/ui/src/components/molecules/DiscountBadge/styles.scss";
   @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
+  @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
   @import "@faststore/ui/src/components/molecules/ProductCard/styles.scss";
   @import "@faststore/ui/src/components/molecules/ProductCardSkeleton/styles";
   @import "@faststore/ui/src/components/molecules/SelectField/styles.scss";

package/src/components/sections/ProductShelf/ProductShelf.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useId, useRef } from 'react'
 import { useInView } from 'react-intersection-observer'
 
 import { ProductShelf as UIProductShelf } from '@faststore/ui'
@@ -7,11 +7,12 @@ import type { ProductsQueryQueryVariables } from '@generated/graphql'
 import ProductShelfSkeleton from 'src/components/skeletons/ProductShelfSkeleton'
 import { useViewItemListEvent } from 'src/sdk/analytics/hooks/useViewItemListEvent'
 import { useProductsQuery } from 'src/sdk/product/useProductsQuery'
+import { textToKebabCase } from 'src/utils/utilities'
 
+import Carousel from '../../ui/Carousel'
+import Section from '../Section'
 import { Components } from './Overrides'
 const { ProductCard } = Components
-import Section from '../Section'
-import Carousel from '../../ui/Carousel'
 
 import styles from './section.module.scss'
 
@@ -25,6 +26,8 @@ function ProductShelf({
   withDivisor = false,
   ...variables
 }: ProductShelfProps) {
+  const titleId = textToKebabCase(title)
+  const id = useId()
   const viewedOnce = useRef(false)
   const { ref, inView } = useInView()
   const products = useProductsQuery(variables)
@@ -63,7 +66,7 @@ function ProductShelf({
         loading={products === undefined}
       >
         <UIProductShelf>
-          <Carousel>
+          <Carousel id={titleId || id}>
             {productEdges.map((product, idx) => (
               <ProductCard
                 bordered
@@ -71,6 +74,11 @@ function ProductShelf({
                 product={product.node}
                 index={idx + 1}
                 aspectRatio={aspectRatio}
+                imgProps={{
+                  width: 216,
+                  height: 216,
+                  sizes: '(max-width: 768px) 42vw, 30vw',
+                }}
               />
             ))}
           </Carousel>

package/src/components/sections/ProductTiles/ProductTiles.tsx

@@ -33,6 +33,26 @@ const getRatio = (products: number, idx: number) => {
   return 3 / 4
 }
 
+const getSizes = (products: number, idx: number) => {
+  const expandsFirstTile =
+    products === NUMBER_ITEMS_TO_EXPAND_FIRST && idx === 0
+
+  const expandsFirstTwoTile =
+    products === NUMBER_ITEMS_TO_EXPAND_FIRST_TWO && (idx === 0 || idx === 1)
+
+  if (expandsFirstTile || expandsFirstTwoTile) {
+    return {
+      width: 594,
+      height: 364,
+    }
+  }
+
+  return {
+    width: 284,
+    height: 364,
+  }
+}
+
 const ProductTiles = ({ title, ...variables }: ProductTilesProps) => {
   const viewedOnce = useRef(false)
   const { ref, inView } = useInView()
@@ -75,6 +95,7 @@ const ProductTiles = ({ title, ...variables }: ProductTilesProps) => {
                   index={idx + 1}
                   variant="wide"
                   aspectRatio={getRatio(productEdges.length, idx)}
+                  imgProps={getSizes(productEdges.length, idx)}
                 />
               </Tile>
             ))}

package/src/components/ui/Button/ButtonSignIn/ButtonSignIn.tsx

@@ -18,7 +18,7 @@ const ButtonSignIn = () => {
       icon={<Icon name="User" width={18} height={18} weight="bold" />}
       iconPosition="left"
     >
-      <span>{person?.id ? 'My Account' : 'Sign In'}</span>
+      {person?.id ? 'My Account' : 'Sign In'}
     </LinkButton>
   )
 }

package/src/components/ui/Image/Image.tsx

@@ -1,29 +1,18 @@
 import { memo } from 'react'
 
 import NextImage, { ImageProps } from 'next/future/image'
-import { ThumborOptions } from './thumborUrlBuilder'
-import { useImage } from './useImage'
+import loader from './loader'
 
-// Next loader function does not handle all props as height and options,
-// so we use the useImage hook to handle the custom thumbor loader (VTEX CDN) along with unoptimized prop
+// Next loader function does not handle all props as height and options
+// so we use a custom loader to handle images using thumbor server with VTEX CDN
 // https://nextjs.org/docs/api-reference/next/image#loader
-function Image({ src, width, height, quality, ...otherProps }: ImageProps) {
-  const { src: thumborSrc, alt } = useImage({
-    src: String(src),
-    width: Number(width),
-    height: Number(height),
-    options: quality ? ({ filters: { quality } } as ThumborOptions) : undefined,
-    ...otherProps,
-  })
-
+function Image({ loading = 'lazy', ...otherProps }: ImageProps) {
   return (
     <NextImage
       data-fs-image
-      unoptimized
-      src={thumborSrc}
-      width={width}
-      height={height}
-      alt={alt}
+      loader={loader}
+      loading={loading}
+      priority={loading === 'eager'}
       {...otherProps}
     />
   )

package/src/components/ui/Image/loader.ts

@@ -0,0 +1,16 @@
+import storeConfig from 'faststore.config'
+const THUMBOR_SERVER = `https://${storeConfig.api.storeId}.vtexassets.com`
+
+export default function customImageLoader({ src, width, quality }) {
+  const preSizeComponents = [THUMBOR_SERVER, 'unsafe']
+
+  // proportional to the width, enter a height of 0,
+  const height = 0
+  const finalSize = `${width}x${height}`
+
+  const postSizeComponents: string[] = ['center', 'middle']
+  quality && postSizeComponents.push(`filters:quality(${quality || 80})`)
+  postSizeComponents.push(encodeURIComponent(src))
+
+  return [...preSizeComponents, finalSize, ...postSizeComponents].join('/')
+}

package/src/components/ui/ImageGallery/ImageGallery.tsx

@@ -1,21 +1,15 @@
-import { useEffect, useState } from 'react'
 import {
-  ImageGallery as UIImageGallery,
   ImageElementData,
   ImageZoom,
+  ImageGallery as UIImageGallery,
 } from '@faststore/ui'
+import { useEffect, useState } from 'react'
 
-import { Image } from 'src/components/ui/Image'
 import { useRouter } from 'next/router'
+import { Image } from 'src/components/ui/Image'
 
 const ImageComponent = ({ url, alternateName }) => (
-  <Image
-    src={url}
-    alt={alternateName}
-    sizes="(max-width: 72px) 25vw, 30vw"
-    width={72}
-    height={72}
-  />
+  <Image src={url} alt={alternateName} width={68} height={68} />
 )
 
 export interface ImageGalleryProps {
@@ -41,11 +35,10 @@ const ImageGallery = ({ images, ...otherProps }: ImageGalleryProps) => {
         <Image
           src={currentImage.url}
           alt={currentImage.alternateName}
-          sizes="(max-width: 804px) 25vw, 30vw"
-          width={804}
-          height={804 * (3 / 4)}
+          sizes="(max-width: 768px) 25vw, 30vw"
+          width={691}
+          height={691 * (3 / 4)}
           loading="eager"
-          priority
         />
       </ImageZoom>
     </UIImageGallery>

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/components/ui/SkuSelector/Selectors.tsx

@@ -1,12 +1,8 @@
-import { HTMLAttributes, useCallback, useMemo } from 'react'
+import { HTMLAttributes } from 'react'
 
-import { Image } from '../Image'
-import {
-  SkuSelector as UISkuSelector,
-  SkuSelectorProps,
-  SkuOption,
-} from '@faststore/ui'
+import { SkuSelectorProps, SkuSelector as UISkuSelector } from '@faststore/ui'
 import NextLink from 'next/link'
+import { Image } from '../Image'
 
 export type SkuVariantsByName = Record<
   string,
@@ -32,16 +28,7 @@ const ImageComponent: SkuSelectorProps['ImageComponent'] = ({
   src,
   alt,
   ...otherProps
-}) => (
-  <Image
-    src={src}
-    alt={alt}
-    width={20}
-    height={20}
-    loading="lazy"
-    {...otherProps}
-  />
-)
+}) => <Image src={src} alt={alt} width={34} height={34} {...otherProps} />
 
 function Selectors({
   slugsMap,

package/src/pages/404.tsx

@@ -1,6 +1,5 @@
 import { NextSeo } from 'next-seo'
 import { useRouter } from 'next/router'
-import { EmptyState as UIEmptyState, Icon as UIIcon } from '@faststore/ui'
 import GlobalSections, {
   GlobalSectionsData,
   getGlobalSectionsData,
@@ -8,6 +7,9 @@ import GlobalSections, {
 import { GetStaticProps } from 'next'
 import { Locator } from '@vtex/client-cms'
 
+import { Icon as UIIcon } from '@faststore/ui'
+import EmptyState from 'src/components/sections/EmptyState'
+
 const useErrorState = () => {
   const router = useRouter()
   const { from } = router.query
@@ -29,7 +31,7 @@ function Page({ globalSections }: Props) {
     <GlobalSections {...globalSections}>
       <NextSeo noindex nofollow />
 
-      <UIEmptyState
+      <EmptyState
         title="Not Found: 404"
         titleIcon={
           <UIIcon
@@ -39,10 +41,9 @@ function Page({ globalSections }: Props) {
             weight="thin"
           />
         }
-        bkgColor="light"
       >
         <p>This app could not find url {fromUrl}</p>
-      </UIEmptyState>
+      </EmptyState>
     </GlobalSections>
   )
 }

package/src/pages/500.tsx

@@ -7,6 +7,9 @@ import GlobalSections, {
   getGlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
 
+import { Icon as UIIcon } from '@faststore/ui'
+import EmptyState from 'src/components/sections/EmptyState'
+
 type Props = {
   globalSections: GlobalSectionsData
 }
@@ -28,12 +31,23 @@ function Page({ globalSections }: Props) {
     <GlobalSections {...globalSections}>
       <NextSeo noindex nofollow />
 
-      <h1>500</h1>
-      <h2>Internal Server Error</h2>
+      <EmptyState
+        title="500"
+        titleIcon={
+          <UIIcon
+            name="CircleWavyWarning"
+            width={56}
+            height={56}
+            weight="thin"
+          />
+        }
+      >
+        <h2>Internal Server Error</h2>
 
-      <div>
-        The server errored with id {errorId} when visiting page {fromUrl}
-      </div>
+        <div>
+          The server errored with id {errorId} when visiting page {fromUrl}
+        </div>
+      </EmptyState>
     </GlobalSections>
   )
 }

package/src/pages/[...slug].tsx

@@ -11,7 +11,6 @@ import { BreadcrumbJsonLd, NextSeo } from 'next-seo'
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
 
-import { Icon } from '@faststore/ui'
 import type {
   ServerCollectionPageQueryQuery,
   ServerCollectionPageQueryQueryVariables,

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/pages/login.tsx

@@ -1,6 +1,5 @@
 import { useEffect } from 'react'
 import { NextSeo } from 'next-seo'
-import { EmptyState as UIEmptyState, Loader as UILoader } from '@faststore/ui'
 
 import storeConfig from '../../faststore.config'
 import GlobalSections, {
@@ -10,6 +9,9 @@ import GlobalSections, {
 import { GetStaticProps } from 'next'
 import { Locator } from '@vtex/client-cms'
 
+import { Loader as UILoader } from '@faststore/ui'
+import EmptyState from 'src/components/sections/EmptyState'
+
 type Props = {
   globalSections: GlobalSectionsData
 }
@@ -23,9 +25,9 @@ function Page({ globalSections }: Props) {
     <GlobalSections {...globalSections}>
       <NextSeo noindex nofollow />
 
-      <UIEmptyState title="Loading" bkgColor="light">
+      <EmptyState title="Loading">
         <UILoader />
-      </UIEmptyState>
+      </EmptyState>
     </GlobalSections>
   )
 }

package/src/utils/utilities.ts

@@ -0,0 +1,13 @@
+//Input "Example Text!". Output: example-text
+export function textToKebabCase(text: string): string {
+  // Replace spaces and special characters with hyphens
+  let kebabCase = text.replace(/[^\w\s]/gi, '-')
+
+  // Remove whitespace
+  kebabCase = kebabCase.replace(/\s+/g, '-')
+
+  // Convert to lowercase
+  kebabCase = kebabCase.toLowerCase()
+
+  return kebabCase ?? ''
+}

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