Skip to content

Commit

Permalink
fix delivery address on Edit Profile page (#2789)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tvikito
tvikito authored Sep 14, 2023
2 parents 44fca17 + a0b53c5 commit 8462296
Show file tree
Hide file tree
Showing 12 changed files with 79 additions and 81 deletions.
4 changes: 2 additions & 2 deletions storefront/components/Blocks/OpeningHours/OpeningHours.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const OpeningHours: FC<{ openingHours: OpeningHoursApi }> = ({ openingHou
];

return (
<div className={twMergeCustom('flex w-full flex-col items-center text-left', className)}>
<div className={twMergeCustom('flex w-full flex-col items-center gap-2 text-left', className)}>
{openingHours.openingHoursOfDays.map(
({ firstOpeningTime, firstClosingTime, secondOpeningTime, secondClosingTime, dayOfWeek }) => {
const isToday = openingHours.dayOfWeek === dayOfWeek;
Expand All @@ -30,7 +30,7 @@ export const OpeningHours: FC<{ openingHours: OpeningHoursApi }> = ({ openingHou
<div
key={dayOfWeek}
className={twJoin(
'flex flex-col items-center py-1 md:flex-row',
'flex w-full flex-col items-center md:w-auto md:flex-row',
isToday ? 'font-bold' : 'font-normal',
)}
>
Expand Down
4 changes: 2 additions & 2 deletions storefront/components/Blocks/OrderSummary/OrderSummaryElements.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ export const OrderSummaryRowWrapper: FC = ({ children, dataTestId }) => (
export const OrderSummaryRow: FC = ({ children }) => <div className="flex justify-between">{children}</div>;

export const OrderSummaryTextAndImage: FC = ({ children, dataTestId }) => (
<div className="table-row py-2 align-baseline text-sm" data-testid={dataTestId}>
<div className="flex items-center gap-2 align-baseline text-sm" data-testid={dataTestId}>
{children}
</div>
);

export const OrderSummaryPrice: FC = ({ children, dataTestId }) => (
<div className="py-2 text-right align-baseline text-sm" data-testid={dataTestId}>
<div className="text-sm" data-testid={dataTestId}>
{children}
</div>
);
6 changes: 3 additions & 3 deletions storefront/components/Blocks/OrderSummary/PromoCode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@ export const PromoCode: FC<PromoCodeProps> = ({ discount, promoCode }) => {
const formatPrice = useFormatPrice();

return (
<OrderSummaryRowWrapper data-testid={TEST_IDENTIFIER}>
<OrderSummaryRowWrapper dataTestId={TEST_IDENTIFIER}>
<OrderSummaryContent>
<OrderSummaryRow>
<OrderSummaryTextAndImage data-testid={TEST_IDENTIFIER + '-promocode-name'}>
<OrderSummaryTextAndImage dataTestId={TEST_IDENTIFIER + '-promocode-name'}>
{`${t('Promo code')}: ${promoCode}`}
</OrderSummaryTextAndImage>
<OrderSummaryPrice data-testid={TEST_IDENTIFIER + '-promocode-discount'}>
<OrderSummaryPrice dataTestId={TEST_IDENTIFIER + '-promocode-discount'}>
<strong>-{formatPrice(discount.priceWithVat)}</strong>
</OrderSummaryPrice>
</OrderSummaryRow>
Expand Down
4 changes: 2 additions & 2 deletions storefront/components/Blocks/OrderSummary/TransportAndPayment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const TransportAndPayment: FC<TransportAndPaymentProps> = ({ payment, tra
<OrderSummaryRow>
<OrderSummaryTextAndImage dataTestId={TEST_IDENTIFIER + '-transport-name'}>
{transport.name}
<span className="ml-2 inline-block h-5 align-bottom">
<span className="inline-block align-bottom">
<Image
image={transport.mainImage}
type="default"
Expand All @@ -43,7 +43,7 @@ export const TransportAndPayment: FC<TransportAndPaymentProps> = ({ payment, tra
<OrderSummaryRow>
<OrderSummaryTextAndImage dataTestId={TEST_IDENTIFIER + '-payment-name'}>
{payment.name}
<span className="ml-2 inline-block h-5 align-bottom">
<span className="inline-block align-bottom">
<Image image={payment.mainImage} type="default" alt={payment.name} className="w-9" />
</span>
</OrderSummaryTextAndImage>
Expand Down
12 changes: 5 additions & 7 deletions storefront/components/Forms/Lib/LabelWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,10 @@ import { CheckmarkIcon } from 'components/Basic/Icon/IconsSvg';
type NativeProps = ExtractNativePropsFromDefault<LabelHTMLAttributes<HTMLLabelElement>, 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;
Expand All @@ -21,7 +20,6 @@ export const LabelWrapper: FC<LabelWrapperProps> = ({
count,
inputType,
required,
isWithoutLabel,
checked,
disabled,
selectBoxLabelIsFloated,
Expand All @@ -31,7 +29,7 @@ export const LabelWrapper: FC<LabelWrapperProps> = ({
}) => (
<div className="relative w-full">
{children}
{!isWithoutLabel && (
{!!label && (
<label
htmlFor={htmlFor}
// "peer" here is input passed from parent component
Expand Down Expand Up @@ -91,11 +89,11 @@ export const LabelWrapper: FC<LabelWrapperProps> = ({
</div>
)}

<span>
<div className="w-full">
{label}
{!!count && !checked && count > 0 && ` (${count})`}
{!!count && !checked && ` (${count})`}
{required && <span className="ml-1 text-red">*</span>}
</span>
</div>
</label>
)}
</div>
Expand Down
20 changes: 2 additions & 18 deletions storefront/components/Forms/Radiobutton/Radiobutton.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -15,13 +13,12 @@ export type RadiobuttonProps = NativeProps & {
checked: InputHTMLAttributes<HTMLInputElement>['checked'];
dataTestId?: string;
label: ReactNode;
image?: ImageSizesFragmentApi | null;
onChangeCallback?: (newValue: string | null) => void;
};

export const Radiobutton = forwardRef<HTMLInputElement, RadiobuttonProps>(
(
{ 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<HTMLInputElement> = useCallback(
Expand All @@ -40,20 +37,7 @@ export const Radiobutton = forwardRef<HTMLInputElement, RadiobuttonProps>(
);

return (
<LabelWrapper
htmlFor={id}
label={
<>
{!!image && (
<Image alt={image.name} type="default" image={image} className="mr-3 h-6 max-h-full w-11" />
)}
{label}
</>
}
inputType="radio"
checked={checked}
disabled={disabled}
>
<LabelWrapper htmlFor={id} label={label} inputType="radio" checked={checked} disabled={disabled}>
<input
className="peer sr-only"
value={value}
Expand Down
2 changes: 1 addition & 1 deletion storefront/components/Forms/Radiobutton/RadiobuttonGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Control, useController } from 'react-hook-form';
type RadiobuttonGroupProps = {
name: string;
render: (input: JSX.Element, key: string) => ReactElement<any, any> | null;
radiobuttons: Pick<RadiobuttonProps, 'disabled' | 'image' | 'label' | 'value' | 'dataTestId'>[];
radiobuttons: Pick<RadiobuttonProps, 'disabled' | 'label' | 'value' | 'dataTestId'>[];
control: Control<any>;
formName: string;
};
Expand Down
13 changes: 2 additions & 11 deletions storefront/components/Forms/TextInput/TextInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<HTMLInputElement, TextInputProps>(
Expand All @@ -44,20 +43,12 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
dataTestId,
value,
type,
isWithoutLabel,
children,
autoComplete,
},
textInputForwarderRef,
) => (
<LabelWrapper
className={className}
label={label}
required={required}
htmlFor={id}
inputType="text-input"
isWithoutLabel={isWithoutLabel}
>
<LabelWrapper className={className} label={label} required={required} htmlFor={id} inputType="text-input">
<input
className={twMergeCustom(
// class "peer" is used for styling in LabelWrapper
Expand Down
6 changes: 3 additions & 3 deletions storefront/components/Pages/Customer/AddressList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export const AddressList: FC<AddressListProps> = ({ defaultDeliveryAddress, deli
<div
key={address.uuid}
className={twJoin(
'relative mb-5 flex w-full flex-row flex-wrap rounded border border-grey p-5',
'mb-5 flex w-full items-center justify-between rounded border border-grey p-5',
defaultDeliveryAddress?.uuid === address.uuid
? 'border-primary bg-greyVeryLight'
: 'cursor-pointer',
Expand All @@ -81,15 +81,15 @@ export const AddressList: FC<AddressListProps> = ({ defaultDeliveryAddress, deli
<br />
{address.telephone && (
<>
<PhoneIcon className="relative top-[2px] mr-1" />
<PhoneIcon className="mr-1" />
{address.telephone}
</>
)}
</div>

<RemoveIcon
onClick={() => 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"
/>
</div>
))}
Expand Down
4 changes: 2 additions & 2 deletions ...s/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,14 +189,14 @@ export const TransportAndPaymentSelect: FC<TransportAndPaymentSelectProps> = ({
value={transportItem.uuid}
checked={isActive}
dataTestId={TEST_IDENTIFIER + 'transport-item-input'}
image={transportItem.mainImage}
onChangeCallback={handleTransportChange}
label={
<TransportAndPaymentSelectItemLabel
name={transportItem.name}
daysUntilDelivery={transportItem.daysUntilDelivery}
price={transportItem.price}
description={transportItem.description}
image={transportItem.mainImage}
pickupPlaceDetail={getPickupPlaceDetail(transportItem)}
/>
}
Expand All @@ -216,13 +216,13 @@ export const TransportAndPaymentSelect: FC<TransportAndPaymentSelectProps> = ({
value={paymentItem.uuid}
checked={isActive}
dataTestId={TEST_IDENTIFIER + 'payment-item-input'}
image={paymentItem.mainImage}
onChangeCallback={handlePaymentChange}
label={
<TransportAndPaymentSelectItemLabel
name={paymentItem.name}
price={paymentItem.price}
description={paymentItem.description}
image={paymentItem.mainImage}
/>
}
/>
Expand Down
83 changes: 54 additions & 29 deletions ...rder/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelectItemLabel.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
};

Expand All @@ -19,50 +21,71 @@ export const TransportAndPaymentSelectItemLabel: FC<TransportAndPaymentSelectIte
price,
daysUntilDelivery,
description,
image,
pickupPlaceDetail,
}) => {
const { t } = useTranslation();
const formatPrice = useFormatPrice();

return (
<div className="flex w-full flex-row flex-wrap items-center lg:w-auto lg:flex-1" data-testid={TEST_IDENTIFIER}>
<div className="mr-4 flex w-full flex-col flex-wrap text-sm lg:w-auto lg:flex-1">
<span data-testid={TEST_IDENTIFIER + '-name'}>{name}</span>
<span
className="inline text-sm text-greyLight lg:hidden"
data-testid={TEST_IDENTIFIER + '-description'}
>
{description}
</span>
{pickupPlaceDetail !== null && pickupPlaceDetail !== undefined && (
<>
<span className="text-sm text-greyLight" data-testid={TEST_IDENTIFIER + '-place'}>
<div className="flex w-full flex-row items-center gap-3" data-testid={TEST_IDENTIFIER}>
<Image
alt={image?.name}
type="default"
image={image}
wrapperClassName="shrink-0"
className="h-6 w-11 shrink-0 basis-11"
/>

<div className="flex flex-1 flex-col text-sm lg:flex-auto lg:basis-full lg:flex-row lg:items-center lg:gap-3">
<div data-testid={TEST_IDENTIFIER + '-name'}>{name}</div>

{description && (
<div className="text-greyLight lg:hidden" data-testid={TEST_IDENTIFIER + '-description'}>
{description}
</div>
)}

{pickupPlaceDetail && (
<div>
<div className="text-greyLight" data-testid={TEST_IDENTIFIER + '-place'}>
{pickupPlaceDetail.name}
</span>
<span className="text-sm text-greyLight" data-testid={TEST_IDENTIFIER + '-address'}>
</div>

<div className="text-greyLight" data-testid={TEST_IDENTIFIER + '-address'}>
{pickupPlaceDetail.street +
', ' +
pickupPlaceDetail.postcode +
', ' +
pickupPlaceDetail.city}
</span>
<span className="text-sm text-greyLight">{t('Open') + ': '}</span>
<OpeningHours openingHours={pickupPlaceDetail.openingHours} className="items-start" />
</>
</div>

<div className="my-1 text-greyLight">{t('Open') + ': '}</div>

<OpeningHours
openingHours={pickupPlaceDetail.openingHours}
className="items-start gap-1 lg:items-start"
/>
</div>
)}

{daysUntilDelivery !== undefined && (
<div
className="text-sm text-inStock lg:ml-auto lg:basis-36 lg:text-right"
data-testid={TEST_IDENTIFIER + '-delivery'}
>
{getDeliveryMessage(daysUntilDelivery, !!pickupPlaceDetail, t)}
</div>
)}
</div>
{daysUntilDelivery !== undefined && (
<span
className="w-1/2 text-sm text-inStock lg:w-36 lg:self-center lg:text-right"
data-testid={TEST_IDENTIFIER + '-delivery'}

{price && (
<div
className="shrink-0 text-right text-sm font-bold lg:basis-20"
data-testid={TEST_IDENTIFIER + '-price'}
>
{getDeliveryMessage(daysUntilDelivery, pickupPlaceDetail !== undefined, t)}
</span>
)}
{price !== undefined && (
<strong className="w-1/2 text-right text-sm lg:w-24" data-testid={TEST_IDENTIFIER + '-price'}>
{formatPrice(price.priceWithVat)}
</strong>
</div>
)}
</div>
);
Expand All @@ -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),
});
Expand All @@ -83,6 +107,7 @@ const getDeliveryMessage = (daysUntilDelivery: number, isPersonalPickup: boolean
count: daysUntilDelivery,
});
}

return t('Delivery in {{count}} weeks', {
count: Math.ceil(daysUntilDelivery / 7),
});
Expand Down
Loading

0 comments on commit 8462296

Please sign in to comment.