crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 15:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

handle missing shipping costs and black styling issue

Browse Source
This commit is contained in:
tedraykov 2024-07-09 11:40:14 +03:00
parent 9c05d36b31
commit c6530d3ded
19 changed files with 53 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/account/(orderId)/orders/[id]/page.tsx
View File

@ -15,7 +15,6 @@ import Image from 'next/image';
import Link from 'next/link';
import ActivateWarranty from 'components/orders/activate-warranty';
import OrderStatuses from 'components/orders/order-statuses';
import Divider from 'components/divider';
import { CoreReturn } from 'components/orders/core-return';
function Unfulfilled({ order }: { order: Order }) {
@ -178,7 +177,7 @@ function OrderDetails({ order }: { order: Order }) {
</div>
<div className="flex flex-col gap-2">
<Label>Shipping Method</Label>
<Text>{order.shippingMethod!.name}</Text>
<Text>{order.shippingMethod ? order.shippingMethod.name : 'N/A'}</Text>
</div>
</div>
<div className="flex flex-1 flex-col gap-4">

2
components/engine-sizes/index.tsx
View File

@ -38,7 +38,7 @@ const EngineSizes = async ({ collection }: { collection: Collection }) => {
return (
<div>
<h3 className="mb-3 text-3xl font-semibold text-black-700 lg:text-4xl">
<h3 className="mb-3 text-3xl font-semibold text-content-strong lg:text-4xl">
Browse Engines By Engine Sizes
</h3>
<div className="h-auto max-h-[700px] w-full overflow-auto rounded px-10 py-6 shadow">

2
components/home-page/manufacturers.tsx
View File

@ -17,7 +17,7 @@ const Manufacturers = async ({
return (
<div>
<h3 className="mb-3 text-3xl font-semibold text-black-700 lg:text-4xl">{`Browse ${title[variant]} By Manufacturer`}</h3>
<h3 className="mb-3 text-3xl font-semibold text-content-strong lg:text-4xl">{`Browse ${title[variant]} By Manufacturer`}</h3>
<ManufacturersGrid manufacturers={manufacturers} variant={variant} />
</div>
);

68
components/orders/actions.tsx
View File

@ -165,59 +165,23 @@ export const confirmOrder = async ({ order, content, formData }: ConfirmOrderOpt
}
};
export async function returnCore() {
// const rawFormData = [
// getMetafieldValue(
// 'coreReturnZip',
// {
// key: '',
// value: formData.get('name') as string | null,
// type: 'file_reference'
// },
// order
// ),
// getMetafieldValue(
// 'warrantyActivationInstallation',
// {
// key: 'warranty_activation_installation',
// value: installationFileId,
// type: 'file_reference'
// },
// order
// ),
// getMetafieldValue(
// 'warrantyActivationSelfInstall',
// {
// key: 'warranty_activation_self_install',
// value: formData.get('warranty_activation_self_install') === 'on' ? 'true' : 'false',
// type: 'boolean'
// },
// order
// ),
// getMetafieldValue(
// 'warrantyActivationMileage',
// {
// key: 'warranty_activation_mileage',
// value: formData.get('warranty_activation_mileage') as string | null,
// type: 'number_integer'
// },
// order
// ),
// getMetafieldValue(
// 'warrantyActivationVIN',
// {
// key: 'warranty_activation_vin',
// value: formData.get('warranty_activation_vin') as string | null,
// type: 'single_line_text_field'
// },
// order
// )
// ];
export async function returnCore(order: Order, formData: FormData) {
const rawFormData = [
getMetafieldValue(
'coreReturnZip',
{
key: '',
value: formData.get('name') as string | null,
type: 'file_reference'
},
order
)
];
try {
// await updateOrderMetafields({
// orderId: order.id,
// metafields: rawFormData
// });
await updateOrderMetafields({
orderId: order.id,
metafields: rawFormData
});
revalidateTag(TAGS.orderMetafields);
} catch (error) {

7
components/orders/core-return-modal.tsx
View File

@ -3,7 +3,7 @@ import { Order } from 'lib/shopify/types';
import { Button, Heading, Input } from 'components/ui';
import StatesCombobox from 'components/states-combobox';
import { useTransition } from 'react';
// import { returnCore } from './actions';
import { returnCore } from './actions';
export function CoreReturnModal({
isOpen,
@ -18,8 +18,7 @@ export function CoreReturnModal({
async function submitCoreReturn(formData: FormData) {
startTransition(async () => {
// returnCore(order, formData);
console.log(formData);
returnCore(order, formData);
});
}
@ -27,7 +26,7 @@ export function CoreReturnModal({
<Dialog open={isOpen} onClose={onClose} className="relative z-50">
<DialogBackdrop
transition
className="bg-black/30 fixed inset-0 duration-300 ease-out data-[closed]:opacity-0"
className="fixed inset-0 bg-black/30 duration-300 ease-out data-[closed]:opacity-0"
/>
<div className="fixed inset-0 w-screen overflow-y-auto p-4">
<div className="flex min-h-full items-center justify-center">

8
components/orders/order-confirmation-modal.tsx
View File

@ -121,11 +121,11 @@ function OrderConfirmationDetails({
</div>
<div className="flex items-center justify-between">
<Text>Shipping</Text>
{order.shippingMethod.price.amount !== '0.0' ? (
{order.shippingMethod && order.shippingMethod.price.amount !== '0.0' ? (
<Price
className="text-sm font-semibold"
amount={order.shippingMethod!.price.amount}
currencyCode={order.shippingMethod!.price.currencyCode}
amount={order.shippingMethod.price.amount}
currencyCode={order.shippingMethod.price.currencyCode}
/>
) : (
<Text className="font-semibold">Free</Text>
@ -228,7 +228,7 @@ export default function OrderConfirmationModal({
<Dialog open={isOpen} onClose={onClose} className="relative z-50">
<DialogBackdrop
transition
className="bg-black/30 fixed inset-0 duration-300 ease-out data-[closed]:opacity-0"
className="fixed inset-0 bg-black/30 duration-300 ease-out data-[closed]:opacity-0"
/>
<div className="fixed inset-0 w-screen overflow-y-auto p-4">
<div className="flex min-h-full items-center justify-center">

6
components/orders/order-confirmation-pdf.tsx
View File

@ -216,8 +216,10 @@ export default function OrderConfirmationPdf({
<Text style={styles.span}>Shipping</Text>
<PDFPrice
style={styles.span}
amount={order.shippingMethod!.price.amount}
currencyCode={order.shippingMethod!.price.currencyCode}
amount={(order.shippingMethod && order.shippingMethod.price.amount) || '0.0'}
currencyCode={
(order.shippingMethod && order.shippingMethod.price.currencyCode) || 'USD'
}
/>
</View>
<View

6
components/orders/order-summary.tsx
View File

@ -60,11 +60,11 @@ export default function OrderSummary({ order }: { order: Order }) {
</div>
<div className="flex items-center justify-between">
<Text>Shipping</Text>
{order.shippingMethod?.price.amount !== '0.0' ? (
{order.shippingMethod && order.shippingMethod.price.amount !== '0.0' ? (
<Price
className="text-sm font-semibold"
amount={order.shippingMethod!.price.amount}
currencyCode={order.shippingMethod!.price.currencyCode}
amount={order.shippingMethod.price.amount}
currencyCode={order.shippingMethod.price.currencyCode}
/>
) : (
<Text className="font-semibold">Free</Text>

8
components/page/mini-icon-block.tsx
View File

@ -23,12 +23,14 @@ const MiniIconBlock = async ({ block }: { block: Metaobject }) => {
{content.title && content.content && (
<div>
{content.title && (
<div className="text-sm font-medium text-black-700">{content.title}</div>
<div className="text-sm font-medium text-content-strong">{content.title}</div>
)}
{content.content && (
<p className="mt-2 text-sm text-content-strong">{content.content}</p>
)}
{content.content && <p className="mt-2 text-sm text-black-700">{content.content}</p>}
</div>
)}
{content.title && <div className="text-sm text-black-700">{content.title}</div>}
{content.title && <div className="text-sm text-content-strong">{content.title}</div>}
</div>
))}
</div>

2
components/page/rich-text-display.tsx
View File

@ -82,7 +82,7 @@ const RichTextBlock = ({ block, className }: { block: Content; className?: strin
}
return (
<p className="text-black-700">
<p className="text-content-strong">
{block.children.map((child, index) => (
<RichTextBlock key={index} block={child} />
))}

2
components/page/text-block.tsx
View File

@ -8,7 +8,7 @@ const TextBlock = ({ block }: { block: Metaobject }) => {
<div className="flex flex-col gap-8">
<div className="flex flex-col gap-5 px-4 md:px-0">
{block.title && (
<h3 className="text-xl font-bold leading-6 text-black-700">{block.title}</h3>
<h3 className="text-xl font-bold leading-6 text-content-strong">{block.title}</h3>
)}
<RichTextDisplay contentBlocks={content.children} />

2
components/plp/default-content.tsx
View File

@ -17,7 +17,7 @@ const DefaultContent = async () => {
return (
<div>
<Tag text="Learn More" />
<h3 className="mb-5 mt-3 text-3xl font-semibold text-black-700 lg:text-4xl">{title}</h3>
<h3 className="mb-5 mt-3 text-3xl font-semibold text-content-strong lg:text-4xl">{title}</h3>
<Suspense fallback={<TabsPlaceholder />}>
<Tabs fields={fields} />
</Suspense>

2
components/plp/dynamic-content.tsx
View File

@ -9,7 +9,7 @@ const DynamicContent = ({ content }: { content: Metaobject }) => {
return (
<div>
<Tag text="Learn More" />
<h3 className="mb-5 mt-3 text-3xl font-semibold text-black-700 lg:text-4xl">
<h3 className="mb-5 mt-3 text-3xl font-semibold text-content-strong lg:text-4xl">
{content.title}
</h3>
<Suspense fallback={<TabsPlaceholder />}>

2
components/plp/tabs.tsx
View File

@ -13,7 +13,7 @@ const Tabs = ({ fields }: { fields: { [key: string]: string } }) => {
{keys.map((key) => (
<Tab
key={key}
className="flex items-center justify-between rounded-sm bg-gray-200/60 p-3 text-left text-sm font-medium text-black-700 focus:outline-none focus:ring-0 data-[selected]:bg-primary data-[selected]:text-white"
className="flex items-center justify-between rounded-sm bg-gray-200/60 p-3 text-left text-sm font-medium text-content-strong focus:outline-none focus:ring-0 data-[selected]:bg-primary data-[selected]:text-white"
>
{startCase(key)}
<ChevronRightIcon className="size-4" />

2
components/transmission-codes/index.tsx
View File

@ -40,7 +40,7 @@ const TransmissionCode = async ({ collection }: { collection: Collection }) => {
return (
<div>
<h3 className="mb-3 text-3xl font-semibold text-black-700 lg:text-4xl">
<h3 className="mb-3 text-3xl font-semibold text-content-strong lg:text-4xl">
Browse By Transmission Code
</h3>
<div className="h-auto max-h-[700px] w-full overflow-auto rounded px-10 py-6 shadow">

2
components/ui/heading.tsx
View File

@ -26,6 +26,6 @@ export interface HeadingProps extends VariantProps<typeof heading> {
}
export default function Heading({ children, className, size, as }: HeadingProps) {
const Component = as || 'h2';
const Component = as || 'span';
return <Component className={heading({ size, className })}>{children}</Component>;
}

11
lib/shopify/index.ts
View File

@ -643,10 +643,6 @@ function reshapeOrder(shopifyOrder: ShopifyOrder): Order {
totalTax: reshapeMoney(shopifyOrder.totalTax),
totalPrice: reshapeMoney(shopifyOrder.totalPrice),
createdAt: shopifyOrder.createdAt,
shippingMethod: {
name: shopifyOrder.shippingLine?.title,
price: reshapeMoney(shopifyOrder.shippingLine.originalPrice)!
},
warrantyActivationDeadline: shopifyOrder.warrantyActivationDeadline,
warrantyStatus: shopifyOrder.warrantyStatus,
warrantyActivationInstallation: shopifyOrder.warrantyActivationInstallation,
@ -667,6 +663,13 @@ function reshapeOrder(shopifyOrder: ShopifyOrder): Order {
coreReturnDescription: shopifyOrder.coreReturnDescription
};
if (shopifyOrder.shippingLine) {
order.shippingMethod = {
name: shopifyOrder.shippingLine.title,
price: reshapeMoney(shopifyOrder.shippingLine.originalPrice)
};
}
if (shopifyOrder.customer) {
order.customer = reshapeCustomer(shopifyOrder.customer);
}

2
lib/shopify/types.ts
View File

@ -163,7 +163,7 @@ export type Order = {
totalShipping: Money;
totalTax: Money;
totalPrice: Money;
shippingMethod: {
shippingMethod?: {
name: string;
price: Money;
};

9
lib/styles.ts
View File

@ -18,9 +18,6 @@ export const carPartPlanetColor = {
200: '#666C89',
500: '#2D3A7B',
600: '#111C55'
},
black: {
700: '#1A1A25'
}
};
@ -44,9 +41,6 @@ export const remanTransmissionColor = {
200: '#666C89',
500: '#2D3A7B',
600: '#111C55'
},
black: {
700: '#1A1A25'
}
};
@ -70,8 +64,5 @@ export const transmissionLocatorColor = {
200: '#666C89',
500: '#2D3A7B',
600: '#111C55'
},
black: {
700: '#1A1A25'
}
};