@gnar-engine/cli 1.0.0 → 1.0.1

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

@@ -0,0 +1,402 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,56 @@
+.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

@@ -0,0 +1,18 @@
+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;