+ {product.title} +
+ ++ Looks like you haven’t added anything yet, let’s get you + started! +
+{codes?.join(', ')}
+
+
+ No results, try a different search.
; +} + +/** + * Search form component that posts search requests to the `/search` route + * @param {SearchFromProps} + */ +export function PredictiveSearchForm({ + action, + children, + className = 'predictive-search-form', + method = 'POST', + ...props +}) { + const params = useParams(); + const fetcher = useFetcher(); + const inputRef = useRef(null); + + function fetchResults(event) { + const searchAction = action ?? '/api/predictive-search'; + const localizedAction = params.locale + ? `/${params.locale}${searchAction}` + : searchAction; + const newSearchTerm = event.target.value || ''; + fetcher.submit( + {q: newSearchTerm, limit: '6'}, + {method, action: localizedAction}, + ); + } + + // ensure the passed input has a type of search, because SearchResults + // will select the element based on the input + useEffect(() => { + inputRef?.current?.setAttribute('type', 'search'); + }, []); + + return ( +
+ View all results for {searchTerm.current}
+ →
+
+ No results found for {searchTerm.current}
+
Status: {error.status}
+{error.data.message}
+Something went wrong.
+{errorMessage}
+ You have no addresses saved.
+ ) : ( +Placed on {new Date(order.processedAt).toDateString()}
+| Product | +Price | +Quantity | +Total | +
|---|---|---|---|
|
+ Discounts + |
+
+ Discounts + |
+
+ {discountPercentage ? (
+ -{discountPercentage}% OFF
+ ) : (
+ discountValue && |
+ |
|
+ Subtotal + |
+
+ Subtotal + |
+
+ |
+ |
| + Tax + | +
+ Tax + |
+
+ |
+ |
| + Total + | +
+ Total + |
+
+ |
+
+ {order.shippingAddress.firstName && + order.shippingAddress.firstName + ' '} + {order.shippingAddress.lastName} +
+ {order?.shippingAddress?.formatted ? ( + order.shippingAddress.formatted.map((line) => ( +{line}
+ )) + ) : ( + <> + )} + + ) : ( +No shipping address defined
+ )} +{order.fulfillmentStatus}
+{lineItem.title}
+ {lineItem.variant.title} +You haven't placed any orders yet.
++ Start Shopping → +
+Create your password to activate your account.
+ ++ Forgot password → +
++ Register → +
++ If that email address is in our system, you will receive an email + with instructions about how to reset your password in a few + minutes. +
++ Enter the email address associated with your account to receive a + link to reset your password. +
++ Login → +
++ Login → +
+{collection.description}
++ Description +
+Sale
+