diff --git a/storefront/components/Blocks/OpeningHours/OpeningHours.tsx b/storefront/components/Blocks/OpeningHours/OpeningHours.tsx index 80d529e802..3f54953728 100644 --- a/storefront/components/Blocks/OpeningHours/OpeningHours.tsx +++ b/storefront/components/Blocks/OpeningHours/OpeningHours.tsx @@ -17,7 +17,7 @@ export const OpeningHours: FC<{ openingHours: OpeningHoursApi }> = ({ openingHou ]; return ( -
+
{openingHours.openingHoursOfDays.map( ({ firstOpeningTime, firstClosingTime, secondOpeningTime, secondClosingTime, dayOfWeek }) => { const isToday = openingHours.dayOfWeek === dayOfWeek; @@ -30,7 +30,7 @@ export const OpeningHours: FC<{ openingHours: OpeningHoursApi }> = ({ openingHou
diff --git a/storefront/components/Blocks/OrderSummary/OrderSummaryElements.tsx b/storefront/components/Blocks/OrderSummary/OrderSummaryElements.tsx index a3349b623c..1d0e95e282 100644 --- a/storefront/components/Blocks/OrderSummary/OrderSummaryElements.tsx +++ b/storefront/components/Blocks/OrderSummary/OrderSummaryElements.tsx @@ -9,13 +9,13 @@ export const OrderSummaryRowWrapper: FC = ({ children, dataTestId }) => ( export const OrderSummaryRow: FC = ({ children }) =>
{children}
; export const OrderSummaryTextAndImage: FC = ({ children, dataTestId }) => ( -
+
{children}
); export const OrderSummaryPrice: FC = ({ children, dataTestId }) => ( -
+
{children}
); diff --git a/storefront/components/Blocks/OrderSummary/PromoCode.tsx b/storefront/components/Blocks/OrderSummary/PromoCode.tsx index 55d4e9980a..3b9ef61b39 100644 --- a/storefront/components/Blocks/OrderSummary/PromoCode.tsx +++ b/storefront/components/Blocks/OrderSummary/PromoCode.tsx @@ -21,13 +21,13 @@ export const PromoCode: FC = ({ discount, promoCode }) => { const formatPrice = useFormatPrice(); return ( - + - + {`${t('Promo code')}: ${promoCode}`} - + -{formatPrice(discount.priceWithVat)} diff --git a/storefront/components/Blocks/OrderSummary/TransportAndPayment.tsx b/storefront/components/Blocks/OrderSummary/TransportAndPayment.tsx index bee5bdfc3b..f1962a8f16 100644 --- a/storefront/components/Blocks/OrderSummary/TransportAndPayment.tsx +++ b/storefront/components/Blocks/OrderSummary/TransportAndPayment.tsx @@ -25,7 +25,7 @@ export const TransportAndPayment: FC = ({ payment, tra {transport.name} - + = ({ payment, tra {payment.name} - + {payment.name} diff --git a/storefront/components/Forms/Lib/LabelWrapper.tsx b/storefront/components/Forms/Lib/LabelWrapper.tsx index a811af6bb9..3119d64e88 100644 --- a/storefront/components/Forms/Lib/LabelWrapper.tsx +++ b/storefront/components/Forms/Lib/LabelWrapper.tsx @@ -6,11 +6,10 @@ import { CheckmarkIcon } from 'components/Basic/Icon/IconsSvg'; type NativeProps = ExtractNativePropsFromDefault, never, 'htmlFor'>; type LabelWrapperProps = NativeProps & { - label: string | ReactNode | ReactNode[]; + label: string | ReactNode | ReactNode[] | undefined; count?: number; inputType: 'textarea' | 'text-input' | 'checkbox' | 'radio' | 'selectbox'; required?: boolean; - isWithoutLabel?: boolean; checked?: boolean; disabled?: boolean; selectBoxLabelIsFloated?: boolean; @@ -21,7 +20,6 @@ export const LabelWrapper: FC = ({ count, inputType, required, - isWithoutLabel, checked, disabled, selectBoxLabelIsFloated, @@ -31,7 +29,7 @@ export const LabelWrapper: FC = ({ }) => (
{children} - {!isWithoutLabel && ( + {!!label && (
)} - +
{label} - {!!count && !checked && count > 0 && ` (${count})`} + {!!count && !checked && ` (${count})`} {required && *} - +
)}
diff --git a/storefront/components/Forms/Radiobutton/Radiobutton.tsx b/storefront/components/Forms/Radiobutton/Radiobutton.tsx index 6ad23c3772..4700194a1a 100644 --- a/storefront/components/Forms/Radiobutton/Radiobutton.tsx +++ b/storefront/components/Forms/Radiobutton/Radiobutton.tsx @@ -1,6 +1,4 @@ import { LabelWrapper } from '../Lib/LabelWrapper'; -import { Image } from 'components/Basic/Image/Image'; -import { ImageSizesFragmentApi } from 'graphql/generated'; import { forwardRef, InputHTMLAttributes, MouseEventHandler, ReactNode, useCallback } from 'react'; import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault'; @@ -15,13 +13,12 @@ export type RadiobuttonProps = NativeProps & { checked: InputHTMLAttributes['checked']; dataTestId?: string; label: ReactNode; - image?: ImageSizesFragmentApi | null; onChangeCallback?: (newValue: string | null) => void; }; export const Radiobutton = forwardRef( ( - { label, image, onChangeCallback, onChange, id, name, checked, value, disabled, dataTestId, onBlur }, + { label, onChangeCallback, onChange, id, name, checked, value, disabled, dataTestId, onBlur }, radiobuttonForwardedRef, ) => { const onClickHandler: MouseEventHandler = useCallback( @@ -40,20 +37,7 @@ export const Radiobutton = forwardRef( ); return ( - - {!!image && ( - {image.name} - )} - {label} - - } - inputType="radio" - checked={checked} - disabled={disabled} - > + ReactElement | null; - radiobuttons: Pick[]; + radiobuttons: Pick[]; control: Control; formName: string; }; diff --git a/storefront/components/Forms/TextInput/TextInput.tsx b/storefront/components/Forms/TextInput/TextInput.tsx index c3b066ecaa..a0801f6976 100644 --- a/storefront/components/Forms/TextInput/TextInput.tsx +++ b/storefront/components/Forms/TextInput/TextInput.tsx @@ -20,11 +20,10 @@ type NativeProps = ExtractNativePropsFromDefault< export type TextInputProps = NativeProps & { value: any; - label: ReactNode; + label?: ReactNode; hasError?: boolean; dataTestId?: string; inputSize?: 'small' | 'default'; - isWithoutLabel?: boolean; }; export const TextInput = forwardRef( @@ -44,20 +43,12 @@ export const TextInput = forwardRef( dataTestId, value, type, - isWithoutLabel, children, autoComplete, }, textInputForwarderRef, ) => ( - + = ({ defaultDeliveryAddress, deli
= ({ defaultDeliveryAddress, deli
{address.telephone && ( <> - + {address.telephone} )} @@ -89,7 +89,7 @@ export const AddressList: FC = ({ defaultDeliveryAddress, deli setAddressToBeDeleted(address.uuid)} - className="absolute right-5 top-5 w-3 cursor-pointer text-greyLight hover:text-red" + className="w-7 shrink-0 cursor-pointer p-2 text-greyLight hover:text-red" />
))} diff --git a/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelect.tsx b/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelect.tsx index ef1f3075bd..f33eb44dfc 100644 --- a/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelect.tsx +++ b/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelect.tsx @@ -189,7 +189,6 @@ export const TransportAndPaymentSelect: FC = ({ value={transportItem.uuid} checked={isActive} dataTestId={TEST_IDENTIFIER + 'transport-item-input'} - image={transportItem.mainImage} onChangeCallback={handleTransportChange} label={ = ({ daysUntilDelivery={transportItem.daysUntilDelivery} price={transportItem.price} description={transportItem.description} + image={transportItem.mainImage} pickupPlaceDetail={getPickupPlaceDetail(transportItem)} /> } @@ -216,13 +216,13 @@ export const TransportAndPaymentSelect: FC = ({ value={paymentItem.uuid} checked={isActive} dataTestId={TEST_IDENTIFIER + 'payment-item-input'} - image={paymentItem.mainImage} onChangeCallback={handlePaymentChange} label={ } /> diff --git a/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelectItemLabel.tsx b/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelectItemLabel.tsx index e385353218..52690fe6b9 100644 --- a/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelectItemLabel.tsx +++ b/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelectItemLabel.tsx @@ -1,14 +1,16 @@ -import { ListedStoreFragmentApi } from 'graphql/generated'; +import { ImageSizesFragmentApi, ListedStoreFragmentApi } from 'graphql/generated'; import { useFormatPrice } from 'hooks/formatting/useFormatPrice'; import useTranslation from 'next-translate/useTranslation'; import { Translate } from 'next-translate'; import { OpeningHours } from 'components/Blocks/OpeningHours/OpeningHours'; +import { Image } from 'components/Basic/Image/Image'; type TransportAndPaymentSelectItemLabelProps = { name: string; price?: { priceWithVat: string; priceWithoutVat: string; vatAmount: string }; daysUntilDelivery?: number; description?: string | null; + image?: ImageSizesFragmentApi | null; pickupPlaceDetail?: ListedStoreFragmentApi | null; }; @@ -19,50 +21,71 @@ export const TransportAndPaymentSelectItemLabel: FC { const { t } = useTranslation(); const formatPrice = useFormatPrice(); return ( -
-
- {name} - - {description} - - {pickupPlaceDetail !== null && pickupPlaceDetail !== undefined && ( - <> - +
+ {image?.name} + +
+
{name}
+ + {description && ( +
+ {description} +
+ )} + + {pickupPlaceDetail && ( +
+
{pickupPlaceDetail.name} - - +
+ +
{pickupPlaceDetail.street + ', ' + pickupPlaceDetail.postcode + ', ' + pickupPlaceDetail.city} - - {t('Open') + ': '} - - +
+ +
{t('Open') + ': '}
+ + +
+ )} + + {daysUntilDelivery !== undefined && ( +
+ {getDeliveryMessage(daysUntilDelivery, !!pickupPlaceDetail, t)} +
)}
- {daysUntilDelivery !== undefined && ( - - {getDeliveryMessage(daysUntilDelivery, pickupPlaceDetail !== undefined, t)} - - )} - {price !== undefined && ( - {formatPrice(price.priceWithVat)} - +
)}
); @@ -73,6 +96,7 @@ const getDeliveryMessage = (daysUntilDelivery: number, isPersonalPickup: boolean if (daysUntilDelivery < 7) { return t('Personal pickup in {{ count }} days', { count: daysUntilDelivery }); } + return t('Personal pickup in {{count}} weeks', { count: Math.ceil(daysUntilDelivery / 7), }); @@ -83,6 +107,7 @@ const getDeliveryMessage = (daysUntilDelivery: number, isPersonalPickup: boolean count: daysUntilDelivery, }); } + return t('Delivery in {{count}} weeks', { count: Math.ceil(daysUntilDelivery / 7), }); diff --git a/storefront/styles/globals.css b/storefront/styles/globals.css index 2ad2d93372..4981ad9573 100644 --- a/storefront/styles/globals.css +++ b/storefront/styles/globals.css @@ -73,7 +73,7 @@ input::-webkit-inner-spin-button { } svg { - @apply inline-flex h-full w-[14px] text-center font-normal normal-case leading-none; + @apply inline-flex w-[14px] text-center font-normal normal-case leading-none; } /* Firefox */