fix: fix styles in checkout (#1009)

src/app/(main)/cart/page.tsx

@@ -23,10 +23,10 @@ export default async function Page() {
 					Looks like you haven’t added any items to the cart yet.
 				</p>
 				<Link
-					href={"/"}
+					href="/products"
 					className="inline-block max-w-full rounded border border-transparent bg-neutral-900 px-6 py-3 text-center font-medium text-neutral-50 hover:bg-neutral-800 aria-disabled:cursor-not-allowed aria-disabled:bg-neutral-500 sm:px-16"
 				>
-					Go back
+					Explore products
 				</Link>
 			</section>
 		);

src/app/checkout/page.tsx

@@ -17,7 +17,7 @@ export default function CheckoutPage({
 	}
 
 	return (
-		<div className="checkout-bg min-h-[calc(100vh-106px)]">
+		<div className="checkout-bg min-h-[100dvh]">
 			<section className="mx-auto max-w-7xl p-8">
 				<div className="flex items-center font-bold">
 					<a aria-label="homepage" href="/">

src/checkout/assets/icons/edit.tsx

@@ -3,7 +3,7 @@ export function EditIcon() {
 		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
 				d="M14.1111 4.33333L3 15.4444V21H8.55556L19.6667 9.88889M14.1111 4.33333L17.4444 1L23 6.55556L19.6667 9.88889M14.1111 4.33333L19.6667 9.88889"
-				stroke="#394052"
+				stroke="currentColor"
 				stroke-linecap="round"
 				stroke-linejoin="round"
 			/>

src/checkout/components/AddressForm/AddressForm.tsx

@@ -77,11 +77,9 @@ export const AddressForm: FC<PropsWithChildren<AddressFormProps>> = ({
 
 	return (
 		<>
-			<div className="mb-3 flex flex-row items-baseline justify-between">
-				<Title className="flex-1">{title}</Title>
-				<CountrySelect only={availableCountries} />
-			</div>
+			<Title className="mb-4">{title}</Title>
 			<div className="mt-2 grid grid-cols-1 gap-3">
+				<CountrySelect only={availableCountries} />
 				{orderedAddressFields.map((field) => {
 					const isRequired = isRequiredField(field);
 					const label = getFieldLabel(field);

src/checkout/components/AddressForm/useAddressFormUtils.ts

@@ -24,14 +24,22 @@ export const addressFieldMessages: Record<AddressFieldLabel, string> = {
 	phone: "Phone number",
 };
 
-export type LocalizedAddressFieldLabel = "province" | "district" | "state" | "zip" | "postal" | "postTown";
+export type LocalizedAddressFieldLabel =
+	| "province"
+	| "district"
+	| "state"
+	| "zip"
+	| "postal"
+	| "postTown"
+	| "prefecture";
 export const localizedAddressFieldMessages: Record<LocalizedAddressFieldLabel, string> = {
 	province: "Province",
 	district: "District",
 	state: "State",
 	zip: "Zip code",
 	postal: "Postal code",
 	postTown: "Post town",
+	prefecture: "Prefecture",
 };
 
 export const useAddressFormUtils = (countryCode: CountryCode = defaultCountry) => {

src/checkout/components/AddressSelectBox/AddressSelectBox.tsx

@@ -4,6 +4,7 @@ import { Button } from "@/checkout/components/Button";
 import { Address } from "@/checkout/components/Address";
 import { type AddressFragment } from "@/checkout/graphql";
 import { type AddressField } from "@/checkout/components/AddressForm/types";
+import { EditIcon } from "@/checkout/assets/icons";
 
 interface AddressSelectBoxProps<TFieldName extends string>
 	extends Omit<SelectBoxProps<TFieldName>, "children"> {
@@ -21,22 +22,20 @@ export const AddressSelectBox = <TFieldName extends string>({
 }: AddressSelectBoxProps<TFieldName>) => {
 	return (
 		<SelectBox {...rest} disabled={unavailable}>
-			<div className="flex w-full flex-row justify-between">
+			<div className="flex w-full flex-col justify-between pe-8">
 				<Address address={address as AddressFragment}>
 					{unavailable && <p className="font-xs my-1">Can&apos;t ship to this address</p>}
 				</Address>
-				<div>
-					<Button
-						variant="tertiary"
-						onClick={(event) => {
-							event.stopPropagation();
-							onEdit();
-						}}
-						ariaLabel="edit"
-						className="pointer-events-auto absolute right-4"
-						label="edit"
-					/>
-				</div>
+				<Button
+					variant="tertiary"
+					onClick={(event) => {
+						event.stopPropagation();
+						onEdit();
+					}}
+					ariaLabel="edit"
+					className="s pointer-events-auto absolute right-2 top-2 h-6 w-6 p-0"
+					label={<EditIcon />}
+				/>
 			</div>
 		</SelectBox>
 	);

src/checkout/components/Button.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 	label: ReactNode;
-	variant?: "primary" | "secondary" | "tertiary";
+	variant?: "primary" | "secondary" | "tertiary" | "";
 	ariaLabel?: string;
 	ariaDisabled?: boolean;
 }
@@ -22,9 +22,9 @@ export const Button: FC<ButtonProps> = ({
 	const classes = clsx(
 		"inline-flex h-10 items-center justify-center whitespace-nowrap rounded border active:outline-none",
 		{
-			"bg-neutral-900 hover:bg-neutral-800 disabled:bg-neutral-700 aria-disabled:bg-neutral-200 text-white px-4":
+			"bg-neutral-900 hover:bg-neutral-800 disabled:bg-neutral-700 text-white px-4 aria-disabled:cursor-not-allowed aria-disabled:opacity-70 hover:aria-disabled:bg-neutral-700":
 				variant === "primary",
-			"border-neutral-600 hover:border-neutral-700 hover:bg-neutral-300 active:bg-neutral-300 disabled:border-neutral-300 aria-disabled:border-neutral-300 bg-transparent disabled:bg-transparent aria-disabled:bg-transparent":
+			"border-neutral-600 hover:border-neutral-700 hover:bg-neutral-300 active:bg-neutral-300 disabled:border-neutral-300 aria-disabled:border-neutral-300 bg-transparent disabled:bg-transparent aria-disabled:bg-transparent px-4":
 				variant === "secondary",
 			"h-auto border-none bg-transparent p-0": variant === "tertiary",
 		},

src/checkout/components/CountrySelect.tsx

@@ -17,6 +17,9 @@ export const CountrySelect: React.FC<CountrySelectProps> = ({ only = [] }) => {
 	}));
 
 	return (
-		<Select aria-label="Country" name="countryCode" options={countryOptions} autoComplete="countryCode" />
+		<label className="flex flex-col">
+			<span className="text-xs text-neutral-700">Country</span>
+			<Select name="countryCode" options={countryOptions} autoComplete="countryCode" />
+		</label>
 	);
 };

src/checkout/components/ManualSaveAddressForm/AddressFormActions.tsx

@@ -16,22 +16,21 @@ export const AddressFormActions: React.FC<AddressFormActionsProps> = ({
 	loading,
 }) => {
 	return (
-		<div className="flex flex-row justify-end">
+		<div className="flex flex-row justify-end gap-2">
 			{onDelete && (
-				<div className="mt-1">
-					<IconButton ariaLabel="Delete address" onClick={onDelete} icon={<TrashIcon />} />
+				<div className="flex">
+					<IconButton ariaLabel="Delete address" onClick={onDelete} icon={<TrashIcon aria-hidden />} />
 				</div>
 			)}
 
-			<Button
-				className="mr-2"
-				ariaLabel="Cancel editing"
-				variant="secondary"
-				onClick={onCancel}
-				label="Cancel"
-			/>
+			<Button ariaLabel="Cancel editing" variant="secondary" onClick={onCancel} label="Cancel" />
 			{loading ? (
-				<Button disabled ariaLabel="Save address" onClick={onSubmit} label="Processing…" />
+				<Button
+					ariaDisabled
+					ariaLabel="Save address"
+					onClick={(e) => e.preventDefault()}
+					label="Processing…"
+				/>
 			) : (
 				<Button ariaLabel="Save address" onClick={onSubmit} label="Save address" />
 			)}

src/checkout/sections/AddressList/AddressList.tsx

@@ -43,7 +43,7 @@ export const AddressList: React.FC<AddressListProps> = ({
 					label="Add address"
 					className="w-full"
 				/>
-				<SelectBoxGroup label="user addresses">
+				<SelectBoxGroup label="user addresses" className="mt-2">
 					{addressList.map(({ id, ...rest }: AddressFragment) => {
 						const identifier = `${camelCase(title)}-${id}}`;
 

src/checkout/sections/PaymentSection/errorMessages.ts

@@ -7,6 +7,7 @@ export const apiErrorMessages = {
 	checkoutFinalizePasswordRequiredError: "Please set user password before finalizing checkout",
 	checkoutEmailUpdateEmailInvalidError: "Provided email is invalid",
 	checkoutAddPromoCodePromoCodeInvalidError: "Invalid promo code provided",
+	checkoutAddPromoCodePromoCodeVoucherNotApplicableError: "Provided promo code not applicable to this order",
 	userAddressUpdatePostalCodeInvalidError: "Invalid postal code provided to address form",
 	userAddressCreatePostalCodeInvalidError: "Invalid postal code provided to address form",
 	userRegisterPasswordPasswordTooShortError: "Provided password is too short",

src/checkout/sections/Summary/SummaryPromoCodeRow.tsx

@@ -34,8 +34,8 @@ export const SummaryPromoCodeRow: React.FC<SummaryPromoCodeRowProps> = ({
 	return (
 		<SummaryMoneyRow {...rest}>
 			{editable && (
-				<div className="mt-1">
-					<IconButton onClick={onDelete} ariaLabel="remove promo code" icon={<RemoveIcon />} />
+				<div>
+					<IconButton onClick={onDelete} ariaLabel="remove promo code" icon={<RemoveIcon aria-hidden />} />
 				</div>
 			)}
 		</SummaryMoneyRow>