This repository constains a few React components that are mainly used by OrderPlaced and MyOrders to display information about orders.
In order to use the components exported by OrderDetails, you must include in your manifest.json
file:
"dependencies": {
"vtex.order-details": "1.x",
},
This a wrapper for the <AddressRules/>
component from vtex.address-form
that renders a formated address. It's props are defined by the interface:
interface Props {
address: Address;
pickup?: Parcel;
}
The Parcel
type comes from vtex.delivery-packages
, and the Address
component uses the attribute:
interface Parcel {
...
pickupFriendlyName: string | null;
...
}
This Attachment
component is used for rendering attachments to OrderItems
. It's props are defined by:
interface Props {
attachmentsInfo: Attachment[];
bundleInfo: Bundle[];
currency: string;
}
interface Bundle {
id: string;
attachments: Attachment[];
name: string;
price: number;
quantity: number;
imageUrl: string | null;
measurementUnit: string;
unitMultiplier: number;
}
interface Attachment {
content: any;
name: string;
}
The Subscription
component is just a customized version to use when the OrderItem
has an Attachment
that is a subscription. It's props are different and defined by:
interface Props {
attachmentItem: Attachment;
}
This component renders a Button
or a ButtonWithIcon
component from vtex.styleguide
wrapped by a Link
component from render-runtime
. It's props are:
interface Props {
to: string;
icon?: ReactNode;
fullWidth?: boolean;
openNewWindow?: boolean;
variation: string;
children: ReactChild;
}
This a wrapper for the <ProfileRules />
component from vtex.profile-form
that renders a formated profile. It's props are defined by the interface:
interface Props {
profile: ClientProfile;
}
interface ClientProfile {
email: string;
firstName: string | null;
lastName: string | null;
document: string | null;
documentType: string | null;
phone: string | null;
}
Simple components for rendering formatted dates and prices using react-intl
. Props for FormattedDate
:
interface Props {
date: string;
style: string;
}
For FormattedPrice
:
interface Props {
value: number;
currency: string;
}
Component for rendering basic information on an order visualization, along with OrderOptions
. It's props are defined by:
interface Props {
orderInfo: Order;
takeaway?: boolean;
}
Notice that the takeaway
prop is a boolean
, and should be set to true if this order has takeaway items (from InStore).
Renders ButtonLink
s for actions to perform on an order. It's props are defined by:
interface Props {
allowCancellation: boolean;
takeaway?: boolean;
className?: string;
fullWidth?: boolean;
orderId?: string;
myAccountPath?: string;
}
Renders a Alert
component from vtex.styleguide
with custom text to warn a customer that his/her order was split into multiple deliveries, pickups and takeaways. Props defined by:
interface Props {
deliveries: number;
pickups: number;
takeaways: number;
}
Component for rendering the total prices from an order. Props defined by:
interface Props {
items: OrderItem[];
totals: OrderItemTotal[];
orderValue: number;
currency: string;
}
interface OrderItem {
id: string;
attachments: Attachment[];
skuName: string;
name: string;
price: number;
listPrice: number;
bundleItems: Bundle[];
isGift: boolean;
quantity: number;
seller: string;
imageUrl: string;
detailUrl: string;
measurementUnit: string;
unitMultiplier: number;
}
interface OrderItemTotal {
id: string;
name: string;
value: number;
}
interface Bundle {
id: string;
attachments: Attachment[];
name: string;
price: number;
quantity: number;
imageUrl: string | null;
measurementUnit: string;
unitMultiplier: number;
}
interface Attachment {
content: any;
name: string;
}
Component used to render a payment's information. Props defined by:
interface Props {
payment: Payment;
transactionId: string;
currency: string;
}
interface Payment {
id: string;
paymentSystem: string;
paymentSystemName: string;
paymentOrigin: string | null;
value: number;
lastDigits: string | null;
group: string;
installments: number;
dueDate: string | null;
url: string | null;
bankIssuedInvoiceIdentificationNumberFormatted: string | null;
bankIssuedInvoiceBarCodeNumber: string | null;
bankIssuedInvoiceBarCodePNG: string | null;
}
Component for rendering information about a product in product list. Props defined by:
interface Props {
productInfo: OrderItem;
currency: string;
}
Component for rendering product images. Props defined by:
interface Props {
url: string;
alt: string;
...props: any;
}
Component to render basic information on shipping items, such as address to ship and receiver's name. Props defined by:
interface Props {
shippingData: Parcel;
index: number;
numPackages: number;
giftRegistry?: GiftRegistry | null;
}
interface GiftRegistry {
attachmentId: string;
giftRegistryId: string;
giftRegistryType: string;
giftRegistryTypeName: string;
addressId: string;
description: string;
}
Component to render basic information on store pickup items, such as pickup point address, receiver's name and pickup friendly name. Props defined by:
interface Props {
shippingData: Parcel;
index: number;
numPackages: number;
}
In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.
CSS Handles |
---|
customerInfoListContainer |
customerInfoListName |
customerInfoListEmail |
customerInfoListDocument |
customerInfoListPhone |
paymentGroup |
paymentValue |
addressContainer |
pickupFriendlyName |
updateOrderButton |
myOrdersButton |
cancelOrderButton |
Thanks goes to these wonderful people (emoji key):
LucasCastroAcctGlobal 💻 |
This project follows the all-contributors specification. Contributions of any kind are welcome!