Skip to content

Commit

Permalink
feat: applies next/dynamic to CartSidebar internal components
Browse files Browse the repository at this point in the history
  • Loading branch information
@eduardoformiga
eduardoformiga committed Nov 12, 2024
1 parent 95acfb9 commit e6d3c09
Showing 1 changed file with 128 additions and 89 deletions.
217 changes: 128 additions & 89 deletions packages/core/src/components/cart/CartSidebar/CartSidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,64 @@
import {
Button as UIButton,
CartSidebar as UICartSidebar,
CartSidebarFooter as UICartSidebarFooter,
CartSidebarList as UICartSidebarList,
} from '@faststore/ui'
import dynamic from 'next/dynamic'

import type { CartSidebarProps as UICartSidebarProps } from '@faststore/ui'
import type {
ButtonProps,
CartSidebarProps as UICartSidebarProps,
} from '@faststore/ui'

import type { CurrencyCode, ViewCartEvent } from '@faststore/sdk'
import { Icon, useFadeEffect, useUI } from '@faststore/ui'
import { Suspense, useCallback, useEffect, useMemo } from 'react'
import { ReactNode, useCallback, useEffect, useMemo } from 'react'
import { useCart } from 'src/sdk/cart'
import { useCheckoutButton } from 'src/sdk/cart/useCheckoutButton'
import { useSession } from 'src/sdk/session'

import Gift from '../../ui/Gift'
import CartItem from '../CartItem'
import EmptyCart from '../EmptyCart'
import OrderSummary from '../OrderSummary'
const UIButton = dynamic<ButtonProps>(
() =>
import(/* webpackChunkName: "UIButton" */ '@faststore/ui').then(
(mod) => mod.Button
),
{ ssr: false }
)
const UICartSidebarFooter = dynamic<{ children: ReactNode }>(
() =>
import(/* webpackChunkName: "UICartSidebarFooter" */ '@faststore/ui').then(
(mod) => mod.CartSidebarFooter
),
{ ssr: false }
)
const UICartSidebarList = dynamic<{ children: ReactNode }>(
() =>
import(/* webpackChunkName: "UICartSidebarList" */ '@faststore/ui').then(
(mod) => mod.CartSidebarList
),
{ ssr: false }
)
const UICartSidebar = dynamic<UICartSidebarProps>(
() =>
import(/* webpackChunkName: "UICartSidebar" */ '@faststore/ui').then(
(mod) => mod.CartSidebar
),
{ ssr: false }
)
const EmptyCart = dynamic(
() => import(/* webpackChunkName: "EmptyCart" */ '../EmptyCart'),
{ ssr: false }
)
const Gift = dynamic(
() => import(/* webpackChunkName: "Gift" */ '../../ui/Gift'),
{
ssr: false,
}
)
const CartItem = dynamic(
() => import(/* webpackChunkName: "CartItem" */ '../CartItem'),
{ ssr: false }
)
const OrderSummary = dynamic(
() => import(/* webpackChunkName: "OrderSummary" */ '../OrderSummary'),
{ ssr: false }
)

import styles from './section.module.scss'

function useViewCartEvent() {
Expand Down Expand Up @@ -121,84 +162,82 @@ function CartSidebar({
return (
<>
{displayCart && (
<Suspense fallback={null}>
<UICartSidebar
overlayProps={{
className: `section ${styles.section} section-cart-sidebar`,
}}
title={title}
totalItems={totalItems}
alertIcon={<Icon name={alertIcon} aria-label={alertIconAlt} />}
alertText={alertText}
onClose={fadeOut}
>
{isEmpty ? (
<EmptyCart onDismiss={closeCart} />
) : (
<>
<UICartSidebarList>
{items.map((item) => (
<li key={item.id}>
<CartItem
item={item}
taxesConfiguration={taxesConfiguration}
useUnitMultiplier={
quantitySelector?.useUnitMultiplier ?? false
}
/>
</li>
))}
{gifts.length > 0 && (
<>
{gifts.map((item) => (
<li key={item.id}>
<Gift item={item} />
</li>
))}
</>
)}
</UICartSidebarList>
<UICartSidebar
overlayProps={{
className: `section ${styles.section} section-cart-sidebar`,
}}
title={title}
totalItems={totalItems}
alertIcon={<Icon name={alertIcon} aria-label={alertIconAlt} />}
alertText={alertText}
onClose={fadeOut}
>
{isEmpty ? (
<EmptyCart onDismiss={closeCart} />
) : (
<>
<UICartSidebarList>
{items.map((item) => (
<li key={item.id}>
<CartItem
item={item}
taxesConfiguration={taxesConfiguration}
useUnitMultiplier={
quantitySelector?.useUnitMultiplier ?? false
}
/>
</li>
))}
{gifts.length > 0 && (
<>
{gifts.map((item) => (
<li key={item.id}>
<Gift item={item} />
</li>
))}
</>
)}
</UICartSidebarList>

<UICartSidebarFooter>
<OrderSummary
subTotal={
taxesConfiguration?.usePriceWithTaxes
? subTotalWithTaxes
: subTotal
}
total={
taxesConfiguration?.usePriceWithTaxes
? totalWithTaxes
: total
}
includeTaxes={taxesConfiguration?.usePriceWithTaxes}
includeTaxesLabel={taxesConfiguration?.taxesLabel}
numberOfItems={totalItems}
checkoutButton={
<UIButton
variant="primary"
icon={
!isValidating && (
<Icon
name={checkoutButtonIcon}
aria-label={checkoutButtonIconAlt}
width={18}
height={18}
/>
)
}
iconPosition="right"
{...btnProps}
>
{isValidating ? checkoutLoadingLabel : checkoutLabel}
</UIButton>
}
/>
</UICartSidebarFooter>
</>
)}
</UICartSidebar>
</Suspense>
<UICartSidebarFooter>
<OrderSummary
subTotal={
taxesConfiguration?.usePriceWithTaxes
? subTotalWithTaxes
: subTotal
}
total={
taxesConfiguration?.usePriceWithTaxes
? totalWithTaxes
: total
}
includeTaxes={taxesConfiguration?.usePriceWithTaxes}
includeTaxesLabel={taxesConfiguration?.taxesLabel}
numberOfItems={totalItems}
checkoutButton={
<UIButton
variant="primary"
icon={
!isValidating && (
<Icon
name={checkoutButtonIcon}
aria-label={checkoutButtonIconAlt}
width={18}
height={18}
/>
)
}
iconPosition="right"
{...btnProps}
>
{isValidating ? checkoutLoadingLabel : checkoutLabel}
</UIButton>
}
/>
</UICartSidebarFooter>
</>
)}
</UICartSidebar>
)}
</>
)
Expand Down

0 comments on commit e6d3c09

Please sign in to comment.