Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: next/dynamic in CartSidebar internal components SFS-1517 #2553

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: next/dynamic in CartSidebar internal components SFS-1517 #2553

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
217 changes: 128 additions & 89 deletions packages/core/src/components/cart/CartSidebar/CartSidebar.tsx
View file
Open in desktop
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
Loading