@gnar-engine/cli 1.0.3 → 1.0.4

package/bootstrap/services/portal/src/features/crudUser/CrudUserSingle.jsx

@@ -1,402 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import CustomSelect from '../../ui/customSelect/CustomSelect';
-import { userRoles } from '../../data/data';
-import gnarEngine from '@gnar-engine/js-client';
-import SaveButton from '../../ui/saveButton/SaveButton';
-import Eye from '../../assets/eye.svg'
-import EyeOff from '../../assets/eye-off.svg'
-import arrow from '../../assets/arrow.svg';
-import { useSelector } from 'react-redux';
-
-
-const CrudUserSingle = ({selectedUser, setUser, setView, loading, setLoading, refreshSelectedUser, fetchUsers, formatDate, setSelectedSingleItemId}) => {
-
-    const user = useSelector(state => state.auth.authUser);
-    const [formData, setFormData] = useState({
-        email: '',
-        username: '',
-        role: '',
-        apiKey: ''
-    });
-    const [validationErrors, setValidationErrors] = useState([]);
-    const [passwordResetSuccess, setPasswordResetSuccess] = useState(false);
-    const [showPassword, setShowPassword] = useState(false);
-    const [selectedAction, setSelectedAction] = useState(null);
-
-
-    // prepare form data for editing existing user
-    useEffect(() => {
-        console.log('user:', selectedUser);
-        // set form data for updating user
-        if (selectedUser && selectedUser.id) {
-            const newFormData = {...selectedUser};
-            setFormData(newFormData);
-        }
-        
-        // set back to default if no user is selected
-        else {        
-            setFormData({
-                email: ''
-            });
-        }
-
-        setLoading(null);
-    }, [selectedUser]);
-
-    // handle form data changes
-    const handleChange = (e) => {
-        setValidationErrors([]);
-    
-        const { name, value } = e.target;
-        setFormData(prevData => ({
-            ...prevData,
-            [name]: value
-        }));
-    };
-
-
-    // handle delete user
-    const handleDelete = async (selectedUser) => {
-        if (window.confirm('Are you sure you want to delete this user?')) {
-            try {
-                setLoading('loading');
-
-                console.log('selectedUser:', selectedUser);
-
-                await gnarEngine.user.delete(selectedUser.id);
-
-                setLoading('success');
-                setTimeout(() => {
-                    setLoading(null);
-                }, 3000);
-
-                refreshSelectedUser();
-                await fetchUsers();  
-                setView('list');  
-
-            } catch (error) {
-
-                setLoading('error');
-                console.error('Error deleting user:', error);
-            }
-        } else {
-            console.log('Deletion canceled');
-        }
-    };
-
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        setValidationErrors([]);  // Clear any previous validation errors
-    
-        // Set loading state to 'loading'
-        setLoading('loading');
-    
-        try {
-            if (selectedUser) {
-                // Update existing user
-                const data = { ...formData };
-                delete data.created_at;
-                delete data.updated_at;
-                delete data.id;
-
-                const updatedUserResponse = await gnarEngine.user.update(selectedUser.id, data);
-
-                setLoading('success');
-                setTimeout(() => {
-                    setLoading(null);
-                    refreshSelectedUser(updatedUserResponse.user);
-                }, 3000);
-    
-            } else {
-                // Creating a new user
-                await gnarEngine.user.createUser(formData);
-
-                setLoading('success');
-                setTimeout(() => {
-                    setLoading(null);
-                    fetchUsers();  
-                    setView('list');
-
-                }, 3000);
-            }
-        } catch (error) {
-            // Collect server-side validation errors, if any
-            const errors = [];
-    
-            if (error.response?.data?.errors) {
-                Object.keys(error.response.data.errors).forEach((key) => {
-                    errors.push(error.response.data.errors[key]);
-                });
-            } else if (error.response?.data?.message) {
-                errors.push(error.response.data.message);
-            }
-    
-            setValidationErrors(errors);  // Set validation errors to be displayed
-            console.error('Error saving user:', error);
-
-            setLoading('error'); 
-            setTimeout(() => {
-                setLoading(null);  
-            }, 3000);
-        }
-    };
-
-    const handleAction = () => {
-        if (!selectedAction) {
-            alert("Please select an action first!");
-            return;
-        }
-    
-        if (selectedAction.id === "delete") {
-            handleDelete(selectedUser);
-        } else if (selectedAction.id === "export") {
-            console.log("Export action triggered");
-        }
-    };
-    
-    
-
-    const handlePasswordReset = async () => {
-        if (!selectedUser || !selectedUser.id) {
-            return;
-        }
-
-        setPasswordResetSuccess(true);  // Show success message
-        setTimeout(() => {
-            setPasswordResetSuccess(false);  // Hide it after 3 seconds
-        }, 3000);
-        
-        try {
-            await gnarEngine.sendPasswordReset({ email: selectedUser.email });
-
-        } catch (error) {
-            const errors = [];
-
-            if (error.response.data.errors) {
-                Object.keys(error.response.data.errors).forEach((key) => {
-                    errors.push(error.response.data.errors[key]);
-                });
-            } else if (error.response.data.message && error.response.data.error) {
-                errors.push(error.response.data.message);
-                errors.push(error.response.data.error);
-            }
-
-            setValidationErrors(errors);
-            console.error('Error sending password reset:', error);
-        }
-    }
-
-    const routeKey = 'manage-users';
-    const handleMenuBtnClick = () => setView({ isBackToList: true });
-
-    // add event listener to sidebar buttons to change view
-    useEffect(() => {
-        const sidebarButtons = document.querySelectorAll('.sidebar a[href^="/portal/' + routeKey + '"]');
-        sidebarButtons.forEach(button => {
-            // if it doesn't already have an event listener
-            if (!button.hasEventListener) {
-                button.addEventListener('click', handleMenuBtnClick);
-            }
-        })
-
-        // Cleanup to prevent memory leaks and double bindings
-        return () => {
-            sidebarButtons.forEach(button => {
-                button.removeEventListener('click', handleMenuBtnClick);
-            });
-        };
-    }, []);
-
-    return (
-        <div className="single-edit user">
-            <div className='single-edit-header'>
-                <div className='single-edit-header-left'>
-                    {selectedUser && selectedUser.id &&
-                        <>
-                            <p><strong>User ID:&nbsp;</strong>{selectedUser.id}</p>
-                            <p><strong>Email:&nbsp;</strong>{selectedUser.email}</p>
-                            <p><strong>Role:&nbsp;</strong>{selectedUser.role}</p>
-                            <p><strong>Date Added:&nbsp;</strong>{formatDate(selectedUser?.createdAt)}</p>
-                        </>
-                    }
-                </div>
-                <div className='single-edit-header-right'>
-                    <div className="flex-row-buttons-cont">
-                        <button onClick={() => {
-                            setView('list');
-                            setUser(null);
-                            setSelectedSingleItemId(null);
-                            }} className="secondaryButton">
-                                Back
-                        </button>
-                        <button onClick={() => handleDelete(selectedUser)} className="secondaryButton">Delete</button>
-                        <SaveButton
-                            save={handleSubmit}
-                            loading={loading}
-                            textCreate="Add User"
-                            textCreateLoading="Saving..."
-                            textCreateSuccess="Saved"
-                            textCreateError="Error"
-                            textUpdate="Save"
-                            textUpdateLoading="Updating..."
-                            textUpdateSuccess="Updated"
-                            textUpdateError="Error"
-                            isUpdating={!!selectedUser} 
-                        />
-                    </div>
-                    {validationErrors.length > 0 &&
-                        <div className="error-messages">
-                            {validationErrors.map((error, index) => {
-                                return <p key={index}>{error}</p>
-                            })}
-                        </div>
-                    }
-                </div>
-
-            </div>
-            
-            <h2>Details</h2>
-
-            <div className='card account'>
-                <div className='card-header'>
-                    <h2>Account</h2>
-                </div>
-                <div className='card-content'>
-                    <form className='user-form' onSubmit={handleSubmit}>
-                        <div className='form-group'>
-                            <label>Email:</label>
-                            <input
-                                type="text"
-                                name="email"
-                                value={formData.email}
-                                onChange={handleChange}
-                                required
-                            />
-                        </div>
-
-                        {selectedUser && selectedUser.id &&
-                        <div className='form-group'>
-                            <label>Username:</label>
-                            <input
-                                type="text"
-                                name="username"
-                                value={formData.username}
-                                onChange={handleChange}
-                                required
-                            />
-                        </div>
-                        }
-
-                        {!selectedUser &&
-                            <div>
-                                <label>Password:</label>
-                                <input
-                                    type="password"
-                                    name="password"
-                                    value={formData.password}
-                                    onChange={handleChange}
-                                    required
-                                />
-                            </div>
-                        }
-
-
-                        <div className='form-group'>
-                            <label>User Role:</label>
-                            <CustomSelect 
-                                name="select-user-role" 
-                                placeholder="Select User Role"
-                                options={userRoles}
-                                labelKey="name"
-                                setSelectedOption={(option) => setFormData(prev => ({ ...prev, role: option.role }))}
-                                selectedOption={userRoles.find(role => role.role === formData.role) || null}
-                                required
-                            />
-                        </div>
-                    </form>
-                    {selectedUser && selectedUser.id &&
-                        <div className='form-group'>
-                            <a onClick={() => handlePasswordReset()} className="password-reset-btn">Send password reset</a>
-                            {passwordResetSuccess && <p>Password reset email sent successfully!</p>}
-                        </div>
-                    }
-                </div>
-            </div>
-
-            {selectedUser && selectedUser.id &&
-                <div className='card contacts'>
-                    <div className='card-header'>
-                        <h2>Contacts</h2>
-                    </div>
-                    <div className='card-content'>
-                        <p>Contact details associated with this user.</p>
-                        <form onSubmit={handleSubmit}>
-                            <div className='form-group'>
-                                <label>Type</label>
-                                <input
-                                    type="text"
-                                    name="email"
-                                    value={formData.type}
-                                    onChange={handleChange}
-                                    required
-                                />
-                            </div>
-
-                            <div className='form-group'>
-                                <label>Name</label>
-                                <input
-                                    type="text"
-                                    name="name"
-                                    value={formData.name}
-                                    onChange={handleChange}
-                                    required
-                                />
-                            </div>
-                            <button className="secondaryButton">View / Edit</button>
-                        </form>
-                    </div>
-                </div>
-            }
-
-            {user && user.id && user.role === 'service_admin' || !selectedUser &&
-                <>
-                    <h2>API Access (Service Admin Only)</h2>
-                    <div className='card api-key'>
-                        <div className='card-header'>
-                            <h2>API Keys</h2>
-                        </div>
-                        <div className='card-content'>
-                            <form onSubmit={handleSubmit}>
-                                <div className='form-group'>
-                                    <label>Key</label>
-                                    <input
-                                        type={showPassword ? "text" : "password"}
-                                        name="apiKey"
-                                        value={formData.apiKey}
-                                        onChange={handleChange}
-                                        required
-                                    />
-                                    <button
-                                        type="button"
-                                        onClick={() => setShowPassword((prev) => !prev)}
-                                        style={{
-                                            position: "absolute",
-                                            right: "0",
-                                            background: "none",
-                                            border: "none",
-                                            cursor: "pointer"
-                                        }}
-                                    >
-                                        <img src={showPassword ? Eye : EyeOff} alt="Show password" />
-                                    </button>
-                                </div>
-                            </form>
-                        </div>
-                    </div>
-                </>
-            }
-        </div>
-    );
-};
-
-export default CrudUserSingle;

package/bootstrap/services/portal/src/features/inventoryFormRow/InventoryFormRow.jsx

@@ -1,30 +0,0 @@
-import bin from '../../assets/bin.svg';
-import { useState } from 'react';
-import { currencies, taxClasses } from '../../data/data';
-import CustomSelect from '../../ui/customSelect/CustomSelect';
-
-const InventoryFormRow = ({ item, onChange, remove }) => {
-
-
-    return (
-        <div className='form-row'>
-            <input 
-                type="text"
-                name='price' 
-                value={item.price} 
-                onChange={(e) => onChange("price", Number(e.target.value))} 
-            />
-            <input 
-                type="text"
-                name='salePrice' 
-                value={item.salePrice} 
-                onChange={(e) => onChange("price", Number(e.target.value))} 
-            />
-
-            <button className='bin-icon' onClick={remove}><img src={bin} alt="" /></button>
-        </div>
-    )
-}
-
-
-export default InventoryFormRow;

package/bootstrap/services/portal/src/features/lineItems/LineItems.jsx

@@ -1,113 +0,0 @@
-const LineItems = ({order}) => {
-
-    return (
-        <div className="card">
-            <div className='card-header'>
-                <h2>Line Items & Totals</h2>
-            </div>
-            <div className='card-content'>
-                <div className="line-items-totals-cont">
-                    
-                    {/* Line Items Section */}
-                    <div className="line-items-cont">
-                        <div className="line-items-body">
-                            {order?.lineItems && order.lineItems.length > 0 ? (
-                                <table className="line-items-table">
-
-                                    {order?.originalSubscriptionOrderId && (
-                                        <>
-                                            <thead>
-                                                <tr>
-                                                    <th>Product</th>
-                                                    <th>SKU</th>
-                                                    <th>Price</th>
-                                                    <th>Quantity</th>
-                                                    <th>Discount</th>
-                                                    <th>Subtotal</th>
-                                                </tr>
-                                            </thead>
-                                            <tbody>
-                                                {order.lineItems.map((item, index) => (
-                                                    <tr key={index}>
-                                                        <td>{item.sku.replace(/-/g, ' ').toUpperCase()}</td>
-                                                        <td>{item.sku}</td>
-                                                        <td>£{item.price.toFixed(2)}</td>
-                                                        <td>x{item.quantity}</td>
-                                                        <td>£{'0.00' ||item.discount}</td>
-                                                        <td>£{(item.quantity * item.price).toFixed(2)}</td>
-                                                    </tr>
-                                                ))}
-                                            </tbody>
-                                        </>
-                                    )}
-
-                                    {order?.type === 'order' && (
-                                        <>
-                                            <thead>
-                                                <tr>
-                                                    <th>Product</th>
-                                                    <th>SKU</th>
-                                                    <th>Price</th>
-                                                    <th>Quantity</th>
-                                                    <th>Type</th>
-                                                    <th>Subtotal</th>
-                                                </tr>
-                                            </thead>
-                                            <tbody>
-                                                {order.lineItems.map((item, index) => (
-                                                    <tr key={index}>
-                                                        <td>{item.sku.replace(/-/g, ' ').toUpperCase()}</td>
-                                                        <td>{item.sku}</td>
-                                                        <td>£{item.price.price.toFixed(2)}</td>
-                                                        <td>x{item.quantity}</td>
-                                                        <td>{item.type}</td>
-                                                        <td>£{(item.quantity * item.price.price).toFixed(2)}</td>
-                                                    </tr>
-                                                ))}
-                                            </tbody>
-                                        </>
-                                    )}
-                                </table>
-                            ) : (
-                                <p>No line items found.</p>
-                            )}
-                        </div>
-                    </div>
-
-                    {/* Order Totals Section */}
-                    <div className="totals-cont">
-                        <div className="totals-body">
-                            <table className="totals-table">
-                                <tbody>
-                                    <tr>
-                                        <td>Currency:</td>
-                                        <td>{order?.currency}</td>
-                                    </tr>
-                                    <tr>
-                                        <td>Items Subtotal:</td>
-                                        <td>£{(order?.subTotal ?? order?.subTotal)?.toFixed(2)}</td>
-                                    </tr>
-                                    <tr>
-                                        <td>Shipping:</td>
-                                        <td>£{'0.00' || order?.shipping.toFixed(2)}</td>
-                                    </tr>
-                                    <tr>
-                                        <td>Tax:</td>
-                                        <td>£{(order?.tax ?? order?.tax)?.toFixed(2)}</td>
-                                    </tr>
-                                    <tr className="order-total">
-                                        <td><strong>Total:</strong></td>
-                                        <td><strong>£{order?.total?.toFixed(2)}</strong></td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default LineItems;

package/bootstrap/services/portal/src/features/loginForm/LoginForm.jsx

@@ -1,56 +0,0 @@
-import React, {useState, useEffect} from "react";
-import {useDispatch, useSelector} from "react-redux";
-import { login } from "../../slices/authSlice";
-import { Link } from "react-router-dom";
-
-const LoginForm = () => {
-
-    const saltRounds = 12;
-    const dispatch = useDispatch();
-    const [username, setUsername] = useState("");
-    const [password, setPassword] = useState("");
-    const [loginMessage, setLoginMessage] = useState("");
-    const {authError} = useSelector(state => state.auth);
-    
-    const handleLogin = async (e) => {
-        e.preventDefault();
-
-        if (username === "" || password === "") {
-            setLoginMessage("Please enter your email and password");
-            return;
-        }
-        try {
-            dispatch(login({username, password}));
-
-        } catch (error) {
-            setLoginMessage("Error logging in: " + error.response?.data?.message || "Unknown error");
-            console.error('Error logging in:', error);
-        }
-    }
-
-    useEffect(() => {
-        if (authError) {
-            setLoginMessage(authError);
-        }
-    }, [authError])
-
-    return (
-        <div className="login">
-            <form className="login-form" onSubmit={handleLogin}>
-                <div className="input-container">
-                    <input type="text" placeholder="Email address / Username" className="email-input-icon" value={username} onChange={(e) => { setUsername(e.target.value); setLoginMessage(''); }} />
-                </div>
-                <div className="input-container">
-                    <input type="password" placeholder="Password" className="password-input-icon" value={password} onChange={(e) => { setPassword(e.target.value); setLoginMessage(''); }}/>
-                </div>
-                <div>
-                    <button type="submit">Sign in</button>
-                    <Link to="/login/forgotten-password">password reset</Link>
-                </div>
-                <span id="login-message">{loginMessage}</span>
-            </form>
-        </div>
-    );
-}
-
-export default LoginForm;

package/bootstrap/services/portal/src/features/loginForm/loginForm.less

@@ -1,56 +0,0 @@
-.login {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    .login-form {
-        display: flex;
-        flex-direction: column;
-        width: 400px;
-
-        #login-message {
-            color: @red-1;
-            min-height: 40px;
-        }
-
-        button.loading {
-            opacity: 0.6; 
-            cursor: not-allowed; 
-        }
-
-        a {
-            text-decoration: none;
-            color: @green-1;
-            margin-left: 10px;
-        }
-
-        .input-container {
-          position: relative;
-
-          input {
-              padding-left: 50px;
-          }
-
-          &::before {
-              content: ''; 
-              position: absolute;
-              top: 50%;
-              left: 18px;
-              transform: translateY(-50%);
-              width: 20px;
-              height: 20px;
-              background-size: contain;
-              background-repeat: no-repeat;
-          }
-
-          &:nth-child(1)::before {
-              background-image: url('../assets/user-black.svg'); 
-          }
-
-          &:nth-child(2)::before {
-              background-image: url('../assets/lock.svg');
-          }
-        }
-    }
-}

package/bootstrap/services/portal/src/features/notes/Notes.jsx

@@ -1,18 +0,0 @@
-import bin from '../../assets/bin.svg';
-
-const Notes = ({ item, onChange, remove }) => {
-    return (
-        <div className="note-item">
-            <div className="note-item-body">
-                <textarea
-                    value={item.note || ''}
-                    onChange={(e) => onChange({ note: e.target.value })}
-                    placeholder="Add a note..."
-                />
-            </div>
-            <button className='bin-icon' onClick={remove}><img src={bin} alt="" /></button>
-        </div>
-    );
-};
-
-export default Notes;