Outdated Notification - Copy this React, Tailwind Component to your project

import React, { useState, useEffect } from 'react'; import { Modal, Button, SelectControl } from '@wordpress/components'; function EditOrderModal({ order, onClose, onStatusChange, storeCurrency, storeCurrencyPosition, orderStatuses }) { const [isModalOpen, setIsModalOpen] = useState(true); const [newStatus, setNewStatus] = useState(order.order_status); const [isSubmitting, setIsSubmitting] = useState(false); useEffect(() => { console.log(wp.i18n.__('Order data changed:', "woo-api-manager"), { order }); }, [order, storeCurrency, storeCurrencyPosition, orderStatuses]); const handleSubmit = async () => { setIsSubmitting(true); try { const response = await fetch(WooApiManager.ajax_url, { method: 'POST', credentials: 'same-origin', body: new URLSearchParams({ action: 'change_order_status', order_id: order.order_id, new_status: newStatus, store_url: order.store_url, security: WooApiManager.nonce, }), }); const result = await response.json(); if (result.success) { onStatusChange(); handleClose(); } else { alert(wp.i18n.__('Failed to update order status.', 'woo-api-manager')); } } catch (error) { console.error('Error changing order status:', error); alert(wp.i18n.__('Error occurred.', 'woo-api-manager')); } finally { setIsSubmitting(false); } }; const handleClose = () => { setIsModalOpen(false); onClose(); }; const formatCurrency = (value) => { const formattedValue = parseFloat(value).toFixed(2); return storeCurrencyPosition === 'left' ? `${storeCurrency}${formattedValue}` : `${formattedValue} ${storeCurrency}`; }; return isModalOpen ? ( <Modal title={`Edit Order #${order.order_id}`} onRequestClose={handleClose} className="modal-overlay" > <div className="modal-content"> <div className="modal-header"> <h2>Edit Order #{order.order_id}</h2> </div> <div className="modal-body"> <p><strong>Current Status:</strong> {orderStatuses[order.order_status] || order.order_status}</p> <p><strong>Total:</strong> {formatCurrency(order.total)}</p> <SelectControl label="New Status" value={newStatus} options={Object.entries(orderStatuses).map(([key, value]) => ({ value: key, label: value }))} onChange={(value) => setNewStatus(value)} className="modal-select" /> </div> <div className="modal-footer"> <Button isPrimary onClick={handleSubmit} disabled={isSubmitting} className="modal-button"> {isSubmitting ? 'Saving...' : 'Save Changes'} </Button> <Button isSecondary onClick={handleClose} className="modal-button secondary"> Cancel </Button> </div> </div> </Modal> ) : null; } export default EditOrderModal;