{children}
18 |
11 | {endingSoon ? <>Sale ends soon! : <>On sale!}
12 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/badges/SoldOutBadge.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 |
3 | export const SoldOutBadge = ({ className }: { className?: string }) => {
4 | return (
5 |
11 | Sold out
12 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/cart/index.ts:
--------------------------------------------------------------------------------
1 | export * from './line-items';
2 | export * from './CartDrawer';
3 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/cart/line-items/index.ts:
--------------------------------------------------------------------------------
1 | export * from './LineItemQuantitySelect';
2 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/checkout/CheckoutFlow.tsx:
--------------------------------------------------------------------------------
1 | import { Alert } from '@app/components/common/alert/Alert';
2 | import { useCheckout } from '@app/hooks/useCheckout';
3 | import { useCustomer } from '@app/hooks/useCustomer';
4 | import { FC, useEffect } from 'react';
5 | import { CheckoutAccountDetails } from './CheckoutAccountDetails';
6 | import { CheckoutDeliveryMethod } from './CheckoutDeliveryMethod';
7 | import { CheckoutPayment } from './CheckoutPayment';
8 | import { StripeExpressCheckout } from './StripePayment/StripeExpressPayment';
9 |
10 | export const CheckoutFlow: FC = () => {
11 | const { customer } = useCustomer();
12 | const { goToNextStep, cart } = useCheckout();
13 | const isLoggedIn = !!customer?.id;
14 |
15 | if (!cart) return;
16 |
17 | useEffect(() => {
18 | if (isLoggedIn) goToNextStep();
19 | return () => goToNextStep();
20 | }, [isLoggedIn]);
21 |
22 | return (
23 | <>
24 |
25 | {isLoggedIn && (
26 |
27 | Checking out as:{' '}
28 |
29 | {customer.first_name} {customer.last_name} ({customer.email})
30 |
31 |
32 | )}
33 |
34 |
39 | 40 |
44 |
45 | );
46 | };
47 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/checkout/CheckoutOrderSummary/CheckoutOrderSummary.tsx:
--------------------------------------------------------------------------------
1 | import { useCheckout } from '@app/hooks/useCheckout';
2 | import { PromotionDTO, StoreCart } from '@medusajs/types';
3 | import { FC, ReactNode } from 'react';
4 | import { CheckoutOrderSummaryItems } from './CheckoutOrderSummaryItems';
5 | import { CheckoutOrderSummaryTotals } from './CheckoutOrderSummaryTotals';
6 |
7 | export interface CheckoutOrderSummaryProps {
8 | submitButton?: ReactNode;
9 | name: string;
10 | }
11 |
12 | export const CheckoutOrderSummary: FC39 | 40 |
19 |
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/checkout/CheckoutOrderSummary/RemoveDiscountCodeButton.tsx:
--------------------------------------------------------------------------------
1 | import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
2 | import { FetcherKeys } from '@libs/util/fetcher-keys';
3 | import { StoreCart, StoreCartPromotion } from '@medusajs/types';
4 | import { FC } from 'react';
5 | import { useFetcher } from 'react-router';
6 |
7 | export interface RemoveDiscountCodeButtonProps {
8 | cart: StoreCart;
9 | promotion: StoreCartPromotion;
10 | }
11 |
12 | export const RemovePromotionCodeButton: FCItems in your cart
20 |{submitButton}
}
26 | {children}
16 | {completed && ( 17 | <> 18 | 21 | 22 |
16 |
20 | );
21 | };
22 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/checkout/HiddenAddressGroup.tsx:
--------------------------------------------------------------------------------
1 | import { TextField } from '@lambdacurry/forms/remix-hook-form';
2 | import { Address } from '@libs/types';
3 |
4 | interface HiddenAddressGroupProps {
5 | address: Address;
6 | prefix: 'shippingAddress' | 'billingAddress';
7 | }
8 |
9 | const HiddenAddressGroup: React.FC
17 |
19 | 15 | 16 | )} 17 | {address?.address1} 18 |
19 | {address?.address2 && ( 20 | <> 21 | {address?.address2} 22 |
23 | 24 | )} 25 | {address?.city}, {address?.province} {address?.postalCode} 26 |
27 | {address?.countryCode && ( 28 | <> 29 | {countryOptions.find(({ value }) => value === address?.countryCode)?.label} 30 |
31 | 32 | )} 33 |
20 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/collection/index.ts:
--------------------------------------------------------------------------------
1 | export * from './collection-list';
2 | export * from './collection-list-item';
3 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/common/Address/Address.tsx:
--------------------------------------------------------------------------------
1 | import { formatPhoneNumber } from '@libs/util';
2 | import { StoreCartAddress } from '@medusajs/types';
3 | import { FC } from 'react';
4 |
5 | export interface AddressProps {
6 | address: StoreCartAddress;
7 | }
8 |
9 | export const Address: FC
21 |
36 |
22 |
24 |
25 | {title}
23 |
26 |
35 |
27 | {collections.map((collection) => {
28 | const deferredProducts = deferredProductsByCollection[collection.handle!];
29 | return (
30 |
34 | 14 | {address.address_2 && ( 15 | <> 16 | {address.address_2} 17 |
18 | 19 | )} 20 | {address.city}, {address.province} {address.postal_code} {address.country_code} 21 | {address.phone && ( 22 | <> 23 |
24 | {formatPhoneNumber(address.phone)} 25 | 26 | )} 27 | 28 | ); 29 | }; 30 | -------------------------------------------------------------------------------- /apps/storefront/app/components/common/Empty/Empty.tsx: -------------------------------------------------------------------------------- 1 | import type { FC, ReactNode, SVGAttributes } from 'react'; 2 | 3 | export interface EmptyProps { 4 | icon?: FC
12 | {Icon && (
13 |
21 | );
22 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/common/ImageUpload/ImageUploader.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import { CSSProperties, FC } from 'react';
3 | import { FileUploader } from 'react-drag-drop-files';
4 |
5 | interface FileInputProps {
6 | id?: string;
7 | name: string;
8 | multiple?: boolean;
9 | label?: string;
10 | className?: string;
11 | encType?: string;
12 | required?: boolean;
13 | disabled?: boolean;
14 | hoverTitle?: string;
15 | fileOrFiles?: File[] | File | null;
16 | classes?: string;
17 | types?: string[];
18 | onTypeError?: (err: any) => void;
19 | children?: React.ReactNode;
20 | maxSize?: number;
21 | minSize?: number;
22 | onSizeError?: (file: File) => void;
23 | onDrop?: (file: File) => void;
24 | onSelect?: (file: File) => void;
25 | handleChange?: (files: File[]) => void;
26 | onDraggingStateChange?: (dragging: boolean) => void;
27 | dropMessageStyle?: CSSProperties;
28 | }
29 |
30 | // Note: this component is unstyled and meant to be used with children
31 | export const ImageUploader: FC
14 |
16 | )}
17 | {title}
18 |{description}
19 | {action &&{action}
}
20 |
13 | {actions.map(({ url, label, new_tab, style_variant }, index) => {
14 | if (!label) return null;
15 |
16 | return (
17 |
29 | );
30 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/common/actions/Actions.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import { FC, HTMLAttributes } from 'react';
3 |
4 | export interface ActionsProps extends HTMLAttributes8 | {children} 9 |
10 | ); 11 | -------------------------------------------------------------------------------- /apps/storefront/app/components/common/card/index.ts: -------------------------------------------------------------------------------- 1 | export { Card } from './Card'; 2 | export { CardBody } from './CardBody'; 3 | export { CardContent } from './CardContent'; 4 | export { CardDate } from './CardDate'; 5 | export { CardExcerpt } from './CardExcerpt'; 6 | export { CardFooter } from './CardFooter'; 7 | export { CardGrid } from './CardGrid'; 8 | export { CardHeader } from './CardHeader'; 9 | export { CardLabel } from './CardLabel'; 10 | export { CardThumbnail } from './CardThumbnail'; 11 | export { CardTitle } from './CardTitle'; 12 | -------------------------------------------------------------------------------- /apps/storefront/app/components/common/container/Container.tsx: -------------------------------------------------------------------------------- 1 | import clsx from 'clsx'; 2 | import type { FC, HTMLAttributes, PropsWithChildren } from 'react'; 3 | 4 | export const Container: FC
20 | {props.error}
21 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/common/forms/fields/FieldGroup.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import { FC, HTMLAttributes } from 'react';
3 |
4 | export interface FieldGroupProps extends HTMLAttributes
21 |
24 |
25 | {props.optional && Optional}
26 |
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/common/forms/fields/FieldWrapper.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import { HTMLAttributes, forwardRef } from 'react';
3 |
4 | export interface FieldWrapperProps extends HTMLAttributes
10 |
12 |
13 |
15 |
20 | {props.error}
21 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/common/remix-hook-form/forms/fields/FieldGroup.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import { FC, HTMLAttributes } from 'react';
3 |
4 | export interface FieldGroupProps extends HTMLAttributes
21 |
24 |
25 | {props.optional && Optional}
26 |
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/common/remix-hook-form/forms/fields/ProductOptionSelectorSelect.tsx:
--------------------------------------------------------------------------------
1 | import { ChangeEvent, FC } from 'react';
2 | import { useRemixFormContext } from 'remix-hook-form';
3 |
4 | export interface ProductOptionSelectorProps {
5 | option: {
6 | id: string;
7 | title: string;
8 | product_id: string;
9 | values: { value: string; label: string; disabled?: boolean }[];
10 | };
11 | value: string;
12 | onChange?: (event: ChangeEvent
24 |
27 |
42 |
43 | );
44 | };
45 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/common/remix-hook-form/forms/fields/StyledTextField.tsx:
--------------------------------------------------------------------------------
1 | import { TextField } from '@lambdacurry/forms/remix-hook-form';
2 | import clsx from 'clsx';
3 | import type { ComponentProps } from 'react';
4 |
5 | type StyledTextFieldProps = ComponentProps
25 |
26 | {title && {title}}
27 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/common/status-indicators/index.ts:
--------------------------------------------------------------------------------
1 | export * from './StatusIndicator';
2 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/images/StripeSecurityImage.tsx:
--------------------------------------------------------------------------------
1 | import StripeBadge from '@app/components/common/assets/StripeBadge.png';
2 |
3 | export interface StripeSecurityImageProps {
4 | className?: string;
5 | }
6 |
7 | export const StripeSecurityImage = ({ className }: StripeSecurityImageProps) => {
8 | return
14 |
17 |
19 |
20 |
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/layout/footer/SocialIcons.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | FacebookIcon,
3 | InstagramIcon,
4 | LinkedinIcon,
5 | PinterestIcon,
6 | SnapchatIcon,
7 | TiktokIcon,
8 | TwitterIcon,
9 | YoutubeIcon,
10 | } from '@app/components/common/assets/icons';
11 | import { IconButton } from '@app/components/common/buttons/IconButton';
12 | import { SiteSettings } from '@libs/types';
13 | import type { FC } from 'react';
14 |
15 | export const SocialIcons: FC<{ siteSettings?: SiteSettings }> = ({ siteSettings }) => {
16 | const socialLinks = [
17 | { icon: FacebookIcon, url: siteSettings?.social_facebook },
18 | { icon: InstagramIcon, url: siteSettings?.social_instagram },
19 | { icon: TwitterIcon, url: siteSettings?.social_twitter },
20 | { icon: YoutubeIcon, url: siteSettings?.social_youtube },
21 | { icon: LinkedinIcon, url: siteSettings?.social_linkedin },
22 | { icon: PinterestIcon, url: siteSettings?.social_pinterest },
23 | { icon: TiktokIcon, url: siteSettings?.social_tiktok },
24 | { icon: SnapchatIcon, url: siteSettings?.social_snapchat },
25 | ].filter((link) => !!link.url);
26 |
27 | if (socialLinks.length === 0) return null;
28 |
29 | return (
30 |
31 | {socialLinks.map(({ icon, url }) => (
32 | }
35 | className="text-white hover:text-black"
36 | iconProps={{ fill: 'currentColor', width: '24' }}
37 | icon={icon}
38 | />
39 | ))}
40 |
41 | );
42 | };
43 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/product/EmptyProductListItem.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import { HTMLAttributes } from 'react';
3 |
4 | export interface EmptyProductListItemProps extends HTMLAttributes{isSoldOut &&
;
16 | };
17 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/product/ProductCarouselSkeleton.tsx:
--------------------------------------------------------------------------------
1 | import { EmptyProductListItem } from './EmptyProductListItem';
2 |
3 | export const ProductCarouselSkeleton = ({ length }: { length: number }) => (
4 |
5 | {Array.from({ length }, (_, i) => (
6 |
9 | );
10 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/product/ProductCategoryTabs.tsx:
--------------------------------------------------------------------------------
1 | import { TabButton } from '@app/components/tabs/TabButton';
2 | import { TabList } from '@app/components/tabs/TabList';
3 | import { Tab } from '@headlessui/react';
4 | import { StoreProductCategory } from '@medusajs/types';
5 | import { type FC, Fragment } from 'react';
6 |
7 | export interface ProductCategoryTabsProps {
8 | categories: StoreProductCategory[];
9 | selectedIndex?: number;
10 | onChange?: (index: number) => void;
11 | }
12 |
13 | export const ProductCategoryTabs: FC
31 |
41 | );
42 | };
43 |
44 | // required for lazy loading this component
45 | export default ProductGrid;
46 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/product/ProductGridSkeleton.tsx:
--------------------------------------------------------------------------------
1 | import { EmptyProductListItem } from './EmptyProductListItem';
2 |
3 | export const ProductGridSkeleton = ({ length }: { length: number }) => (
4 |
34 | {products?.map((product) => (
35 |
36 | {({ isTransitioning }) =>
38 | ))}
39 |
40 |
5 | {Array.from({ length }, (_, i: number) => (
6 |
9 | );
10 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/product/ProductListItem.tsx:
--------------------------------------------------------------------------------
1 | import { useRegion } from '@app/hooks/useRegion';
2 | import { StoreProduct } from '@medusajs/types';
3 | import clsx from 'clsx';
4 | import type { FC, HTMLAttributes } from 'react';
5 | import { ProductBadges } from './ProductBadges';
6 | import { ProductPrice } from './ProductPrice';
7 | import { ProductThumbnail } from './ProductThumbnail';
8 |
9 | export interface ProductListItemProps extends HTMLAttributes
20 |
23 |
24 | {product.title}
25 |
26 |
19 |
22 | );
23 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/product/ProductPrice.tsx:
--------------------------------------------------------------------------------
1 | import { type FC, useMemo } from 'react';
2 |
3 | import { getCheapestProductVariant } from '@libs/util/prices';
4 | import { StoreProduct, StoreProductVariant } from '@medusajs/types';
5 | import { ProductVariantPrice } from './ProductVariantPrice';
6 |
7 | export interface ProductPriceProps {
8 | product: StoreProduct;
9 | variant?: StoreProductVariant;
10 | currencyCode: string;
11 | }
12 |
13 | export const ProductPrice: FC
16 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/reviews/ReviewListWithPagination.tsx:
--------------------------------------------------------------------------------
1 | import { StoreProductReview } from '@lambdacurry/medusa-plugins-sdk';
2 | import { FC } from 'react';
3 | import { PaginationConfig } from '../common/Pagination';
4 | import { PaginationWithContext } from '../common/Pagination/pagination-with-context';
5 | import { ProductReviewList, ProductReviewListProps } from './ProductReviewList';
6 |
7 | export interface ProductReviewListWithPaginationProps extends ProductReviewListProps {
8 | productReviews: StoreProductReview[];
9 | paginationConfig?: PaginationConfig;
10 | context: string;
11 | }
12 |
13 | export const ProductReviewListWithPagination: FC
20 | {' '}
21 | {reviewsCount} Review{reviewsCount > 1 ? 's' : ''}
22 |
23 |
24 |
21 |
26 |
27 | );
28 |
--------------------------------------------------------------------------------
/apps/storefront/app/components/reviews/StarRating.tsx:
--------------------------------------------------------------------------------
1 | import { Rating, RatingProps, RoundedStar } from '@smastrom/react-rating';
2 | import '@smastrom/react-rating/style.css';
3 | import { FC } from 'react';
4 |
5 | export const StarRating: FC<
6 | Omit{title}
} 21 | {(left || right) && ( 22 |
23 |
26 | )}
27 | {left}
24 | {right}
25 |