refactor/fix: tidy up utility functions, fix icons (#1033)

saleor · Nov 17, 2023 · 88ef8db · 88ef8db
1 parent 94f12fb
commit 88ef8db
Show file tree

Hide file tree

Showing 22 changed files with 95 additions and 95 deletions.
diff --git a/src/app/(main)/cart/page.tsx b/src/app/(main)/cart/page.tsx
@@ -4,8 +4,7 @@ import Link from "next/link";
 import { CheckoutLink } from "./CheckoutLink";
 import { DeleteLineButton } from "./DeleteLineButton";
 import * as Checkout from "@/lib/checkout";
-import { formatMoney } from "@/lib/graphql";
-import { getHrefForVariant } from "@/utils/getHrefForVariant";
+import { formatMoney, getHrefForVariant } from "@/lib/utils";
 
 export const metadata = {
 	title: "Shopping Cart · Saleor Storefront example",

diff --git a/src/app/(main)/products/[slug]/page.tsx b/src/app/(main)/products/[slug]/page.tsx
@@ -4,12 +4,13 @@ import { cookies } from "next/headers";
 import { notFound } from "next/navigation";
 import { type ResolvingMetadata, type Metadata } from "next";
 import xss from "xss";
-import invariant from "ts-invariant";
+import { invariant } from "ts-invariant";
 import { type WithContext, type Product } from "schema-dts";
 import { AddButton } from "./AddButton";
 import { VariantSelector } from "@/ui/components/VariantSelector";
 import { ProductImageWrapper } from "@/ui/atoms/ProductImageWrapper";
-import { executeGraphQL, formatMoney, formatMoneyRange } from "@/lib/graphql";
+import { executeGraphQL } from "@/lib/graphql";
+import { formatMoney, formatMoneyRange } from "@/lib/utils";
 import { CheckoutAddLineDocument, ProductDetailsDocument, ProductListDocument } from "@/gql/graphql";
 import * as Checkout from "@/lib/checkout";
 import { AvailabilityMessage } from "@/ui/components/AvailabilityMessage";
@@ -129,11 +130,11 @@ export default async function Page(props: { params: { slug: string }; searchPara
 	const price = selectedVariant?.pricing?.price?.gross
 		? formatMoney(selectedVariant.pricing.price.gross.amount, selectedVariant.pricing.price.gross.currency)
 		: isAvailable
-		? formatMoneyRange({
-				start: product?.pricing?.priceRange?.start?.gross,
-				stop: product?.pricing?.priceRange?.stop?.gross,
-		  })
-		: "";
+		  ? formatMoneyRange({
+					start: product?.pricing?.priceRange?.start?.gross,
+					stop: product?.pricing?.priceRange?.stop?.gross,
+		    })
+		  : "";
 
 	const productJsonLd: WithContext<Product> = {
 		"@context": "https://schema.org",

diff --git a/src/checkout/assets/icons/add.tsx b/src/checkout/assets/icons/add.tsx
@@ -3,8 +3,8 @@ export function AddIcon() {
 		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<circle cx="12" cy="12" r="9.5" stroke="#394052" />
 			<path
-				fill-rule="evenodd"
-				clip-rule="evenodd"
+				fillRule="evenodd"
+				clipRule="evenodd"
 				d="M12.5 7C12.5 6.72386 12.2761 6.5 12 6.5C11.7239 6.5 11.5 6.72386 11.5 7V11.5H7C6.72386 11.5 6.5 11.7239 6.5 12C6.5 12.2761 6.72386 12.5 7 12.5H11.5V17C11.5 17.2761 11.7239 17.5 12 17.5C12.2761 17.5 12.5 17.2761 12.5 17V12.5H17C17.2761 12.5 17.5 12.2761 17.5 12C17.5 11.7239 17.2761 11.5 17 11.5H12.5V7Z"
 				fill="#394052"
 			/>

diff --git a/src/checkout/assets/icons/alert.tsx b/src/checkout/assets/icons/alert.tsx
@@ -2,8 +2,8 @@ export function AlertIcon() {
 	return (
 		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<circle cx="12" cy="12" r="9" stroke="#B65757" strokeWidth="2" />
-			<path d="M12 12L12 7" stroke="#B65757" strokeWidth="2" stroke-linecap="round" />
-			<path d="M12 16L12 15" stroke="#B65757" strokeWidth="2" stroke-linecap="round" />
+			<path d="M12 12L12 7" stroke="#B65757" strokeWidth="2" strokeLinecap="round" />
+			<path d="M12 16L12 15" stroke="#B65757" strokeWidth="2" strokeLinecap="round" />
 		</svg>
 	);
 }
diff --git a/src/checkout/assets/icons/discount.tsx b/src/checkout/assets/icons/discount.tsx
@@ -8,8 +8,8 @@ export function DiscountIcon() {
 			<path
 				d="M2.5 3H10.5L21.5 14L13.5 22L2.5 11V3Z"
 				stroke="#394052"
-				stroke-linecap="round"
-				stroke-linejoin="round"
+				strokeLinecap="round"
+				strokeLinejoin="round"
 			/>
 		</svg>
 	);

diff --git a/src/checkout/assets/icons/edit.tsx b/src/checkout/assets/icons/edit.tsx
@@ -4,8 +4,8 @@ export function EditIcon() {
 			<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="currentColor"
-				stroke-linecap="round"
-				stroke-linejoin="round"
+				strokeLinecap="round"
+				strokeLinejoin="round"
 			/>
 		</svg>
 	);

diff --git a/src/checkout/assets/icons/error.tsx b/src/checkout/assets/icons/error.tsx
@@ -2,8 +2,8 @@ export function ErrorIcon() {
 	return (
 		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<circle cx="12" cy="12" r="9" stroke="#B65757" strokeWidth="2" />
-			<path d="M15.5355 8.46446L8.46447 15.5355" stroke="#B65757" strokeWidth="2" stroke-linecap="round" />
-			<path d="M15.5355 15.5355L8.46447 8.46447" stroke="#B65757" strokeWidth="2" stroke-linecap="round" />
+			<path d="M15.5355 8.46446L8.46447 15.5355" stroke="#B65757" strokeWidth="2" strokeLinecap="round" />
+			<path d="M15.5355 15.5355L8.46447 8.46447" stroke="#B65757" strokeWidth="2" strokeLinecap="round" />
 		</svg>
 	);
 }
diff --git a/src/checkout/assets/icons/giftCard.tsx b/src/checkout/assets/icons/giftCard.tsx
@@ -4,8 +4,8 @@ export function GiftCardIcon() {
 			<path
 				d="M1 8L1 4H5M1 8L5 4M1 8V12.5M5 4H9.5M9.5 4H23V20H1L1 12.5M9.5 4L1 12.5M4 14H11M4 17H16"
 				stroke="#394052"
-				stroke-linecap="round"
-				stroke-linejoin="round"
+				strokeLinecap="round"
+				strokeLinejoin="round"
 			/>
 		</svg>
 	);

diff --git a/src/checkout/assets/icons/language.tsx b/src/checkout/assets/icons/language.tsx
@@ -7,14 +7,14 @@ export function LanguageIcon() {
 					stroke="#394052"
 					stroke-opacity="0.8"
 					strokeWidth="1.5"
-					stroke-linejoin="bevel"
+					strokeLinejoin="bevel"
 				/>
 				<path
 					d="M13.3513 20.9189L14.7928 17.1351M22 20.9189L20.5585 17.1351M14.7928 17.1351L17.6756 9.56755L20.5585 17.1351M14.7928 17.1351H20.5585"
 					stroke="#394052"
 					stroke-opacity="0.8"
 					strokeWidth="1.5"
-					stroke-linejoin="bevel"
+					strokeLinejoin="bevel"
 				/>
 			</g>
 			<defs>

diff --git a/src/checkout/assets/icons/minus.tsx b/src/checkout/assets/icons/minus.tsx
@@ -1,7 +1,7 @@
 export function MinusIcon() {
 	return (
 		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path d="M17 12L7 12" stroke="#394052" stroke-linecap="round" />
+			<path d="M17 12L7 12" stroke="#394052" strokeLinecap="round" />
 		</svg>
 	);
 }
diff --git a/src/checkout/assets/icons/photo.tsx b/src/checkout/assets/icons/photo.tsx
@@ -2,8 +2,8 @@ export function PhotoIcon() {
 	return (
 		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
-				fill-rule="evenodd"
-				clip-rule="evenodd"
+				fillRule="evenodd"
+				clipRule="evenodd"
 				d="M2 3.5C1.72386 3.5 1.5 3.72386 1.5 4V20C1.5 20.2761 1.72386 20.5 2 20.5H22C22.2761 20.5 22.5 20.2761 22.5 20V4C22.5 3.72386 22.2761 3.5 22 3.5H2ZM2.5 19.5V4.5H21.5V19.5H2.5ZM15.3536 8.64645C15.2569 8.54976 15.1248 8.49689 14.9881 8.50014C14.8514 8.50339 14.722 8.56249 14.63 8.66366L9.98276 13.7757L8.35355 12.1464C8.25507 12.048 8.11998 11.995 7.98081 12.0004C7.84164 12.0057 7.71101 12.0689 7.62037 12.1746L4.62037 15.6746C4.5427 15.7652 4.5 15.8806 4.5 16V18C4.5 18.2761 4.72386 18.5 5 18.5H19C19.2761 18.5 19.5 18.2761 19.5 18V13C19.5 12.8674 19.4473 12.7402 19.3536 12.6464L15.3536 8.64645ZM10.37 14.8363L15.0172 9.72434L18.5 13.2071V17.5H5.5V16.185L8.02824 13.2353L9.64645 14.8536C9.74313 14.9502 9.8752 15.0031 10.0119 14.9999C10.1486 14.9966 10.278 14.9375 10.37 14.8363ZM5.5 8C5.5 7.17157 6.17157 6.5 7 6.5C7.82843 6.5 8.5 7.17157 8.5 8C8.5 8.82843 7.82843 9.5 7 9.5C6.17157 9.5 5.5 8.82843 5.5 8ZM7 5.5C5.61929 5.5 4.5 6.61929 4.5 8C4.5 9.38071 5.61929 10.5 7 10.5C8.38071 10.5 9.5 9.38071 9.5 8C9.5 6.61929 8.38071 5.5 7 5.5Z"
 				fill="#394052"
 			/>

diff --git a/src/checkout/assets/icons/plus.tsx b/src/checkout/assets/icons/plus.tsx
@@ -2,8 +2,8 @@ export function PlusIcon() {
 	return (
 		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
-				fill-rule="evenodd"
-				clip-rule="evenodd"
+				fillRule="evenodd"
+				clipRule="evenodd"
 				d="M12.5 7C12.5 6.72386 12.2761 6.5 12 6.5C11.7239 6.5 11.5 6.72386 11.5 7V11.5H7C6.72386 11.5 6.5 11.7239 6.5 12C6.5 12.2761 6.72386 12.5 7 12.5H11.5V17C11.5 17.2761 11.7239 17.5 12 17.5C12.2761 17.5 12.5 17.2761 12.5 17V12.5H17C17.2761 12.5 17.5 12.2761 17.5 12C17.5 11.7239 17.2761 11.5 17 11.5H12.5V7Z"
 				fill="#394052"
 			/>

diff --git a/src/checkout/assets/icons/remove.tsx b/src/checkout/assets/icons/remove.tsx
@@ -2,8 +2,8 @@ export function RemoveIcon() {
 	return (
 		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
-				fill-rule="evenodd"
-				clip-rule="evenodd"
+				fillRule="evenodd"
+				clipRule="evenodd"
 				d="M16.6464 17.3536C16.8417 17.5488 17.1583 17.5488 17.3536 17.3536C17.5488 17.1583 17.5488 16.8417 17.3536 16.6464L12.7071 12L17.3536 7.35355C17.5488 7.15829 17.5488 6.84171 17.3536 6.64645C17.1583 6.45118 16.8417 6.45118 16.6464 6.64645L12 11.2929L7.35355 6.64645C7.15829 6.45118 6.84171 6.45118 6.64645 6.64645C6.45118 6.84171 6.45118 7.15829 6.64645 7.35355L11.2929 12L6.64645 16.6464C6.45118 16.8417 6.45118 17.1583 6.64645 17.3536C6.84171 17.5488 7.15829 17.5488 7.35355 17.3536L12 12.7071L16.6464 17.3536Z"
 				fill="#394052"
 			/>

diff --git a/src/checkout/assets/icons/trash.tsx b/src/checkout/assets/icons/trash.tsx
@@ -4,8 +4,8 @@ export function TrashIcon() {
 			<path
 				d="M5 5L6 22H18L19 5M5 5H9M5 5H3M19 5H15M19 5H21M9 5L10 2H14L15 5M9 5H15"
 				stroke="#394052"
-				stroke-linecap="round"
-				stroke-linejoin="round"
+				strokeLinecap="round"
+				strokeLinejoin="round"
 			/>
 		</svg>
 	);

diff --git a/src/checkout/assets/images/SaleorLogo.tsx b/src/checkout/assets/images/SaleorLogo.tsx
@@ -17,55 +17,55 @@ export function SaleorLogo() {
 				width="697"
 				height="232"
 			>
-				<path fill-rule="evenodd" clip-rule="evenodd" d="M0 8.71729H696.878V240H0V8.71729Z" fill="white" />
+				<path fillRule="evenodd" clipRule="evenodd" d="M0 8.71729H696.878V240H0V8.71729Z" fill="white" />
 			</mask>
 			<g mask="url(#mask0_1015_2366)">
 				<path
-					fill-rule="evenodd"
-					clip-rule="evenodd"
+					fillRule="evenodd"
+					clipRule="evenodd"
 					d="M115.967 239.763C158.766 239.763 169.528 222.481 169.528 198.806C169.528 169.686 143.358 164.241 121.592 160.689C104.961 157.849 97.3797 156.429 97.3797 146.248C97.3797 138.674 103.983 135.831 114.745 135.831C127.951 135.831 131.619 139.619 132.843 150.746L167.571 145.538C164.635 121.627 151.184 109.554 115.722 109.554C76.8371 109.554 63.1412 125.179 63.1412 150.036C62.8974 182.234 93.2232 185.548 115.722 189.336C129.661 191.941 135.044 194.307 135.044 203.541C135.044 211.117 130.398 214.431 116.456 214.431C101.049 214.431 96.4021 211.827 94.4457 199.28L60.696 204.252C63.875 229.584 78.7935 239.763 115.967 239.763"
 					fill="#28234A"
 				/>
 				<path
-					fill-rule="evenodd"
-					clip-rule="evenodd"
+					fillRule="evenodd"
+					clipRule="evenodd"
 					d="M227.919 213.719C211.532 213.719 205.664 210.169 205.664 198.331C205.664 187.677 211.532 183.416 229.142 183.416H246.75V195.727C246.75 207.563 240.881 213.719 227.919 213.719M212.755 239.763C231.831 239.763 240.391 233.607 246.506 224.611V238.106H280.988V152.403C280.988 123.758 269.982 109.316 231.831 109.316C194.901 109.316 181.94 119.732 176.804 145.301L211.043 150.509C213.243 139.619 216.424 136.304 230.608 136.304C244.304 136.304 246.506 141.986 246.506 151.457V160.217H230.363C186.587 160.217 171.667 173.474 171.667 200.463C171.667 226.978 185.119 239.763 212.755 239.763"
 					fill="#28234A"
 				/>
 				<path
-					fill-rule="evenodd"
-					clip-rule="evenodd"
+					fillRule="evenodd"
+					clipRule="evenodd"
 					d="M289.792 238.105H325.011V55.4467L289.792 90.3625V238.105Z"
 					fill="#28234A"
 				/>
 				<path
-					fill-rule="evenodd"
-					clip-rule="evenodd"
+					fillRule="evenodd"
+					clipRule="evenodd"
 					d="M368.056 160.923V154.532C368.056 143.405 373.192 135.827 388.599 135.827C403.518 135.827 408.411 142.221 408.411 154.532V160.923H368.056ZM388.592 240C429.191 240 439.951 221.059 442.397 202.12L408.892 197.148C407.424 208.512 405.223 214.431 388.592 214.431C371.718 214.431 368.048 206.145 368.048 195.255V184.839H442.397V162.11C442.397 130.386 429.923 109.316 388.592 109.316C347.75 109.316 333.81 130.624 333.81 157.613V191.704C333.81 217.983 347.994 240 388.592 240V240Z"
 					fill="#28234A"
 				/>
 				<path
-					fill-rule="evenodd"
-					clip-rule="evenodd"
+					fillRule="evenodd"
+					clipRule="evenodd"
 					d="M507.694 240.001C548.047 240.001 564.677 219.404 564.677 191.704V157.613C564.677 129.441 548.047 109.316 507.694 109.316C467.339 109.316 451.199 129.441 451.199 157.613V191.704C451.199 219.404 467.096 240.001 507.694 240.001M507.69 212.536C493.505 212.536 486.413 205.198 486.413 193.36V156.902C486.413 144.828 493.505 137.489 507.69 137.489C521.875 137.489 529.456 144.828 529.456 156.902V193.36C529.456 205.198 521.875 212.536 507.69 212.536"
 					fill="#28234A"
 				/>
 				<path
-					fill-rule="evenodd"
-					clip-rule="evenodd"
+					fillRule="evenodd"
+					clipRule="evenodd"
 					d="M627.579 145.446H608.703V237.364H573.486V145.446H573.485L607.893 110.532H661.987L627.579 145.446Z"
 					fill="#28234A"
 				/>
 			</g>
 			<path
-				fill-rule="evenodd"
-				clip-rule="evenodd"
+				fillRule="evenodd"
+				clipRule="evenodd"
 				d="M159.119 0L112.768 48.2953H227.27L273.622 0H159.119Z"
 				fill="#8AC4EB"
 			/>
 			<path
-				fill-rule="evenodd"
-				clip-rule="evenodd"
+				fillRule="evenodd"
+				clipRule="evenodd"
 				d="M60.7396 17.3961C61.4247 16.713 62.3526 16.3294 63.3201 16.3294H213.916C215.395 16.3294 216.729 17.221 217.294 18.5879C217.859 19.9548 217.544 21.5275 216.497 22.5719L173.073 65.8712C172.388 66.5543 171.46 66.9379 170.493 66.9379H19.8964C18.4173 66.9379 17.084 66.0464 16.519 64.6794C15.9539 63.3125 16.2685 61.7398 17.3159 60.6954L60.7396 17.3961ZM64.8308 23.6386L28.7374 59.6287H168.982L205.075 23.6386H64.8308Z"
 				fill="#28234A"
 			/>

diff --git a/src/lib/date.ts b/src/lib/date.ts
diff --git a/src/lib/graphql.ts b/src/lib/graphql.ts
@@ -74,26 +74,3 @@ export class HTTPError extends Error {
 		Object.setPrototypeOf(this, new.target.prototype);
 	}
 }
-
-export const formatMoney = (amount: number, currency: string) =>
-	new Intl.NumberFormat("en-US", {
-		style: "currency",
-		currency,
-	}).format(amount);
-
-export const formatMoneyRange = (
-	range: {
-		start?: { amount: number; currency: string } | null;
-		stop?: { amount: number; currency: string } | null;
-	} | null,
-) => {
-	const { start, stop } = range || {};
-	const startMoney = start && formatMoney(start.amount, start.currency);
-	const stopMoney = stop && formatMoney(stop.amount, stop.currency);
-
-	if (startMoney === stopMoney) {
-		return startMoney;
-	}
-
-	return `${startMoney} - ${stopMoney}`;
-};
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -0,0 +1,43 @@
+export const formatDate = (date: Date | number) => {
+	return new Intl.DateTimeFormat("en-US", { dateStyle: "medium" }).format(date);
+};
+
+export const formatMoney = (amount: number, currency: string) =>
+	new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency,
+	}).format(amount);
+
+export const formatMoneyRange = (
+	range: {
+		start?: { amount: number; currency: string } | null;
+		stop?: { amount: number; currency: string } | null;
+	} | null,
+) => {
+	const { start, stop } = range || {};
+	const startMoney = start && formatMoney(start.amount, start.currency);
+	const stopMoney = stop && formatMoney(stop.amount, stop.currency);
+
+	if (startMoney === stopMoney) {
+		return startMoney;
+	}
+
+	return `${startMoney} - ${stopMoney}`;
+};
+
+export function getHrefForVariant({
+	productSlug,
+	variantId,
+}: {
+	productSlug: string;
+	variantId?: string;
+}): string {
+	const pathname = `/products/${encodeURIComponent(productSlug)}`;
+
+	if (!variantId) {
+		return pathname;
+	}
+
+	const query = new URLSearchParams({ variant: variantId });
+	return `${pathname}?${query.toString()}`;
+}
diff --git a/src/ui/components/OrderList/components/OrderListItem.tsx b/src/ui/components/OrderList/components/OrderListItem.tsx
@@ -1,9 +1,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { PaymentStatus } from "../../PaymentStatus";
-import { formatDate } from "@/lib/date";
-import { formatMoney } from "@/lib/graphql";
-import { getHrefForVariant } from "@/utils/getHrefForVariant";
+import { formatDate, formatMoney, getHrefForVariant } from "@/lib/utils";
 import { type OrderDetailsFragment } from "@/gql/graphql";
 
 type Props = {

diff --git a/src/ui/components/ProductElement.tsx b/src/ui/components/ProductElement.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 import { ProductImageWrapper } from "@/ui/atoms/ProductImageWrapper";
 
 import type { ProductListItemFragment } from "@/gql/graphql";
-import { formatMoneyRange } from "@/lib/graphql";
+import { formatMoneyRange } from "@/lib/utils";
 
 export function ProductElement({
 	product,

diff --git a/src/ui/components/VariantSelector.tsx b/src/ui/components/VariantSelector.tsx
@@ -2,7 +2,7 @@ import { clsx } from "clsx";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { type ProductListItemFragment, type VariantDetailsFragment } from "@/gql/graphql";
-import { getHrefForVariant } from "@/utils/getHrefForVariant";
+import { getHrefForVariant } from "@/lib/utils";
 
 export function VariantSelector({
 	variants,

diff --git a/src/utils/getHrefForVariant.ts b/src/utils/getHrefForVariant.ts