@gnar-engine/cli 1.0.3 → 1.0.4

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

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

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

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

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

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

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

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

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

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