[project-base] [SSP-2570] added opening hours to packetery selected t…

…ransport label (#3332)

storefront/components/Blocks/OpeningHours/OpeningHours.tsx

@@ -3,9 +3,13 @@ import useTranslation from 'next-translate/useTranslation';
 import { Fragment } from 'react';
 import { twJoin } from 'tailwind-merge';
 import { useFormatDate } from 'utils/formatting/useFormatDate';
+import { StoreOrPacketeryPoint } from 'utils/packetery/types';
 import { twMergeCustom } from 'utils/twMerge';
 
-export const OpeningHours: FC<{ openingHours: TypeOpeningHours }> = ({ openingHours, className }) => {
+export const OpeningHours: FC<{ openingHours: StoreOrPacketeryPoint['openingHours'] | TypeOpeningHours }> = ({
+    openingHours,
+    className,
+}) => {
     const { t } = useTranslation();
     const { formatDate } = useFormatDate();
 
@@ -32,39 +36,76 @@ export const OpeningHours: FC<{ openingHours: TypeOpeningHours }> = ({ openingHo
         }
     };
 
+    if (openingHours.openingHoursOfDays.length === 0) {
+        return null;
+    }
+
     return (
-        <div className={twMergeCustom('flex w-full flex-col text-sm', className)}>
-            {openingHours.openingHoursOfDays.map(({ date, dayOfWeek, openingHoursRanges }) => {
-                const isToday = openingHours.dayOfWeek === dayOfWeek;
-                const isClosedWholeDay = openingHoursRanges.length === 0;
+        <>
+            <div className="my-1 text-textDisabled">{t('Open') + ': '}</div>
+            {'exceptionDays' in openingHours &&
+                openingHours.exceptionDays?.map((exceptionDay, index) => {
+                    let exceptionDayText = formatDate(exceptionDay.from, 'D.M.');
+
+                    if (exceptionDay.to) {
+                        exceptionDayText += ` - ${formatDate(exceptionDay.to, 'D.M.')}`;
+                    }
+
+                    if (exceptionDay.times.length) {
+                        for (let index = 0; index < exceptionDay.times.length; index++) {
+                            if (index === 0) {
+                                exceptionDayText += ` ${exceptionDay.times[index].open} - ${exceptionDay.times[index].close}`;
+                            } else {
+                                exceptionDayText += `, ${exceptionDay.times[index].open} - ${exceptionDay.times[index].close}`;
+                            }
+                        }
+                    } else {
+                        exceptionDayText += ` ${t('Closed')}`;
+                    }
+
+                    return (
+                        <div
+                            key={index}
+                            className={twMergeCustom('flex w-full flex-col text-sm text-textError', className)}
+                        >
+                            {exceptionDayText}
+                        </div>
+                    );
+                })}
+
+            <div className={twMergeCustom('flex w-full flex-col text-sm', className)}>
+                {openingHours.openingHoursOfDays.map(({ date, dayOfWeek, openingHoursRanges }) => {
+                    const isToday = openingHours.dayOfWeek === dayOfWeek;
+                    const isClosedWholeDay = openingHoursRanges.length === 0;
 
-                return (
-                    <div
-                        key={dayOfWeek}
-                        className={twJoin(
-                            'flex flex-row',
-                            isToday && openingHours.isOpen && 'text-openingStatusOpen',
-                            isToday && !openingHours.isOpen && 'text-openingStatusOpenToday',
-                            isToday && isClosedWholeDay && 'text-openingStatusClosed',
-                        )}
-                    >
-                        <strong className="basis-32 text-left">
-                            {getDayName(openingHours.dayOfWeek, dayOfWeek)} {formatDate(date, 'D.M.')}
-                        </strong>
-                        <span className="flex-1">
-                            {isClosedWholeDay ? (
-                                <>&nbsp;{t('Closed')}</>
-                            ) : (
-                                openingHoursRanges.map(({ openingTime, closingTime }, index) => (
-                                    <Fragment key={index}>
-                                        {index > 0 && ','} {openingTime}&nbsp;-&nbsp;{closingTime}
-                                    </Fragment>
-                                ))
+                    return (
+                        <div
+                            key={dayOfWeek}
+                            className={twJoin(
+                                'flex flex-row',
+                                isToday && openingHours.isOpen && 'text-openingStatusOpen',
+                                isToday && !openingHours.isOpen && 'text-openingStatusOpenToday',
+                                isToday && isClosedWholeDay && 'text-openingStatusClosed',
                             )}
-                        </span>
-                    </div>
-                );
-            })}
-        </div>
+                        >
+                            <strong className="basis-32 text-left">
+                                {getDayName(openingHours.dayOfWeek, dayOfWeek)} {formatDate(date, 'D.M.')}
+                            </strong>
+                            <span className="flex-1">
+                                {isClosedWholeDay ? (
+                                    <>&nbsp;{t('Closed')}</>
+                                ) : (
+                                    openingHoursRanges.map(({ openingTime, closingTime }, index) => (
+                                        <Fragment key={index}>
+                                            {index > 0 && ','} {openingTime}&nbsp;-&nbsp;{closingTime}
+                                        </Fragment>
+                                    ))
+                                )}
+                            </span>
+                        </div>
+                    );
+                })}
+            </div>
+        </>
     );
 };

storefront/components/Blocks/Popup/PickupPlacePopup.tsx

@@ -3,15 +3,15 @@ import { Button } from 'components/Forms/Button/Button';
 import { Popup } from 'components/Layout/Popup/Popup';
 import { StoreSelect } from 'components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/StoreSelect';
 import { TIDs } from 'cypress/tids';
-import { TypeListedStoreFragment } from 'graphql/requests/stores/fragments/ListedStoreFragment.generated';
 import { useTransportStoresQuery } from 'graphql/requests/transports/queries/TransportStoresQuery.generated';
 import useTranslation from 'next-translate/useTranslation';
 import { useState } from 'react';
 import { useSessionStore } from 'store/useSessionStore';
+import { StoreOrPacketeryPoint } from 'utils/packetery/types';
 
 type PickupPlacePopupProps = {
     transportUuid: string;
-    onChangePickupPlaceCallback: (transportUuid: string, selectedPickupPlace: TypeListedStoreFragment | null) => void;
+    onChangePickupPlaceCallback: (transportUuid: string, selectedPickupPlace: StoreOrPacketeryPoint | null) => void;
 };
 
 export const PickupPlacePopup: FC<PickupPlacePopupProps> = ({ transportUuid, onChangePickupPlaceCallback }) => {

storefront/components/Pages/Order/ContactInformation/contactInformationUtils.ts

@@ -15,7 +15,6 @@ import {
     TypeCreateOrderMutationVariables,
     useCreateOrderMutation,
 } from 'graphql/requests/orders/mutations/CreateOrderMutation.generated';
-import { TypeListedStoreFragment } from 'graphql/requests/stores/fragments/ListedStoreFragment.generated';
 import { GtmMessageOriginType } from 'gtm/enums/GtmMessageOriginType';
 import { getGtmCreateOrderEventOrderPart, getGtmCreateOrderEventUserPart } from 'gtm/factories/getGtmCreateOrderEvent';
 import { onGtmCreateOrderEventHandler } from 'gtm/handlers/onGtmCreateOrderEventHandler';
@@ -34,6 +33,7 @@ import { useChangePaymentInCart } from 'utils/cart/useChangePaymentInCart';
 import { useCurrentCart } from 'utils/cart/useCurrentCart';
 import { handleFormErrors } from 'utils/forms/handleFormErrors';
 import { getIsPaymentWithPaymentGate } from 'utils/mappers/payment';
+import { StoreOrPacketeryPoint } from 'utils/packetery/types';
 import { getInternationalizedStaticUrls } from 'utils/staticUrls/getInternationalizedStaticUrls';
 import { useCurrentUserContactInformation } from 'utils/user/useCurrentUserContactInformation';
 
@@ -88,7 +88,7 @@ export const useCreateOrder = (
 const getCreateOrderMutationVariables = (
     cartUuid: string | null,
     formValues: ContactInformation,
-    selectedPickupPlace: TypeListedStoreFragment | null,
+    selectedPickupPlace: StoreOrPacketeryPoint | null,
     user: CurrentCustomerType | undefined | null,
 ) => {
     const country = formValues.country.value;

storefront/components/Pages/Order/ContactInformation/deliveryAddressUtils.ts

@@ -1,7 +1,7 @@
 import { TypeCreateOrderMutationVariables } from 'graphql/requests/orders/mutations/CreateOrderMutation.generated';
-import { TypeListedStoreFragment } from 'graphql/requests/stores/fragments/ListedStoreFragment.generated';
 import { ContactInformation } from 'store/slices/createContactInformationSlice';
 import { CurrentCustomerType } from 'types/customer';
+import { StoreOrPacketeryPoint } from 'utils/packetery/types';
 
 type DeliveryInfo = Pick<
     TypeCreateOrderMutationVariables,
@@ -47,7 +47,7 @@ export const getSelectedDeliveryAddressForLoggedInUser = (
 
 export const getDeliveryInfoFromSelectedPickupPlace = (
     formValues: ContactInformation,
-    selectedPickupPlace: TypeListedStoreFragment,
+    selectedPickupPlace: StoreOrPacketeryPoint,
 ): DeliveryInfo => ({
     deliveryFirstName: formValues.isDeliveryAddressDifferentFromBilling
         ? formValues.deliveryFirstName

storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/StoreSelect.tsx

@@ -2,9 +2,9 @@ import { TransportAndPaymentListItem } from './TransportAndPaymentListItem';
 import { Radiobutton } from 'components/Forms/Radiobutton/Radiobutton';
 import { TransportAndPaymentSelectItemLabel } from 'components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelectItemLabel';
 import { TypeListedStoreConnectionFragment } from 'graphql/requests/stores/fragments/ListedStoreConnectionFragment.generated';
-import { TypeListedStoreFragment } from 'graphql/requests/stores/fragments/ListedStoreFragment.generated';
 import { useMemo } from 'react';
 import { mapConnectionEdges } from 'utils/mappers/connection';
+import { StoreOrPacketeryPoint } from 'utils/packetery/types';
 
 type StoreSelectProps = {
     selectedStoreUuid: string;
@@ -13,7 +13,7 @@ type StoreSelectProps = {
 };
 
 export const StoreSelect: FC<StoreSelectProps> = ({ selectedStoreUuid, stores, onSelectStoreCallback }) => {
-    const mappedStores = useMemo(() => mapConnectionEdges<TypeListedStoreFragment>(stores.edges), [stores.edges]);
+    const mappedStores = useMemo(() => mapConnectionEdges<StoreOrPacketeryPoint>(stores.edges), [stores.edges]);
 
     return (
         <ul className="max-h-[70dvh] overflow-y-auto">

storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelect.tsx

@@ -13,7 +13,6 @@ import { useDomainConfig } from 'components/providers/DomainConfigProvider';
 import { TIDs } from 'cypress/tids';
 import { TypeSimplePaymentFragment } from 'graphql/requests/payments/fragments/SimplePaymentFragment.generated';
 import { useGoPaySwiftsQuery } from 'graphql/requests/payments/queries/GoPaySwiftsQuery.generated';
-import { TypeListedStoreFragment } from 'graphql/requests/stores/fragments/ListedStoreFragment.generated';
 import { TypeTransportStoresFragment } from 'graphql/requests/transports/fragments/TransportStoresFragment.generated';
 import { TypeTransportWithAvailablePaymentsFragment } from 'graphql/requests/transports/fragments/TransportWithAvailablePaymentsFragment.generated';
 import useTranslation from 'next-translate/useTranslation';
@@ -22,10 +21,11 @@ import { createEmptyArray } from 'utils/arrays/createEmptyArray';
 import { ChangePaymentInCart } from 'utils/cart/useChangePaymentInCart';
 import { ChangeTransportInCart } from 'utils/cart/useChangeTransportInCart';
 import { useCurrentCart } from 'utils/cart/useCurrentCart';
+import { StoreOrPacketeryPoint } from 'utils/packetery/types';
 
 type TransportAndPaymentSelectProps = {
     transports: TypeTransportWithAvailablePaymentsFragment[];
-    lastOrderPickupPlace: TypeListedStoreFragment | null;
+    lastOrderPickupPlace: StoreOrPacketeryPoint | null;
     changeTransportInCart: ChangeTransportInCart;
     changePaymentInCart: ChangePaymentInCart;
     isTransportSelectionLoading: boolean;

storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelectItemLabel.tsx

@@ -2,18 +2,18 @@ import { Image } from 'components/Basic/Image/Image';
 import { OpeningHours } from 'components/Blocks/OpeningHours/OpeningHours';
 import { TIDs } from 'cypress/tids';
 import { TypeImageFragment } from 'graphql/requests/images/fragments/ImageFragment.generated';
-import { TypeListedStoreFragment } from 'graphql/requests/stores/fragments/ListedStoreFragment.generated';
 import { Translate } from 'next-translate';
 import useTranslation from 'next-translate/useTranslation';
 import { useFormatPrice } from 'utils/formatting/useFormatPrice';
+import { StoreOrPacketeryPoint } from 'utils/packetery/types';
 
 type TransportAndPaymentSelectItemLabelProps = {
     name: string;
     price?: { priceWithVat: string; priceWithoutVat: string; vatAmount: string };
     daysUntilDelivery?: number;
     description?: string | null;
     image?: TypeImageFragment | null;
-    pickupPlaceDetail?: TypeListedStoreFragment;
+    pickupPlaceDetail?: StoreOrPacketeryPoint;
 };
 
 export const TransportAndPaymentSelectItemLabel: FC<TransportAndPaymentSelectItemLabelProps> = ({
@@ -52,8 +52,6 @@ export const TransportAndPaymentSelectItemLabel: FC<TransportAndPaymentSelectIte
                                 pickupPlaceDetail.city}
                         </div>
 
-                        <div className="my-1 text-textDisabled">{t('Open') + ': '}</div>
-
                         <OpeningHours openingHours={pickupPlaceDetail.openingHours} />
                     </div>
                 )}

storefront/components/Pages/Order/TransportAndPayment/transportAndPaymentUtils.tsx

@@ -6,7 +6,6 @@ import {
     LastOrderQueryDocument,
 } from 'graphql/requests/orders/queries/LastOrderQuery.generated';
 import { TypeSimplePaymentFragment } from 'graphql/requests/payments/fragments/SimplePaymentFragment.generated';
-import { TypeListedStoreFragment } from 'graphql/requests/stores/fragments/ListedStoreFragment.generated';
 import {
     TypeStoreQuery,
     TypeStoreQueryVariables,
@@ -32,6 +31,7 @@ import { useCurrentCart } from 'utils/cart/useCurrentCart';
 import { hasValidationErrors } from 'utils/errors/hasValidationErrors';
 import { logException } from 'utils/errors/logException';
 import { mapPacketeryExtendedPoint, packeteryPick } from 'utils/packetery';
+import { StoreOrPacketeryPoint } from 'utils/packetery/types';
 import { getInternationalizedStaticUrls } from 'utils/staticUrls/getInternationalizedStaticUrls';
 
 const PickupPlacePopup = dynamic(
@@ -66,7 +66,7 @@ export const usePaymentChangeInSelect = (changePaymentHandler: ChangePaymentInCa
 
 export const useTransportChangeInSelect = (
     transports: TypeTransportWithAvailablePaymentsFragment[] | undefined,
-    lastOrderPickupPlace: TypeListedStoreFragment | null,
+    lastOrderPickupPlace: StoreOrPacketeryPoint | null,
     changeTransportHandler: ChangeTransportInCart,
     changePaymentHandler: ChangePaymentInCart,
 ) => {
@@ -151,7 +151,7 @@ export const useTransportChangeInSelect = (
         );
     };
 
-    const changePickupPlace = (transportUuid: string, selectedPickupPlace: TypeListedStoreFragment | null) => {
+    const changePickupPlace = (transportUuid: string, selectedPickupPlace: StoreOrPacketeryPoint | null) => {
         if (selectedPickupPlace) {
             changeTransportHandler(transportUuid, selectedPickupPlace);
         } else {
@@ -171,9 +171,9 @@ export const useTransportChangeInSelect = (
 const getLastOrderPickupPlace = (
     lastOrder: TypeLastOrderFragment,
     lastOrderPickupPlaceIdentifier: string,
-    lastOrderPickupPlaceFromApi: TypeListedStoreFragment | undefined | null,
-    packeteryPickupPoint: TypeListedStoreFragment | null,
-): TypeListedStoreFragment | null => {
+    lastOrderPickupPlaceFromApi: StoreOrPacketeryPoint | undefined | null,
+    packeteryPickupPoint: StoreOrPacketeryPoint | null,
+): StoreOrPacketeryPoint | null => {
     if (packeteryPickupPoint?.identifier === lastOrderPickupPlaceIdentifier) {
         return packeteryPickupPoint;
     }
@@ -205,7 +205,7 @@ type TransportAndPaymentErrorsType = {
 
 export const getTransportAndPaymentValidationMessages = (
     transport: Maybe<TypeTransportWithAvailablePaymentsFragment>,
-    pickupPlace: Maybe<TypeListedStoreFragment>,
+    pickupPlace: Maybe<StoreOrPacketeryPoint>,
     payment: Maybe<TypeSimplePaymentFragment>,
     paymentGoPayBankSwift: Maybe<string>,
     t: Translate,
@@ -250,12 +250,12 @@ export const getTransportAndPaymentValidationMessages = (
 export const useLoadTransportAndPaymentFromLastOrder = (
     changeTransportInCart: ChangeTransportInCart,
     changePaymentInCart: ChangePaymentInCart,
-): [boolean, TypeListedStoreFragment | null] => {
+): [boolean, StoreOrPacketeryPoint | null] => {
     const client = useClient();
     const isUserLoggedIn = useIsUserLoggedIn();
     const { transport: currentTransport, payment: currentPayment, cart } = useCurrentCart();
 
-    const [lastOrderPickupPlace, setLastOrderPickupPlace] = useState<TypeListedStoreFragment | null>(null);
+    const [lastOrderPickupPlace, setLastOrderPickupPlace] = useState<StoreOrPacketeryPoint | null>(null);
     const [isLoadingTransportAndPaymentFromLastOrder, setIsLoadingTransportAndPaymentFromLastOrder] = useState(false);
 
     const packeteryPickupPoint = usePersistStore((store) => store.packeteryPickupPoint);

storefront/components/Pages/Stores/StoreInfoBox.tsx

@@ -2,11 +2,11 @@ import { RemoveIcon } from 'components/Basic/Icon/RemoveIcon';
 import { Link } from 'components/Basic/Link/Link';
 import { OpeningHours } from 'components/Blocks/OpeningHours/OpeningHours';
 import { OpeningStatus } from 'components/Blocks/OpeningHours/OpeningStatus';
-import { TypeListedStoreFragment } from 'graphql/requests/stores/fragments/ListedStoreFragment.generated';
 import useTranslation from 'next-translate/useTranslation';
+import { StoreOrPacketeryPoint } from 'utils/packetery/types';
 
 type StoreInfoBoxProps = {
-    store: TypeListedStoreFragment;
+    store: StoreOrPacketeryPoint;
     closeInfoBoxCallback: () => void;
 };
 

storefront/components/Pages/Stores/StoresContent.tsx

@@ -7,10 +7,10 @@ import { SimpleLayout } from 'components/Layout/SimpleLayout/SimpleLayout';
 import { useDomainConfig } from 'components/providers/DomainConfigProvider';
 import { TIDs } from 'cypress/tids';
 import { TypeListedStoreConnectionFragment } from 'graphql/requests/stores/fragments/ListedStoreConnectionFragment.generated';
-import { TypeListedStoreFragment } from 'graphql/requests/stores/fragments/ListedStoreFragment.generated';
 import useTranslation from 'next-translate/useTranslation';
 import { useMemo, useState } from 'react';
 import { mapConnectionEdges } from 'utils/mappers/connection';
+import { StoreOrPacketeryPoint } from 'utils/packetery/types';
 
 type StoresContentProps = {
     stores: TypeListedStoreConnectionFragment;
@@ -20,7 +20,7 @@ export const StoresContent: FC<StoresContentProps> = ({ stores }) => {
     const { t } = useTranslation();
     const { defaultLocale } = useDomainConfig();
     const [activeStoreIdentifier, setActiveStoreIdentifier] = useState<string>();
-    const mappedStores = useMemo(() => mapConnectionEdges<TypeListedStoreFragment>(stores.edges), [stores.edges]);
+    const mappedStores = useMemo(() => mapConnectionEdges<StoreOrPacketeryPoint>(stores.edges), [stores.edges]);
 
     const activeMarkerHandler = (id: string) => setActiveStoreIdentifier(activeStoreIdentifier !== id ? id : undefined);