@gnar-engine/cli 1.0.0 → 1.0.2

package/bootstrap/services/portal/src/features/passwordReset/PasswordResetForm.jsx

@@ -0,0 +1,96 @@
+import React, { useState } from "react"
+import gnarEngine from "@gnar-engine/js-client";
+import { Link } from "react-router-dom";
+
+const PasswordResetForm = () => {
+
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [message, setMessage] = useState("");
+    const [success, setSuccess] = useState(false);
+    const [loading, setLoading] = useState(false);
+    
+    const handlePasswordResetSubmit = async (e) => {
+
+        e.preventDefault();
+        setLoading(true);
+
+        // get token from url
+        const path = window.location.pathname;
+        const token = path.split('/').pop();
+
+        if (email === "") {
+            setMessage("Please enter your email address");
+            return;
+        }
+
+        if (token === "") {
+            setMessage("Invalid password reset link");
+            return;
+        }
+
+        if (password === "") {
+            setMessage("Please enter a new password");
+            return;
+        }
+
+        if (confirmPassword === "" || password !== confirmPassword) {
+            setMessage("Passwords do not match");
+            return;
+        }
+
+        (async () => {
+            try {
+                console.log('Resetting password for email:', email, 'with token:', token);
+                // change password
+                await gnarEngine.user.changePassword({email, token , password});
+                await gnarEngine.user.authenticate(email, password);
+
+                setMessage('');
+                setSuccess(true);
+            } catch (error) {
+                if (error.response.data.message) {
+                    setMessage("Error resetting password: " + error.response.data.message);
+                    console.error('Error resetting password:', error);
+                } else if (error.response.data) {
+                    setMessage("Error resetting password: " + error.response.data);
+                    console.error('Error resetting password:', error);
+                }
+            } finally {
+                setLoading(false);
+            }
+        })();
+    }
+
+    return (
+        <div className="login">
+            <h2>Password reset</h2>
+
+            <form className="login-form" onSubmit={handlePasswordResetSubmit}>
+                <input type="email" placeholder="Email address" className="email-input-icon" value={email} onChange={(e) => { setEmail(e.target.value); setMessage(''); }}/>
+                <input type="password" placeholder="Enter new password" className="password-input-icon" value={password} onChange={(e) => { setPassword(e.target.value); setMessage(''); }}/>
+                <input type="password" placeholder="Confirm new password" className="password-input-icon" value={confirmPassword} onChange={(e) => { setConfirmPassword(e.target.value); setMessage(''); }}/>
+                <div class="password-requirements">
+                    <p>To ensure the security of your account, your new password must meet the following criteria:</p>
+                    <ul>
+                        <li><strong>Minimum Length</strong>: Your password must be at least <strong>8 characters</strong> long.</li>
+                        <li><strong>Uppercase Letters</strong>: Include at least <strong>one uppercase letter</strong> (A-Z).</li>
+                        <li><strong>Lowercase Letters</strong>: Include at least <strong>one lowercase letter</strong> (a-z).</li>
+                        <li><strong>Numbers</strong>: Include at least <strong>one number</strong> (0-9).</li>
+                        <li><strong>Special Characters</strong>: Include at least <strong>one special character</strong> from the following: <strong>@, $, !, %, *, ?, &</strong>.</li>
+                    </ul>
+                    <p>Please ensure your password meets all of these requirements before submitting.</p>
+                </div>
+                <button type="submit" disabled={loading}>Update password</button>
+                <span id="login-message">{message}</span>
+
+                {success && 
+                    <span id="login-message">Password reset successful. <Link to="/login">Click here to login</Link></span>
+                }
+            </form>
+        </div>
+    );
+}
+
+export default PasswordResetForm;

package/bootstrap/services/portal/src/features/passwordReset/PasswordResetRequestForm.jsx

@@ -0,0 +1,74 @@
+import React, { useState } from "react"
+import gnarEngine from "@gnar-engine/js-client";
+
+
+const PasswordResetForm = () => {
+
+    const [email, setEmail] = useState("");
+    const [message, setMessage] = useState("");
+    const [success, setSuccess] = useState(false);
+    const [loading, setLoading] = useState(null);
+    
+    const handleRequestSubmit = async (e) => {
+
+        e.preventDefault();
+
+        setLoading('loading');
+
+        if (email === "") {
+            setMessage("Please enter your email address")
+
+            setLoading('error');
+            setTimeout(() => {
+                setLoading(null);
+            }, 3000);
+            return;
+        }
+
+        (async () => {
+            try {
+                // reset password
+                await gnarEngine.sendPasswordReset({email});
+
+                setSuccess(true);
+
+                setLoading('success');
+                setTimeout(() => {
+                    setLoading(null);
+                }, 3000);
+
+            } catch (error) {
+                if (error.response.data.message) {
+                    setMessage("Error requesting password reset: " + error.response.data.message);
+                    console.error('Error requesting password reset:', error);
+                } else if (error.response.data) {
+                    setMessage("Error requesting password reset: " + error.response.data);
+                    console.error('Error requesting password reset:', error);
+                }
+
+                setLoading('error');
+                setTimeout(() => {
+                    setLoading(null);
+                }, 3000);
+            }
+        })();
+    }
+
+    return (
+        <div className="login">
+            <h2>Password reset</h2>
+
+            <form className="login-form" onSubmit={handleRequestSubmit}>
+                <input type="email" placeholder="Email address" className="email-input-icon" value={email} onChange={(e) => { setEmail(e.target.value); setMessage(''); }}/>
+                <button className={loading} type="submit">Reset password</button>
+                <span id="login-message">{message}</span>
+
+                {success && 
+                    <span id="login-message">A reset password link will be emailed to this email if it exists as a user.</span>
+                }
+            </form>
+        </div>
+    );
+}
+
+export default PasswordResetForm;

package/bootstrap/services/portal/src/features/priceFormRow/PriceFormRow.jsx

@@ -0,0 +1,102 @@
+import { useState, useEffect } from 'react';
+import bin from '../../assets/bin.svg';
+import { currencies, productPriceTypes, productIntervals } from '../../data/data';
+import CustomSelect from '../../ui/customSelect/CustomSelect';
+
+const PriceFormRow = ({ item, onChange, remove, showLabels }) => {
+
+    const [selectedCurrency, setSelectedCurrency] = useState(null);
+    const [selectedInterval, setSelectedInterval] = useState(null);
+    const [selectedPriceType, setSelectedPriceType] = useState(null);
+
+    useEffect(() => {
+        if (item.currency) {
+            const currency = currencies.find(currency => {
+                return currency.id === item.currency;
+            });
+            setSelectedCurrency(currency || null);
+        }
+
+        if (item.type) {
+            const priceType = productPriceTypes.find(priceType => {
+                return priceType.id === item.type;
+            });
+            setSelectedPriceType(priceType || null);
+        }
+
+        if (item.interval) {
+            const interval = productIntervals.find(interval => {
+                return interval.id === item.interval;
+            }
+            );
+            setSelectedInterval(interval || null);
+        }
+        
+    }, [item]);
+
+    return (
+        <div className='form-row'>
+            <div className="input-cont">
+                {showLabels && <label>Currency</label>}
+                <CustomSelect 
+                    name="currency"
+                    placeholder="Select currency"
+                    options={currencies}
+                    labelKey="currency"
+                    setSelectedOption={(currency) => onChange("currency", currency.id)}
+                    selectedOption={selectedCurrency}
+                />
+            </div>
+
+            <div className="input-cont">
+                {showLabels && <label>Price Type</label>}
+                <CustomSelect 
+                    name="type"
+                    placeholder="Select price type"
+                    options={productPriceTypes}
+                    labelKey="type"
+                    setSelectedOption={(type) => onChange("type", type.id)}
+                    selectedOption={selectedPriceType}
+                />
+            </div>
+
+            {item.type === 'recurring' && (
+                <div className="input-cont">
+                    {showLabels && <label>Interval</label>}
+                    <CustomSelect 
+                        name="interval"
+                        placeholder="Select interval"
+                        options={productIntervals}
+                        labelKey="interval"
+                        setSelectedOption={(interval) => onChange("interval", interval.id)}
+                        selectedOption={selectedInterval}
+                    />
+                </div>
+            )}
+
+            <div className="input-cont">
+                {showLabels && <label>Price</label>}
+                <input 
+                    type="text"
+                    name='price' 
+                    value={item.price} 
+                    onChange={(e) => onChange("price", Number(e.target.value))} 
+                />
+            </div>
+
+            <div className="input-cont">
+                {showLabels && <label>Sale price</label>}
+                <input 
+                    type="text"
+                    name='salePrice' 
+                    value={item.salePrice} 
+                    onChange={(e) => onChange("salePrice", Number(e.target.value))} 
+                />
+            </div>
+
+            <button className='bin-icon' onClick={remove}><img src={bin} alt="" /></button>
+        </div>
+    );
+}
+
+export default PriceFormRow;

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

@@ -0,0 +1,24 @@
+.form-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    gap: 20px;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .input-cont {
+        display: flex;
+        flex-direction: column;
+
+        input {
+            width: 250px;
+        }
+    }
+}
+
+.form-group.categories {
+    width: 100%;
+    .custom-select-input {
+        min-width: 500px !important;
+    }
+}

package/bootstrap/services/portal/src/features/raffleEntriesList/RaffleEntriesList.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import CustomCheckbox from '../../ui/customCheckbox/CustomCheckbox';
+
+const RaffleEntriesList = ({setSelectedSingleItemId, setView, selectedEntryIds, setSelectedEntryIds, raffleEntries, message }) => {
+
+    const allSelected = raffleEntries.length > 0 && selectedEntryIds.size === raffleEntries.length;
+
+    const toggleEntrySelection = (entryId) => {
+        setSelectedEntryIds(prev => {
+            const newSet = new Set(prev);
+            if (newSet.has(entryId)) {
+                newSet.delete(entryId);
+            } else {
+                newSet.add(entryId);
+            }
+            return newSet;
+        });
+    };
+
+    const toggleSelectAll = () => {
+        if (allSelected) {
+            setSelectedEntryIds(new Set());
+        } else {
+            setSelectedEntryIds(new Set(raffleEntries.map(entry => entry.id)));
+        }
+    };
+
+    const columns = [
+        { columnLabel: 'Name', dataKey: 'user_name' },
+        { columnLabel: 'Entry ID', dataKey: 'entry_id' },
+        { columnLabel: 'Email', dataKey: 'user_email' },
+        { columnLabel: 'Order ID', dataKey: 'order_id' },
+        { columnLabel: 'Subscription ID', dataKey: 'subscription_id' },
+        { columnLabel: 'Multiplier', dataKey: 'multiplier' }
+    ];
+
+    return (
+        <div className="">
+            <div className='pagination-labels-cont'>
+                <div className='pagination-count'>
+                    Showing {raffleEntries.length} of {raffleEntries.length} raffle entr{raffleEntries.length !== 1 ? 'ies' : 'y'}
+                </div>
+                <div className="pagination-count">
+                    {selectedEntryIds.size} of {raffleEntries.length} selected
+                </div>
+            </div>
+
+            <div className='crud-list'>
+                <table className='custom-table'>
+                    <thead>
+                        <tr>
+                        <th className="checkbox">
+                            <CustomCheckbox
+                                name="selectAll"
+                                checked={allSelected}
+                                setChecked={toggleSelectAll}
+                            />
+                        </th>
+                        {columns.map(column => (
+                            <th key={column.dataKey}>{column.columnLabel}</th>
+                        ))}
+                        </tr>
+                    </thead>
+
+                    <tbody>
+                        {message ? (
+                            <tr>
+                                <td colSpan={columns.length + 1}>{message}</td>
+                            </tr>
+                        ) : (
+                            raffleEntries.length > 0 ? (
+                                raffleEntries.map(entry => (
+                                    <tr key={entry.id}>
+                                        <td>
+                                            <CustomCheckbox
+                                                name={`checkbox-${entry.id}`}
+                                                checked={selectedEntryIds.has(entry.id)}
+                                                setChecked={() => toggleEntrySelection(entry.id)}
+                                            />
+                                        </td>
+                                        {columns.map(column => (
+                                            <td key={column.dataKey}>{entry[column.dataKey]}</td>
+                                        ))}
+                                    </tr>
+                                ))
+                            ) : (
+                                <tr>
+                                    <td colSpan={columns.length + 1}>{message}</td>
+                                </tr>
+                            )
+                        )}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+};
+
+export default RaffleEntriesList;

package/bootstrap/services/portal/src/features/raffleProductFormRow/RaffleProductFormRow.jsx

@@ -0,0 +1,46 @@
+import bin from '../../assets/bin.svg';
+import { useState } from 'react';
+import { currencies, taxClasses } from '../../data/data';
+import CustomSelect from '../../ui/customSelect/CustomSelect';
+
+const RaffleProductFormRow = ({ item, onChange, remove }) => {
+    return (
+        <div className='form-row'>
+            <div>
+                <label>Product SKU</label>
+                <input 
+                    type="text"
+                    name='productSku'
+                    value={item.productSku} 
+                    onChange={(e) => onChange("productSku", e.target.value)} 
+                />
+            </div>
+
+            <div>
+                <label>Type (one-time / recurring)</label>
+                <input 
+                    type="text"
+                    name='type'
+                    value={item.type} 
+                    onChange={(e) => onChange("type", e.target.value)} 
+                />
+            </div>
+
+            <div>
+                <label>Number of Entries</label>
+                <input 
+                    type="number"
+                    name='numEntries'
+                    min={1}
+                    value={item.numEntries} 
+                    onChange={(e) => onChange("numEntries", Number(e.target.value))} 
+                />
+            </div>
+
+            <button type="button" className='bin-icon' onClick={remove}><img src={bin} alt="" /></button>
+        </div>
+    )
+};
+  
+
+export default RaffleProductFormRow;

package/bootstrap/services/portal/src/features/sidebar/Sidebar.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { useLocation, Link } from "react-router-dom";
+import { useSelector } from "react-redux";
+import home from '../../assets/home.svg';
+import product from '../../assets/package.svg';
+import activity from '../../assets/activity.svg';
+import users from '../../assets/users.svg';
+import settings from '../../assets/settings.svg';
+import link from '../../assets/link.svg';
+import wallet from '../../assets/wallet.svg';
+import shoppingBag from '../../assets/shopping-bag.svg';
+import contacts from '../../assets/contact.svg';
+import raffle from '../../assets/raffle.svg';
+
+const Sidebar = () => {
+    const location = useLocation();
+    const user = useSelector(state => state.auth.authUser);
+
+    // Helper function to check if the link is active
+    const isActive = (path) => location.pathname === path;
+
+    return (
+        <div className="sidebar">
+            <Link to="/portal/" className={`menu-item ${isActive("/portal/") ? "active" : ""}`}>
+                <img src={home} alt="Dashboard"/>Dashboard
+            </Link>
+            <Link to="/portal/products" className={`menu-item ${isActive("/portal/products") ? "active" : ""}`}>
+                <img src={product} alt="Products"/>Products
+            </Link>
+            <Link to="/portal/orders" className={`menu-item ${isActive("/portal/orders") ? "active" : ""}`}>
+                <img src={shoppingBag} alt="Order"/>Orders
+            </Link>
+            <Link to="/portal/subscriptions" className={`menu-item ${isActive("/portal/subscriptions") ? "active" : ""}`}>
+                <img src={shoppingBag} alt="Subscriptions"/>Subscriptions
+            </Link>
+            <Link to="/portal/integrations" className={`menu-item ${isActive("/portal/integrations") ? "active" : ""}`}>
+                <img src={link} alt="Integrations"/>Integrations
+            </Link>
+            <Link to="/portal/raffles" className={`menu-item ${isActive("/portal/raffles") ? "active" : ""}`}>
+                <img src={raffle} alt="Raffles"/>Raffles
+            </Link>
+            <Link to="/portal/raffle-entries" className={`menu-item ${isActive("/portal/raffle-entries") ? "active" : ""}`}>
+                <img src={raffle} alt="Raffle Entries"/>Raffle Entries
+            </Link>
+            <Link to="/portal/contacts" className={`menu-item ${isActive("/portal/contacts") ? "active" : ""}`}>
+                <img src={contacts} alt="Contacts"/>Contacts
+            </Link>
+            <Link to="/portal/payments" className={`menu-item ${isActive("/portal/payments") ? "active" : ""}`}>
+                <img src={wallet} alt="Payments"/>Payments
+            </Link>
+            <Link to="/portal/users" className={`menu-item ${isActive("/portal/users") ? "active" : ""}`}>
+                <img src={users} alt="Users"/>Users
+            </Link>
+            <Link to="/portal/reports" className={`menu-item ${isActive("/portal/reports") ? "active" : ""}`}>
+                <img src={activity} alt="Reports"/>Reports
+            </Link>
+            <Link to="/portal/settings" className={`menu-item ${isActive("/portal/settings") ? "active" : ""}`}>
+                <img src={settings} alt="Settings"/>Settings
+            </Link>
+        </div>
+    );
+};
+
+export default Sidebar;

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

@@ -0,0 +1,49 @@
+.sidebar {
+    min-width: 240px;
+    max-width: 240px;
+    padding-top: 30px;
+    box-sizing: border-box;
+
+    .collapsible-cont {
+        margin-bottom: 30px;
+    }
+
+    .collapsible-content-inner {
+        padding-left: 32px;
+    }
+
+    a {
+        text-decoration: none;
+        color: @dark-1;
+        font-size: 18px;
+        font-weight: 400;
+        padding-top: 12px;
+        padding-bottom: 12px;
+        display: inline-block;
+        min-width: 100%;
+    }
+
+    .menu-item {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding-left: 16px;
+        padding-right: 16px;
+        transition: all 0.3s;
+
+        &.active {
+            color: @green-1;
+            padding-left: 30px;
+
+            img {
+                filter: none;
+            }
+        }
+
+        img {
+            filter: grayscale(60%) brightness(0.5);
+            width: 35px;
+            height: 35px;
+        }
+    }
+}

package/bootstrap/services/portal/src/features/skus/Skus.jsx

@@ -0,0 +1,109 @@
+import React, { useEffect } from 'react';
+import CustomSelect from '../../ui/customSelect/CustomSelect';
+import Repeater from '../../ui/repeater/Repeater';
+import PriceFormRow from '../priceFormRow/PriceFormRow';
+import InventoryFormRow from '../inventoryFormRow/InventoryFormRow';
+import AttributeFormRow from '../attributeFormRow/AttributeFormRow';
+import { taxClasses } from '../../data/data';
+import binWhite from '../../assets/bin-white.svg';
+
+
+const Skus = ({ item, onChange, remove, showLabels }) => {
+
+    // useEffect(() => {
+    //     console.log(item);
+    // }, [item]);
+
+    
+    return (
+        <>
+            <div className='card'>
+                <div className='card-header'>
+                    <h2>SKU: {item.sku || ''}</h2>
+                    <button className="bin-icon white" onClick={remove}><img src={binWhite} alt="Remove" /></button>
+                </div>
+                <div className='card-content'>
+                    <div>
+                        <div className='form-cont'>
+                            <h2>SKU</h2>
+                            <div className='input-cont'>
+                                <input
+                                    type="text"
+                                    name="skus"
+                                    value={item.sku || ''}
+                                    onChange={(e) => onChange('sku', e.target.value)}                                           
+                                    required
+                                />
+                            </div>
+                        </div>
+                        <div className='form-cont'>
+                            <h2>Tax Class</h2>
+                            <div className="tax-cont">
+                                <CustomSelect 
+                                    name="taxClass"
+                                    placeholder="Tax Class"
+                                    options={taxClasses}
+                                    labelKey="taxClass"
+                                    setSelectedOption={(selected) => onChange("taxClass", selected.id)}
+                                    selectedOption={taxClasses.find(tc => tc.id === item.taxClass) || null}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    {/* <h2>Attributes</h2>
+                    <Repeater
+                        items={attributes}
+                        setItems={setAttributes}
+                        defaultItem={{ name: '', value: '' }}
+                        buttonText="Add new attribute"
+                        renderRow={(item, index, updateItem, remove) => (
+                            <AttributeFormRow
+                                key={index}
+                                item={item}
+                                onChange={(field, value) => updateItem({ ...item, [field]: value })}
+                                remove={remove}
+                                product={product} 
+                            />
+                        )}
+                    /> */}
+
+                    <h2>Prices</h2>
+                    <Repeater
+                        items={item?.prices ?? [{}]}
+                        setItems={(prices) => onChange('prices', prices)}
+                        defaultItem={{ price: 0, currency: "GBP", type: "regular" }}
+                        buttonText="Add new price list"
+                        renderRow={(item, index, updateItem, remove) => (
+                            <PriceFormRow
+                                key={index}
+                                item={item}
+                                onChange={(field, value) => updateItem({ ...item, [field]: value })}
+                                remove={remove}
+                                showLabels={index === 0}
+                            />
+                        )}
+                    />
+
+                    {/* <h2>Inventory</h2>
+                    <Repeater
+                        items={inventories}
+                        setItems={setInventories}
+                        defaultItem={{ stock: 0, warehouse: "Main" }}
+                        buttonText="Add new allocation"
+                        renderRow={(item, index, updateItem, remove) => (
+                            <InventoryFormRow
+                                key={index}
+                                item={item}
+                                onChange={(field, value) => updateItem({ ...item, [field]: value })}
+                                remove={remove}
+                                product={product} 
+                            />
+                        )}
+                    /> */}
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default Skus;