[project-base] [SSP-2571, SSP-2572, SSP-2573] design fixes (#3331)

shopsys · Aug 15, 2024 · bef51f0 · bef51f0
2 parents b6a4dfe + da50064
commit bef51f0
Show file tree

Hide file tree

Showing 31 changed files with 120 additions and 60 deletions.
diff --git a/storefront/components/Basic/Table/Table.tsx b/storefront/components/Basic/Table/Table.tsx
@@ -3,11 +3,12 @@ import { twMergeCustom } from 'utils/twMerge';
 
 type TableProps = {
     head?: ReactNode;
+    tableClassName?: string;
 };
 
-export const Table: FC<TableProps> = ({ head, children, className }) => (
+export const Table: FC<TableProps> = ({ head, children, className, tableClassName }) => (
     <div className={twMergeCustom('overflow-x-auto', className)}>
-        <table className="w-full">
+        <table className={twMergeCustom('w-full', tableClassName)}>
             {!!head && <thead>{head}</thead>}
             <tbody>{children}</tbody>
         </table>

diff --git a/storefront/components/Blocks/Skeleton/SkeletonManager.tsx b/storefront/components/Blocks/Skeleton/SkeletonManager.tsx
@@ -4,6 +4,7 @@ import { SkeletonPageBlogCategory } from './SkeletonPageBlogCategory';
 import { SkeletonPageCart } from './SkeletonPageCart';
 import { SkeletonPageComparison } from './SkeletonPageComparison';
 import { SkeletonPageConfirmation } from './SkeletonPageConfirmation';
+import { SkeletonPageContact } from './SkeletonPageContact';
 import { SkeletonPageContactInformation } from './SkeletonPageContactInformation';
 import { SkeletonPageHome } from './SkeletonPageHome';
 import { SkeletonPageOrder } from './SkeletonPageOrder';
@@ -91,6 +92,8 @@ export const SkeletonManager: FC<SkeletonManagerProps> = ({
             return <SkeletonPageCart />;
         case 'order-confirmation':
             return <SkeletonPageConfirmation />;
+        case 'contact':
+            return <SkeletonPageContact />;
         default:
             return null;
     }

diff --git a/storefront/components/Blocks/Skeleton/SkeletonPageContact.tsx b/storefront/components/Blocks/Skeleton/SkeletonPageContact.tsx
@@ -0,0 +1,13 @@
+import { Webline } from 'components/Layout/Webline/Webline';
+import Skeleton from 'react-loading-skeleton';
+
+export const SkeletonPageContact: FC = () => (
+    <div className="mb-8">
+        <Webline>
+            <Skeleton className="h-11 w-48 mb-5" />
+            <Skeleton className="h-6 w-full" />
+            <Skeleton className="h-6 w-2/3 mb-4" />
+            <Skeleton className="rounded-xl max-w-3xl w-full h-[440px]" />
+        </Webline>
+    </div>
+);
diff --git a/storefront/components/Layout/Header/MenuIconic/MenuIconicPlaceholder.tsx b/storefront/components/Layout/Header/MenuIconic/MenuIconicPlaceholder.tsx
@@ -10,7 +10,7 @@ import { twJoin } from 'tailwind-merge';
 import { getInternationalizedStaticUrls } from 'utils/staticUrls/getInternationalizedStaticUrls';
 
 const placeholderItemTwClass =
-    'flex items-center justify-center py-4 px-3 gap-2 rounded-tr-none text-sm text-linkInverted no-underline';
+    'flex items-center justify-center py-4 px-3 gap-2 rounded-tr-none text-sm text-linkInverted no-underline hover:!text-linkInvertedHovered hover:!no-underline';
 
 export const MenuIconicPlaceholder: FC = () => {
     const { t } = useTranslation();

diff --git a/storefront/components/Pages/BlogArticle/BlogArticleDetailContent.tsx b/storefront/components/Pages/BlogArticle/BlogArticleDetailContent.tsx
@@ -2,6 +2,7 @@ import { Image } from 'components/Basic/Image/Image';
 import { GrapesJsParser } from 'components/Basic/UserText/GrapesJsParser';
 import { BlogLayout } from 'components/Layout/BlogLayout';
 import { ArticleTitle } from 'components/Pages/Article/ArticleTitle';
+import { TIDs } from 'cypress/tids';
 import { TypeBlogArticleDetailFragment } from 'graphql/requests/articlesInterface/blogArticles/fragments/BlogArticleDetailFragment.generated';
 import { useFormatDate } from 'utils/formatting/useFormatDate';
 
@@ -29,7 +30,10 @@ export const BlogArticleDetailContent: FC<BlogArticleDetailContentProps> = ({ bl
                         </div>
                     )}
 
-                    <div className="mb-2 text-left text-xs font-semibold text-textDisabled">
+                    <div
+                        className="mb-2 text-left text-xs font-semibold text-textDisabled"
+                        tid={TIDs.blog_article_publication_date}
+                    >
                         {formatDate(blogArticle.publishDate, 'l')}
                     </div>
 

diff --git a/storefront/components/Pages/Customer/OrderDetailContent.tsx b/storefront/components/Pages/Customer/OrderDetailContent.tsx
@@ -42,13 +42,10 @@ export const OrderDetailContent: FC<OrderDetailContentProps> = ({ order }) => {
                 </div>
             </Webline>
 
-            <Webline>
-                <Table>
+            <Webline className="lg:flex">
+                <Table className="w-full">
                     <Row>
                         <CellHead>{t('Basic information')}</CellHead>
-                        {!!order.trackingNumber && <CellHead>{t('Tracking package')}</CellHead>}
-                        {!!order.note && <CellHead>{t('Your note')}</CellHead>}
-                        <CellHead>{t('Payment information')}</CellHead>
                     </Row>
                     <Row>
                         <Cell>
@@ -59,8 +56,15 @@ export const OrderDetailContent: FC<OrderDetailContentProps> = ({ order }) => {
                                 </span>
                             </div>
                         </Cell>
+                    </Row>
+                </Table>
 
-                        {!!order.trackingNumber && (
+                {!!order.trackingNumber && (
+                    <Table className="max-lg:mt-10 w-full">
+                        <Row>
+                            <CellHead>{t('Tracking package')}</CellHead>
+                        </Row>
+                        <Row>
                             <Cell>
                                 <div className="flex justify-between">
                                     {t('Package number')}
@@ -73,10 +77,15 @@ export const OrderDetailContent: FC<OrderDetailContentProps> = ({ order }) => {
                                     )}
                                 </div>
                             </Cell>
-                        )}
-
-                        {!!order.note && <Cell>{order.note}</Cell>}
+                        </Row>
+                    </Table>
+                )}
 
+                <Table className="max-lg:mt-10 w-full">
+                    <Row>
+                        <CellHead>{t('Payment information')}</CellHead>
+                    </Row>
+                    <Row>
                         <Cell>
                             <div className="flex justify-between">
                                 {t('Status')}
@@ -85,18 +94,33 @@ export const OrderDetailContent: FC<OrderDetailContentProps> = ({ order }) => {
                         </Cell>
                     </Row>
                 </Table>
+            </Webline>
 
-                <div className="flex justify-center mt-10">
-                    <div className="lg:w-1/2 p-5 bg-backgroundMore rounded">
-                        {!order.isPaid && order.payment.type === PaymentTypeEnum.GoPay && (
+            <Webline>
+                {!order.isPaid && order.payment.type === PaymentTypeEnum.GoPay && (
+                    <div className="flex justify-center mt-10">
+                        <div className="lg:w-1/2 p-5 bg-backgroundMore rounded">
                             <PaymentsInOrderSelect
                                 orderUuid={order.uuid}
                                 paymentTransactionCount={order.paymentTransactionsCount}
                                 withRedirectAfterChanging={false}
                             />
-                        )}
+                        </div>
                     </div>
-                </div>
+                )}
+            </Webline>
+
+            <Webline>
+                {!!order.note && (
+                    <Table tableClassName="table-fixed mt-10">
+                        <Row>
+                            <CellHead>{t('Your note')}</CellHead>
+                        </Row>
+                        <Row>
+                            <Cell className="[overflow-wrap:anywhere]">{order.note}</Cell>
+                        </Row>
+                    </Table>
+                )}
 
                 <div className="grid lg:grid-cols-2 mt-10 gap-5">
                     <Table className="border-0 p-0">
@@ -220,37 +244,39 @@ export const OrderDetailContent: FC<OrderDetailContentProps> = ({ order }) => {
                     <div className="mt-10">
                         <div className="h2 mb-3 text-center">{t('Your purchase')}</div>
 
-                        <Table
-                            className="overflow-x-auto"
-                            head={
-                                <Row>
-                                    <CellHead isWithoutWrap>{t('Product name')}</CellHead>
-                                    <CellHead className="text-right">{t('Price per piece incl. VAT')}</CellHead>
-                                    <CellHead className="text-right">{t('Amount')}</CellHead>
-                                    <CellHead className="text-right">{t('VAT')}</CellHead>
-                                    <CellHead className="text-right">{t('Total price excl. VAT')}</CellHead>
-                                    <CellHead className="text-right">{t('Total price incl. VAT')}</CellHead>
-                                </Row>
-                            }
-                        >
-                            {order.items.map((item, index) => (
-                                <Row key={index}>
-                                    <Cell>{item.name}</Cell>
-                                    <Cell className="text-right">{formatPrice(item.unitPrice.priceWithVat)}</Cell>
-                                    <Cell className="text-right">
-                                        {item.quantity} {item.unit}
-                                    </Cell>
-                                    <Cell className="nowrap text-right">{parseFloat(item.vatRate)} %</Cell>
-                                    <Cell className="text-right">{formatPrice(item.totalPrice.priceWithoutVat)}</Cell>
-                                    <Cell className="text-right">{formatPrice(item.totalPrice.priceWithVat)}</Cell>
-                                </Row>
-                            ))}
-                            <Row>
-                                <Cell className="w-full text-right text-2xl text-price" colSpan={6}>
-                                    {t('Total price including VAT')}: {formatPrice(order.totalPrice.priceWithVat)}
-                                </Cell>
-                            </Row>
-                        </Table>
+                        <div className="overflow-x-auto">
+                            <Table
+                                className="min-w-[700px]"
+                                head={
+                                    <Row>
+                                        <CellHead isWithoutWrap>{t('Product name')}</CellHead>
+                                        <CellHead className="text-right">{t('Price per piece incl. VAT')}</CellHead>
+                                        <CellHead className="text-right">{t('Amount')}</CellHead>
+                                        <CellHead className="text-right min-w-16">{t('VAT')}</CellHead>
+                                        <CellHead className="text-right">{t('Total price excl. VAT')}</CellHead>
+                                        <CellHead className="text-right">{t('Total price incl. VAT')}</CellHead>
+                                    </Row>
+                                }
+                            >
+                                {order.items.map((item, index) => (
+                                    <Row key={index}>
+                                        <Cell>{item.name}</Cell>
+                                        <Cell className="text-right">{formatPrice(item.unitPrice.priceWithVat)}</Cell>
+                                        <Cell className="text-right">
+                                            {item.quantity} {item.unit}
+                                        </Cell>
+                                        <Cell className="nowrap text-right">{parseFloat(item.vatRate)} %</Cell>
+                                        <Cell className="text-right">
+                                            {formatPrice(item.totalPrice.priceWithoutVat)}
+                                        </Cell>
+                                        <Cell className="text-right">{formatPrice(item.totalPrice.priceWithVat)}</Cell>
+                                    </Row>
+                                ))}
+                            </Table>
+                        </div>
+                        <div className="w-full text-right text-lg md:text-2xl text-price">
+                            {t('Total price including VAT')}: {formatPrice(order.totalPrice.priceWithVat)}
+                        </div>
                     </div>
                 )}
             </Webline>

diff --git a/storefront/components/Pages/Customer/Orders/OrderItem.tsx b/storefront/components/Pages/Customer/Orders/OrderItem.tsx
@@ -34,7 +34,7 @@ export const OrderItem: FC<OrderItemProps> = ({ order, addOrderItemsToEmptyCart,
                 <div
                     className={twJoin(
                         'p-2 rounded-md flex gap-2',
-                        order.isPaid ? 'bg-backgroundSuccess text-textInverted' : 'bg-backgroundWarning',
+                        order.isPaid ? 'bg-backgroundSuccess' : 'bg-backgroundWarning',
                     )}
                 >
                     {order.isPaid ? (
@@ -173,7 +173,9 @@ const OrderItemRowInfo: FC<OrderItemRowInfoProps> = ({ title, value, rowValueCla
     return (
         <div className="grid grid-cols-[85px_1fr]">
             <span className="text-sm">{title}</span>
-            <span className={twMergeCustom('font-bold leading-none', rowValueClassName)}>{value}</span>
+            <span className={twMergeCustom('font-bold leading-5 [overflow-wrap:anywhere]', rowValueClassName)}>
+                {value}
+            </span>
         </div>
     );
 };
diff --git a/storefront/components/Pages/StoreDetail/StoreDetailContent.tsx b/storefront/components/Pages/StoreDetail/StoreDetailContent.tsx
@@ -1,9 +1,9 @@
 import { GoogleMap } from 'components/Basic/GoogleMap/GoogleMap';
 import { ChatIcon } from 'components/Basic/Icon/ChatIcon';
 import { Image } from 'components/Basic/Image/Image';
+import { LabelLink } from 'components/Basic/LabelLink/LabelLink';
 import { OpeningHours } from 'components/Blocks/OpeningHours/OpeningHours';
 import { OpeningStatus } from 'components/Blocks/OpeningHours/OpeningStatus';
-import { SimpleNavigationListItem } from 'components/Blocks/SimpleNavigation/SimpleNavigationListItem';
 import { Webline } from 'components/Layout/Webline/Webline';
 import { useDomainConfig } from 'components/providers/DomainConfigProvider';
 import { TypeStoreDetailFragment } from 'graphql/requests/stores/fragments/StoreDetailFragment.generated';
@@ -79,14 +79,10 @@ export const StoreDetailContent: FC<StoreDetailContentProps> = ({ store }) => {
                         )}
                     </div>
 
-                    <SimpleNavigationListItem
-                        linkTypeOverride={undefined}
-                        listedItem={{
-                            icon: <ChatIcon className="mr-3 w-6 text-2xl xl:mr-5" />,
-                            name: t('Do you have any questions?'),
-                            slug: contactUrl,
-                        }}
-                    />
+                    <LabelLink href={contactUrl} type="contact">
+                        <ChatIcon className="mr-3 w-6 text-2xl xl:mr-5" />
+                        {t('Do you have any questions?')}
+                    </LabelLink>
                 </div>
 
                 <div className="flex mt-6 w-full basis-96 vl:mt-0 vl:basis-1/2">

diff --git a/storefront/cypress/e2e/visits/simpleVisitsWithScreenshots.cy.ts b/storefront/cypress/e2e/visits/simpleVisitsWithScreenshots.cy.ts
@@ -1,3 +1,4 @@
+import { changeBlogArticleDynamicPartsToStaticDemodata } from './visitsSupport';
 import { url } from 'fixtures/demodata';
 import { initializePersistStoreInLocalStorageToDefaultValues, takeSnapshotAndCompare } from 'support';
 import { TIDs } from 'tids';
@@ -53,6 +54,7 @@ describe('Simple page visit tests with screenshots', () => {
 
     it('blog article detail visit with screenshot', function () {
         cy.visitAndWaitForStableAndInteractiveDOM(url.blogArticleGrapesJs);
+        changeBlogArticleDynamicPartsToStaticDemodata();
         takeSnapshotAndCompare(this.test?.title, 'blog article detail', {
             blackout: [{ tid: TIDs.product_list_item_image }, { tid: TIDs.footer_social_links }],
         });

diff --git a/storefront/cypress/e2e/visits/visitsSupport.ts b/storefront/cypress/e2e/visits/visitsSupport.ts
@@ -0,0 +1,7 @@
+import { blogArticle } from 'fixtures/demodata';
+import { changeElementText } from 'support';
+import { TIDs } from 'tids';
+
+export const changeBlogArticleDynamicPartsToStaticDemodata = () => {
+    changeElementText(TIDs.blog_article_publication_date, blogArticle.publicationDate, false);
+};
diff --git a/storefront/cypress/fixtures/demodata.ts b/storefront/cypress/fixtures/demodata.ts
@@ -53,6 +53,10 @@ export const order = {
     creationDate: '10/26/1999 10:10 AM',
 };
 
+export const blogArticle = {
+    publicationDate: '10/26/1999',
+};
+
 export const payment = {
     creditCard: {
         uuid: '808f7a8a-6143-538e-a46d-3803519ecf00',

diff --git a/...port to home, cash on delivery) and check it in order detail (order detail).png b/...port to home, cash on delivery) and check it in order detail (order detail).png
diff --git a/...nlogged user (PPL, credit cart) and check it in order detail (order detail).png b/...nlogged user (PPL, credit cart) and check it in order detail (order detail).png
diff --git a/...ser (personal collection, cash) and check it in order detail (order detail).png b/...ser (personal collection, cash) and check it in order detail (order detail).png
diff --git a/...port to home, cash on delivery) and check it in order detail (order detail).png b/...port to home, cash on delivery) and check it in order detail (order detail).png
diff --git a/...port to home, cash on delivery) and check it in order detail (order detail).png b/...port to home, cash on delivery) and check it in order detail (order detail).png
diff --git a/...ld create order with promo code and check it in order detail (order detail).png b/...ld create order with promo code and check it in order detail (order detail).png
diff --git a/... and check that the just created order is in customer orders (order detail).png b/... and check that the just created order is in customer orders (order detail).png
diff --git a/...r, but then fill and keep new delivery address after refresh (order detail).png b/...r, but then fill and keep new delivery address after refresh (order detail).png
diff --git a/...ved one and back to the new address which should stay filled (order detail).png b/...ved one and back to the new address which should stay filled (order detail).png
diff --git a/...cy.ts/should keep filled delivery address after page refresh (order detail).png b/...cy.ts/should keep filled delivery address after page refresh (order detail).png
diff --git a/...ox for different delivery address and then checking it again (order detail).png b/...ox for different delivery address and then checking it again (order detail).png
diff --git a/...illed delivery address for logged-in user after page refresh (order detail).png b/...illed delivery address for logged-in user after page refresh (order detail).png
diff --git a/...ox for different delivery address and then checking it again (order detail).png b/...ox for different delivery address and then checking it again (order detail).png
diff --git a/...hecking and checking checkbox for different delivery address (order detail).png b/...hecking and checking checkbox for different delivery address (order detail).png
diff --git a/... and then keep the filled delivery information after refresh (order detail).png b/... and then keep the filled delivery information after refresh (order detail).png
diff --git a/...elected pickup point and keep delivery contact after refresh (order detail).png b/...elected pickup point and keep delivery contact after refresh (order detail).png
diff --git a/...ox for different delivery contact and then checking it again (order detail).png b/...ox for different delivery contact and then checking it again (order detail).png
diff --git a/...shots.cy.ts/blog article detail visit with screenshot (blog article detail).png b/...shots.cy.ts/blog article detail visit with screenshot (blog article detail).png
diff --git a/storefront/cypress/tids.ts b/storefront/cypress/tids.ts
@@ -81,4 +81,5 @@ export enum TIDs {
     blog_preview_image = 'blog_preview_image',
     product_gallery_image = 'product_gallery_image',
     stores_map = 'stores_map',
+    blog_article_publication_date = 'blog_article_publication_date',
 }
diff --git a/storefront/store/slices/createPageLoadingStateSlice.ts b/storefront/store/slices/createPageLoadingStateSlice.ts
@@ -13,6 +13,7 @@ const CUSTOM_PAGE_TYPES = [
     'contact-information',
     'cart',
     'order-confirmation',
+    'contact',
 ] as const;
 
 export type PageType = FriendlyPagesTypesKey | (typeof CUSTOM_PAGE_TYPES)[number];