add additional skeletons (#2906)

storefront/components/Basic/ExtendedNextLink/ExtendedNextLink.tsx

@@ -2,56 +2,62 @@ import { SLUG_TYPE_QUERY_PARAMETER_NAME } from 'helpers/queryParamNames';
 // eslint-disable-next-line no-restricted-imports
 import NextLink, { LinkProps } from 'next/link';
 import { ComponentPropsWithoutRef, MouseEventHandler } from 'react';
+import { PageType } from 'store/slices/createPageLoadingStateSlice';
 import { useSessionStore } from 'store/useSessionStore';
-import { FriendlyPagesDestinations, FriendlyPagesTypes, FriendlyPagesTypesKeys } from 'types/friendlyUrl';
+import {
+    FriendlyPagesDestinations,
+    FriendlyPagesTypes,
+    FriendlyPagesTypesKey,
+    FriendlyPagesTypesKeys,
+} from 'types/friendlyUrl';
 
-const STATIC_PAGES = ['static', 'homepage', 'stores'] as const;
-
-type StaticPageType = (typeof STATIC_PAGES)[number];
-
-export type ExtendedLinkPageType = FriendlyPagesTypesKeys | StaticPageType;
-
-type ExtendedNextLinkProps = {
-    type: ExtendedLinkPageType;
-    queryParams?: Record<string, string>;
-} & Omit<ComponentPropsWithoutRef<'a'>, keyof LinkProps> &
-    Omit<LinkProps, 'prefetch'>;
+type ExtendedNextLinkProps = Omit<ComponentPropsWithoutRef<'a'>, keyof LinkProps> &
+    Omit<LinkProps, 'prefetch'> & {
+        queryParams?: Record<string, string>;
+        type?: PageType;
+    };
 
 export const ExtendedNextLink: FC<ExtendedNextLinkProps> = ({
     children,
     href,
-    type,
     queryParams,
     as,
     onClick,
+    type,
     ...props
 }) => {
-    const isStatic = type === 'static' || type === 'homepage' || type === 'stores';
     const updatePageLoadingState = useSessionStore((s) => s.updatePageLoadingState);
 
+    const isDynamic = type && FriendlyPagesTypesKeys.includes(type as any);
+
     const handleOnClick: MouseEventHandler<HTMLAnchorElement> = (e) => {
         const isWithoutOpeningInNewTab = !e.ctrlKey && !e.metaKey;
 
         if (isWithoutOpeningInNewTab) {
             onClick?.(e);
 
-            if (type !== 'static') {
+            if (type) {
                 updatePageLoadingState({ isPageLoading: true, redirectPageType: type });
+            } else {
+                updatePageLoadingState({ redirectPageType: undefined });
             }
         }
     };
 
     return (
         <NextLink
-            as={isStatic ? as : href}
+            as={isDynamic ? href : as}
             prefetch={false}
             href={
-                isStatic
-                    ? href
-                    : {
-                          pathname: FriendlyPagesDestinations[type],
-                          query: { [SLUG_TYPE_QUERY_PARAMETER_NAME]: FriendlyPagesTypes[type], ...queryParams },
+                isDynamic
+                    ? {
+                          pathname: FriendlyPagesDestinations[type as FriendlyPagesTypesKey],
+                          query: {
+                              [SLUG_TYPE_QUERY_PARAMETER_NAME]: FriendlyPagesTypes[type as FriendlyPagesTypesKey],
+                              ...queryParams,
+                          },
                       }
+                    : href
             }
             onClick={handleOnClick}
             {...props}

storefront/components/Basic/Link/Link.tsx

@@ -40,7 +40,7 @@ export const Link: FC<LinkProps> = ({ isExternal, isButton, children, href, rel,
     }
 
     return (
-        <ExtendedNextLink {...props} passHref href={href} type="static">
+        <ExtendedNextLink {...props} passHref href={href}>
             {content}
         </ExtendedNextLink>
     );

storefront/components/Blocks/Adverts/Adverts.tsx

@@ -66,7 +66,7 @@ export const Adverts: FC<AdvertsProps> = ({
                     return (
                         <Fragment key={index}>
                             {advert.link ? (
-                                <ExtendedNextLink href={advert.link} target="_blank" type="static">
+                                <ExtendedNextLink href={advert.link} target="_blank">
                                     {ImageComponent}
                                 </ExtendedNextLink>
                             ) : (

storefront/components/Blocks/FreeTransport/FreeTransport.tsx

@@ -1,17 +1,17 @@
-import { useCurrentCart } from 'connectors/cart/Cart';
+import { useCurrentCart } from 'hooks/cart/useCurrentCart';
 import { useFormatPrice } from 'hooks/formatting/useFormatPrice';
 import Trans from 'next-translate/Trans';
 import useTranslation from 'next-translate/useTranslation';
 
 const TEST_IDENTIFIER = 'blocks-freetransport';
 
 export const FreeTransport: FC = () => {
-    const { cart, isCartEmpty } = useCurrentCart();
+    const { cart } = useCurrentCart();
     const { t } = useTranslation();
     const formatPrice = useFormatPrice();
     const amount = cart?.remainingAmountWithVatForFreeTransport;
 
-    if (isCartEmpty || amount === null || amount === undefined) {
+    if (!cart?.items.length || amount === null || amount === undefined) {
         return null;
     }
 

storefront/components/Blocks/OrderAction/OrderAction.tsx

@@ -49,15 +49,9 @@ export const OrderAction: FC<OrderActionProps> = ({
             )}
         >
             <div className="order-2 lg:order-1" data-testid={TEST_IDENTIFIER + 'back'}>
-                <ExtendedNextLink
-                    className="font-bold uppercase text-dark no-underline"
-                    href={buttonBackLink}
-                    type="static"
-                >
-                    <>
-                        <ArrowIcon className="relative top-0 mr-1 rotate-90 text-greyLight" />
-                        {buttonBack}
-                    </>
+                <ExtendedNextLink className="font-bold uppercase text-dark no-underline" href={buttonBackLink}>
+                    <ArrowIcon className="relative top-0 mr-1 rotate-90 text-greyLight" />
+                    {buttonBack}
                 </ExtendedNextLink>
             </div>
             <div className="order-1 mb-8 w-auto lg:order-2 lg:mb-0" data-testid={TEST_IDENTIFIER + 'next'}>

storefront/components/Blocks/OrderSteps/OrderSteps.tsx

@@ -70,11 +70,5 @@ const OrderStepsListItemLink: FC<OrderStepsListItemLinkProps> = ({ children, isA
         </span>
     );
 
-    return href ? (
-        <ExtendedNextLink href={href} type="static">
-            {Component}
-        </ExtendedNextLink>
-    ) : (
-        Component
-    );
+    return href ? <ExtendedNextLink href={href}>{Component}</ExtendedNextLink> : Component;
 };

storefront/components/Blocks/OrderSummary/OrderSummary.tsx

@@ -4,7 +4,8 @@ import { TotalPrice } from './TotalPrice';
 import { TransportAndPayment } from './TransportAndPayment';
 import { LoaderWithOverlay } from 'components/Basic/Loader/LoaderWithOverlay';
 import { Adverts } from 'components/Blocks/Adverts/Adverts';
-import { useCurrentCart } from 'connectors/cart/Cart';
+import { CartLoading } from 'components/Pages/Cart/CartLoading';
+import { useCurrentCart } from 'hooks/cart/useCurrentCart';
 import useTranslation from 'next-translate/useTranslation';
 
 type OrderSummaryProps = {
@@ -15,9 +16,13 @@ const TEST_IDENTIFIER = 'blocks-ordersummary';
 
 export const OrderSummary: FC<OrderSummaryProps> = ({ isTransportOrPaymentLoading }) => {
     const { t } = useTranslation();
-    const { cart, transport, payment, promoCode, roundingPrice } = useCurrentCart();
+    const { cart, transport, payment, promoCode, roundingPrice, isFetching } = useCurrentCart();
 
-    if (cart === null) {
+    if (isFetching) {
+        return <CartLoading />;
+    }
+
+    if (!cart) {
         return null;
     }
 

storefront/components/Blocks/Popup/Login/Login.tsx

@@ -16,7 +16,6 @@ import { useShopsysForm } from 'hooks/forms/useShopsysForm';
 import { useDomainConfig } from 'hooks/useDomainConfig';
 import { Translate } from 'next-translate';
 import useTranslation from 'next-translate/useTranslation';
-import { useCallback } from 'react';
 import { FormProvider, SubmitHandler } from 'react-hook-form';
 import { usePersistStore } from 'store/usePersistStore';
 import * as Yup from 'yup';
@@ -38,26 +37,24 @@ export const Login: FC<LoginProps> = ({ defaultEmail }) => {
     const formProviderMethods = useShopsysForm(getLoginFormResolver(t), { email: defaultEmail ?? '', password: '' });
     const { login } = useAuth();
 
-    const onLoginHandler = useCallback<SubmitHandler<{ email: string; password: string }>>(
-        async (data) => {
-            blurInput();
-            const loginResponse = await login({
-                email: data.email,
-                password: data.password,
-                previousCartUuid: cartUuid,
-            });
+    const onLoginHandler: SubmitHandler<{ email: string; password: string }> = async (data) => {
+        blurInput();
 
-            handleFormErrors(
-                loginResponse.error,
-                formProviderMethods,
-                t,
-                undefined,
-                undefined,
-                GtmMessageOriginType.login_popup,
-            );
-        },
-        [login, cartUuid, formProviderMethods, t],
-    );
+        const loginResponse = await login({
+            email: data.email,
+            password: data.password,
+            previousCartUuid: cartUuid,
+        });
+
+        handleFormErrors(
+            loginResponse.error,
+            formProviderMethods,
+            t,
+            undefined,
+            undefined,
+            GtmMessageOriginType.login_popup,
+        );
+    };
 
     return (
         <div
@@ -79,6 +76,7 @@ export const Login: FC<LoginProps> = ({ defaultEmail }) => {
                                 autoComplete: 'email',
                             }}
                         />
+
                         <PasswordInputControlled
                             control={formProviderMethods.control}
                             formName="login-form"
@@ -88,15 +86,17 @@ export const Login: FC<LoginProps> = ({ defaultEmail }) => {
                                 label: t('Password'),
                             }}
                         />
+
                         <div className="mt-5 mb-5 flex items-center justify-between gap-2 lg:mb-0 lg:block lg:border-none lg:p-0">
                             <div className="order-1 flex w-full justify-end">
                                 <SubmitButton className="max-lg:!px-3" dataTestId="blocks-popup-login-submit">
                                     {t('Log-in')}
                                 </SubmitButton>
                             </div>
+
                             <div className="flex items-center gap-1 whitespace-nowrap rounded border-primary py-2 px-2 text-sm text-primary lg:mt-5 lg:border-2 lg:px-3 lg:py-3">
                                 <WarningIcon className=" h-5 w-9 text-red" />
-                                <ExtendedNextLink href={resetPasswordUrl} type="static">
+                                <ExtendedNextLink href={resetPasswordUrl}>
                                     <div className="block text-sm text-primary underline hover:no-underline">
                                         {t('Lost your password?')}
                                     </div>
@@ -106,13 +106,16 @@ export const Login: FC<LoginProps> = ({ defaultEmail }) => {
                     </Form>
                 </FormProvider>
             </div>
+
             <div className="mt-7 w-full lg:mt-0 lg:w-1/2 lg:pl-5">
                 <div className="mb-6 -mr-4 flex w-full justify-between rounded-l bg-blueLight p-4">
                     <p className="text-lg text-primary lg:text-xl">{t("Don't have an account yet? Register.")}</p>
                 </div>
+
                 <p className="mb-8 hidden lg:block">
                     {t('Your addresses prefilled and you can check your order history.')}
                 </p>
+
                 <Link isButton href={registrationUrl}>
                     {t('Register')}
                 </Link>

storefront/components/Blocks/Product/ButtonsAction/ProductComparePopup.tsx

@@ -1,5 +1,6 @@
+import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNextLink';
 import { ArrowSecondaryIcon } from 'components/Basic/Icon/IconsSvg';
-import { Link } from 'components/Basic/Link/Link';
+import { Button } from 'components/Forms/Button/Button';
 import { Popup } from 'components/Layout/Popup/Popup';
 import { getInternationalizedStaticUrls } from 'helpers/getInternationalizedStaticUrls';
 import { useDomainConfig } from 'hooks/useDomainConfig';
@@ -20,12 +21,12 @@ export const ProductComparePopup: FC<ProductComparePopupProps> = ({ onCloseCallb
 
             <div className="flex flex-col">
                 <p className="text-bigger font-semiBold mt-[15px] mb-5">{t('Product added to comparison.')}</p>
-                <Link isButton href={productComparisonUrl}>
-                    <>
+                <ExtendedNextLink href={productComparisonUrl} type="comparison">
+                    <Button>
                         <span>{t('Show products comparison')}</span>
                         <ArrowSecondaryIcon className="rotate-90" />
-                    </>
-                </Link>
+                    </Button>
+                </ExtendedNextLink>
             </div>
         </Popup>
     );

storefront/components/Blocks/Product/ProductAction.tsx

@@ -1,9 +1,9 @@
+import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNextLink';
 import { AddToCart } from 'components/Blocks/Product/AddToCart';
 import { Button } from 'components/Forms/Button/Button';
 import { ListedProductFragmentApi } from 'graphql/generated';
 import { GtmMessageOriginType, GtmProductListNameType } from 'gtm/types/enums';
 import useTranslation from 'next-translate/useTranslation';
-import { useRouter } from 'next/dist/client/router';
 import { twJoin } from 'tailwind-merge';
 
 type ProductActionProps = {
@@ -18,30 +18,21 @@ const TEST_IDENTIFIER = 'blocks-product-action';
 const wrapperTwClass = 'rounded bg-greyVeryLight p-2';
 
 export const ProductAction: FC<ProductActionProps> = ({ product, gtmProductListName, gtmMessageOrigin, listIndex }) => {
-    const router = useRouter();
     const { t } = useTranslation();
 
     if (product.isMainVariant) {
         return (
             <div className={wrapperTwClass}>
-                <Button
-                    className="!w-full py-2"
-                    dataTestId={TEST_IDENTIFIER + '-choose-variant'}
-                    name="choose-variant"
-                    size="small"
-                    onClick={() =>
-                        router.push(
-                            {
-                                pathname: '/products/[productSlug]',
-                            },
-                            {
-                                pathname: product.slug,
-                            },
-                        )
-                    }
-                >
-                    {t('Choose variant')}
-                </Button>
+                <ExtendedNextLink href={product.slug} type="productMainVariant">
+                    <Button
+                        className="w-full py-2"
+                        dataTestId={TEST_IDENTIFIER + '-choose-variant'}
+                        name="choose-variant"
+                        size="small"
+                    >
+                        {t('Choose variant')}
+                    </Button>
+                </ExtendedNextLink>
             </div>
         );
     }

storefront/components/Blocks/Product/ProductsList/ProductListItem.tsx

@@ -46,6 +46,7 @@ export const ProductListItem = forwardRef<HTMLLIElement, ProductItemProps>(
     ) => {
         const { url } = useDomainConfig();
         const { t } = useTranslation();
+        const isMainVariant = product.isMainVariant;
 
         return (
             <li
@@ -70,7 +71,7 @@ export const ProductListItem = forwardRef<HTMLLIElement, ProductItemProps>(
                 <ExtendedNextLink
                     className="flex h-full flex-col gap-3 no-underline hover:no-underline"
                     href={product.slug}
-                    type="product"
+                    type={isMainVariant ? 'productMainVariant' : 'product'}
                     onClick={() => onGtmProductClickEventHandler(product, gtmProductListName, listIndex, url)}
                 >
                     <div className="relative">

storefront/components/Blocks/PromoCode/PromoCode.tsx

@@ -4,10 +4,10 @@ import { Loader } from 'components/Basic/Loader/Loader';
 import { LoaderWithOverlay } from 'components/Basic/Loader/LoaderWithOverlay';
 import { SubmitButton } from 'components/Forms/Button/SubmitButton';
 import { TextInput } from 'components/Forms/TextInput/TextInput';
-import { useCurrentCart } from 'connectors/cart/Cart';
 import { GtmMessageOriginType } from 'gtm/types/enums';
 import { hasValidationErrors } from 'helpers/errors/hasValidationErrors';
 import { useApplyPromoCodeToCart } from 'hooks/cart/useApplyPromoCodeToCart';
+import { useCurrentCart } from 'hooks/cart/useCurrentCart';
 import { useRemovePromoCodeFromCart } from 'hooks/cart/useRemovePromoCodeFromCart';
 import { useCalcElementHeight } from 'hooks/ui/useCalcElementHeight';
 import useTranslation from 'next-translate/useTranslation';

storefront/components/Blocks/SimpleNavigation/SimpleNavigation.tsx

@@ -1,14 +1,14 @@
 import { SimpleNavigationListItem } from './SimpleNavigationListItem';
-import { ExtendedLinkPageType } from 'components/Basic/ExtendedNextLink/ExtendedNextLink';
 import { twMergeCustom } from 'helpers/twMerge';
+import { PageType } from 'store/slices/createPageLoadingStateSlice';
 import { ListedItemPropType } from 'types/simpleNavigation';
 
 type SimpleNavigationProps = {
     listedItems: ListedItemPropType[];
     imageType?: string;
     isWithoutSlider?: true;
     itemClassName?: string;
-    linkType: ExtendedLinkPageType;
+    linkType: PageType;
 };
 
 const TEST_IDENTIFIER = 'blocks-simplenavigation';