@automattic/wpcom-checkout/dist/esm/removed-from-cart-item.js

Functions and components used by WordPress.com checkout.

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import styled from '@emotion/styled';
import { Button } from '@wordpress/components';
import { useTranslate } from 'i18n-calypso';
import { useState } from 'react';
import { LoadingCopy, useRestorableProducts } from './index';
const RemovedFromCartItemWrapper = styled.div `
	color: var( --studio-gray-100 );
	line-height: 20px;
	padding: 16px 0;
	font-size: 14px;
`;
const RestorableProductButton = styled(Button) `
	color: var( --studio-gray-100 ) !important;
	font-size: inherit;
	font-weight: 500;
	line-height: 20px;
	margin-left: 4px;
	height: auto;
	text-decoration: underline;
	text-underline-offset: 2px;
	padding: 0;
`;
export const RemovedFromCartItem = ({ product, addProductsToCart, }) => {
    const [restorableProducts, setRestorableProducts] = useRestorableProducts();
    const [isPlaceholder, setIsPlaceholder] = useState(false);
    const translate = useTranslate();
    return (_jsx(RemovedFromCartItemWrapper, { children: isPlaceholder ? (_jsx(LoadingCopy, { width: "350px" })) : (_jsxs(_Fragment, { children: [translate('%(product)s was removed from the shopping cart.', {
                    args: { product: product.product_name },
                }), _jsx(RestorableProductButton, { onClick: async () => {
                        setIsPlaceholder(true);
                        await addProductsToCart([product]);
                        setRestorableProducts(restorableProducts.filter((p) => p.uuid !== product.uuid));
                    }, children: translate('Restore') })] })) }, product.uuid));
};
//# sourceMappingURL=removed-from-cart-item.js.map