@gnar-engine/cli 1.0.3 → 1.0.4

package/bootstrap/services/portal/src/features/crudRaffles/CrudRafflesSingle.jsx

@@ -1,208 +0,0 @@
-import { useEffect, useState } from "react";
-import gnarEngine from '@gnar-engine/js-client';
-import SaveButton from "../../ui/saveButton/SaveButton";
-import Repeater from "../../ui/repeater/Repeater";
-import { raffleStatuses } from "../../data/data";
-import bin from '../../assets/bin.svg';
-import RaffleProductFormRow from "../raffleProductFormRow/RaffleProductFormRow";
-import CustomSelect from "../../ui/customSelect/CustomSelect";
-
-
-const CrudRafflesSingle = ({ loading, setLoading, raffle, setView, refreshSelectedRaffle, setRaffle, formatDate, setSelectedSingleItemId, fetchRaffles }) => {
-    const initialForm = {
-        name: '',
-        status: { id: 'draft', status: 'Draft' }, // default to draft status
-        description: '',
-        prizeDescription: '',
-        raffleProducts: [
-            { productSku: '', type: '', numEntries: '' }
-        ]
-    };
-
-    const [formData, setFormData] = useState(initialForm);
-    const [validationErrors, setValidationErrors] = useState([]);
-
-    // when raffle prop changes, populate form
-    useEffect(() => {
-        const raffleStatus = raffleStatuses.find(status => status.id === (raffle?.status || 'draft'));
-
-        if (raffle && raffle.id) {
-            setFormData({
-                name:               raffle.name            || '',
-                status:             raffleStatus,
-                description:        raffle.description     || '',
-                prizeDescription:   raffle.prize_description || '',
-                raffleProducts:     raffle.raffleProducts?.map(p => ({
-                    productSku:         p.product_sku   || '',
-                    numEntries:         p.num_entries?.toString() || '',
-                    type:               p.type           || 'one-time'
-                })) || [{ productSku: '', numEntries: '', type: 'one-time' }]
-            });
-        } else {
-            setFormData(initialForm);
-        }
-    }, [raffle]);
-
-
-    // handle change for text/textarea inputs
-    const handleFieldChange = (field, value) => {
-        setFormData({ ...formData, [field]: value });
-    };
-
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        setLoading('loading');
-        setValidationErrors([]);
-
-        // prepare payload: convert numEntries to number
-        const payload = {
-            name: formData.name,
-            status: formData.status.id,
-            description: formData.description,
-            prizeDescription: formData.prizeDescription,
-            raffleProducts: formData.raffleProducts.map(p => ({
-                productSku: p.productSku,
-                type: p.type,
-                numEntries: Number(p.numEntries) || 1,
-            }))
-          };
-          
-
-        try {
-            let response;
-            if (raffle && raffle.id) {
-                response = await gnarEngine.raffles.updateRaffle(raffle.id, payload);
-            } else {
-                response = await gnarEngine.raffles.createRaffle([payload]);
-            }
-
-            if (response.error) {
-                setValidationErrors(response.error);
-                setLoading('error');
-            } else {
-                setLoading('success');
-                setTimeout(() => {
-                    setLoading(null)
-                }, 3000);
-
-                if (raffle && raffle.id) {
-                    refreshSelectedRaffle();
-                } else {
-                    setRaffle(response.raffle);
-                    refreshSelectedRaffle();
-                    await fetchRaffles();
-                    setView('list');
-                }
-            }
-            } catch (error) {
-                console.error('Error saving raffle:', error);
-                setValidationErrors(['Error saving raffle']);
-                setLoading('error');
-                setTimeout(() => setLoading(null), 3000);
-            }
-    };
-
-    const handleDelete = async () => {
-        if (!raffle?.id) 
-            return;
-        if (window.confirm('Are you sure you want to delete this raffle?')) {
-            try {
-                setLoading('loading');
-                await gnarEngine.raffles.deleteRaffle(raffle.id);
-                setLoading('success');
-                setTimeout(() => {
-                    setLoading(null);
-                }, 3000);
-
-                refreshSelectedRaffle();
-                await fetchRaffles();
-                setView('list');
-            } catch (error) {
-                console.error('Error deleting raffle:', error);
-                setLoading('error');
-            }
-        }
-    };
-
-    return (
-        <div className="single-edit raffle">
-            {validationErrors.length > 0 && (
-                <div className="error-messages">
-                    {validationErrors.map((err, i) => <p key={i}>{err}</p>)}
-                </div>
-            )}
-
-            <div className="single-edit-header">
-                <div className="single-edit-header-left">
-                    <p><strong>{raffle?.id ? `Raffle# ${raffle.id}` : 'Add New Raffle'}</strong></p>
-                    {raffle?.createdAt && <p>Date Added: {formatDate(raffle.createdAt)}</p>}
-                </div>
-                <div className="single-edit-header-right flex-row-buttons-cont">
-                    <button type="button" onClick={() => { setView('list'); setRaffle(null); setSelectedSingleItemId(null); }} className="secondaryButton">Back</button>
-                    {raffle?.id && <button type="button" onClick={handleDelete} className="secondaryButton">Delete</button>}
-                </div>
-            </div>
-
-            <form onSubmit={handleSubmit} className="form-body">
-                <div className="form-group">
-                    <label>Name</label>
-                    <input type="text" value={formData.name} onChange={e => handleFieldChange('name', e.target.value)} />
-                </div>
-
-                <CustomSelect 
-                    name="status"
-                    placeholder="Status"
-                    options={raffleStatuses}
-                    labelKey="status"
-                    setSelectedOption={selectedItem => handleFieldChange('status', selectedItem)}
-                    selectedOption={formData.status}
-                />
-
-                <div className="form-group">
-                    <label>Description</label>
-                    <textarea value={formData.description} onChange={e => handleFieldChange('description', e.target.value)} />
-                </div>
-
-                <div className="form-group">
-                    <label>Prize Description</label>
-                    <textarea value={formData.prizeDescription} onChange={e => handleFieldChange('prizeDescription', e.target.value)} />
-                </div>
-
-            </form>
-
-            <Repeater
-                items={formData.raffleProducts}
-                setItems={(newItems) => setFormData({ ...formData, raffleProducts: newItems })}
-                defaultItem={{ productSku: '', type: '', numEntries: 1 }}
-                buttonText="Add Product"
-                renderRow={(item, index, updateItem, remove) => (
-                    <RaffleProductFormRow
-                    key={index}
-                    item={item}
-                    onChange={(field, value) => updateItem({ ...item, [field]: value })}
-                    remove={remove}
-                    />
-                )}
-            />
-
-
-            <div className="form-actions">
-                <SaveButton
-                    save={handleSubmit}
-                    loading={loading}
-                    textCreate="Add Raffle"
-                    textCreateLoading="Saving..."
-                    textCreateSuccess="Saved"
-                    textCreateError="Error"
-                    textUpdate="Save"
-                    textUpdateLoading="Updating..."
-                    textUpdateSuccess="Updated"
-                    textUpdateError="Error"
-                    isUpdating={!!raffle?.id}
-                />
-            </div>
-        </div>
-    );
-};
-
-export default CrudRafflesSingle;

package/bootstrap/services/portal/src/features/crudSubscription/CrudSubscriptionList.jsx

@@ -1,110 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import gnarEngine from '@gnar-engine/js-client';
-import CustomCheckbox from '../../ui/customCheckbox/CustomCheckbox';
-
-const CrudSubscriptionList = ({ setSelectedSingleItemId, setView, selectedSubscriptionIds, setSelectedSubscriptionIds, subscriptions, message}) => {
-
-    const allSelected = subscriptions.length > 0 && selectedSubscriptionIds.size === subscriptions.length;
-
-    const toggleContactSelection = (subscriptionId) => {
-        setSelectedSubscriptionIds(prev => {
-            const newSet = new Set(prev);
-            if (newSet.has(subscriptionId)) {
-                newSet.delete(subscriptionId);
-            } else {
-                newSet.add(subscriptionId);
-            }
-            return newSet;
-        });
-    };
-
-
-    const toggleSelectAll = () => {
-        if (allSelected) {
-            setSelectedSubscriptionIds(new Set());
-        } else {
-            setSelectedSubscriptionIds(new Set(subscriptions.map(subscription => subscription.id)));
-        }
-    };
-
-
-    const handleEditClick = (product) => {
-        setSelectedSingleItemId(product.id);
-        setView('single');
-    };
-
-    const columns = [
-        { columnLabel: 'Subscription', dataKey: 'id' },
-        { columnLabel: 'First Name', dataKey: 'firstName' },
-        { columnLabel: 'Last Name', dataKey: 'lastName' },
-        { columnLabel: 'Date', dataKey: 'createdAt' },
-        { columnLabel: 'Status', dataKey: 'status' },
-        { columnLabel: 'Total', dataKey: 'total' },
-        { columnLabel: 'Date added', dataKey: 'createdAt' },
-    ];
-
-
-    return (
-        <div className="">
-            <div className='pagination-labels-cont'>
-                <div className='pagination-count'>
-                    Showing {subscriptions.length} of {subscriptions.length} subscription{subscriptions.length !== 1 ? 's' : ''}
-                </div>
-                <div className="pagination-count">
-                        {selectedSubscriptionIds.size} of {subscriptions.length} subscription{subscriptions.length !== 1 ? 's' : ''} 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.columnLabel}>{column.columnLabel}</th>
-                            ))}
-                        </tr>
-                    </thead>
-
-                    <tbody>
-                        {message ? (
-                            <tr>
-                                <td colSpan={columns.length + 1}>{message}</td>
-                            </tr>
-                        ) : (
-                            subscriptions.length > 0 ? (
-                                subscriptions.map(order => (
-                                    <tr key={order.id} onClick={() => handleEditClick(order)}>
-                                        <td>
-                                            <CustomCheckbox 
-                                                name={`checkbox-${order.id}`}
-                                                checked={selectedSubscriptionIds.has(order.id)}
-                                                setChecked={() => toggleContactSelection(order.id)}
-                                            />
-                                        </td>
-                                        {columns.map(column => (
-                                            <td key={column.dataKey}>{order[column.dataKey]}</td>
-                                        ))}
-                                    </tr>
-                                ))
-                            ) : (
-                                <tr>
-                                    <td colSpan={columns.length + 1}>No orders found</td>
-                                </tr>
-                            )
-                        )}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-
-    );
-
-};
-
-export default CrudSubscriptionList;

package/bootstrap/services/portal/src/features/crudSubscription/CrudSubscriptionSingle.jsx

@@ -1,261 +0,0 @@
-import { useEffect, useState } from "react";
-import gnarEngine from '@gnar-engine/js-client';
-import SaveButton from "../../ui/saveButton/SaveButton";
-import Repeater from "../../ui/repeater/Repeater";
-import Notes from "../notes/Notes";
-import CustomSelect from "../../ui/customSelect/CustomSelect";
-import { orderTypes, subscriptionStatuses } from '../../data/data';
-import { Link } from "react-router-dom";
-import BillingShipping from "../billingShipping/BillingShipping";
-import SubscriptionSchedule from "../subscriptionSchedule/SubscriptionSchedule";
-import LineItems from "../lineItems/LineItems";
-
-
-const CrudSubscriptionSingle = ({ loading, setLoading, subscription, setView, refreshSelectedSubscription, setSubscription, fetchSubscriptions, setSelectedSingleItemId, formatDate }) => {
-
-    const [formData, setFormData] = useState({});
-    const [validationErrors, setValidationErrors] = useState([]);
-    const [orderType, setOrderType] = useState(null);
-    const [orderStatus, setOrderStatus] = useState(null);
-
-    useEffect(() => {
-        if (subscription && subscription._id) {
-            setFormData({
-                 ...subscription,
-            });
-
-            // set order type
-            const existingOrderType = orderTypes.find(type => type.id === subscription.type);
-            setOrderType(existingOrderType);
-
-            // set order status
-            const existingSubscriptionStatus = subscriptionStatuses.find(status => status.id === subscription.status);
-            setOrderStatus(existingSubscriptionStatus);
-
-        } else {
-            setFormData({
-                ...formData,
-                userId: '',
-                notes: [],
-                type: null,
-                status: null,
-                billingAddress: {
-                    firstName: '',
-                    lastName: '',
-                    addressLine1: '',
-                    addressLine2: '',
-                    city: '',
-                    postcode: '',
-                    email: '',
-                    phone: '',
-                },
-                shippingAddress: {
-                    firstName: '',
-                    lastName: '',
-                    addressLine1: '',
-                    addressLine2: '',
-                    city: '',
-                    postcode: '',
-                },
-                lineItems: [],
-                currency: 'GBP',
-                subTotal: 0,
-                shipping: 0,
-                tax: 0,
-                total: 0,
-            });
-        }
-    }, [subscription]);
-
-                
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        setLoading('loading');
-        setValidationErrors([]);
-
-        try {
-
-            // parse ints
-            formData.retryAttempt = parseInt(formData.retryAttempt) || 0;
-
-            if (subscription) {
-                const response = await gnarEngine.subscription.updateSubscription(subscription._id, formData);
-                console.log('response:', response);
-
-                setLoading('success');
-                setTimeout(() => {
-                    setLoading(null);
-                    fetchSubscriptions();
-                    refreshSelectedSubscription();
-                }, 3000);
-
-                refreshSelectedSubscription();
-            } else {
-                
-                const response = await gnarEngine.subscription.createSubscription([formData]);
-                console.log('response:', response);
-
-                if (response.error) {
-                    setValidationErrors(response.error);
-                } else {
-                    setSubscription(response.subscription);
-                    refreshSelectedSubscription();
-                    setView('list');
-                }
-            }
-        }
-        catch (error) {
-            console.error('Error updating subscription:', error);
-            setValidationErrors(['Error updating subscription']);
-            setTimeout(() => {
-                setLoading(null);
-            }, 3000);
-        }
-
-
-    }
-
-    // handle delete user
-    const handleDelete = async () => {
-        if (window.confirm('Are you sure you want to delete this subscription?')) {
-            try {
-                setLoading('loading');
-
-                await gnarEngine.subscription.deleteSubscription(subscription._id);
-
-                setLoading('success');
-                setTimeout(() => {
-                    setLoading(null);
-                }, 3000);
-
-                refreshSelectedSubscription();  
-                setView('list');  
-
-            } catch (error) {
-
-                setLoading('error');
-                console.error('Error deleting subscription:', subscription);
-            }
-        } else {
-            console.log('Deletion canceled');
-        }
-    };
-
-    // check order being passed in
-    useEffect(() => {
-        console.log('subscription:', subscription);
-    }, [subscription]);
-
-
-    const handleStatusChange = (selectedOption) => {
-        setOrderStatus(selectedOption);
-        setFormData({
-            ...formData,
-            status: selectedOption.id,
-        });
-    }
-
-
-    return (
-
-        <div className="single-edit subscriptions">
-            {validationErrors.length > 0 &&
-                <div className="error-messages">
-                    {validationErrors.map((error, index) => {
-                        return <p key={index}>{error}</p>
-                    })}
-                </div>
-            }
-
-            <div className='single-edit-header'>
-                <div className='single-edit-header-left'>
-                    <p><strong>{subscription ? 'Subscription ID# ' + subscription._id : 'Add New Subscription'}</strong></p>
-                    <p>Date Added: {formatDate(subscription?.createdAt)}</p>
-                    <label htmlFor="orderStatus">Order Status</label>
-                    <CustomSelect
-                        name="status"
-                        labelKey="status"
-                        placeholder="Select subscription status"
-                        options={subscriptionStatuses}
-                        setSelectedOption={handleStatusChange}
-                        selectedOption={orderStatus}
-                    />
-                    <div className="input-cont flex-row flex-row-end">
-                        <div>
-                            <label htmlFor="userId">User ID</label>
-                            <input
-                                type="text"
-                                name="userId"
-                                placeholder="User ID"
-                                value={formData.userId}
-                                onChange={(e) => setFormData({ ...formData, userId: e.target.value })}
-                            />
-                        </div>
-                        <Link to={`/portal/users?view=single&id=${subscription?.userId}`}>
-                            <button className="mainButton">View / Edit</button>
-                        </Link>
-                    </div> 
-
-                </div>
-                <div className='single-edit-header-right'>
-                    <div className="flex-row-buttons-cont">
-                        <button onClick={() => {
-                            setView('list');
-                            setSubscription(null);
-                            setSelectedSingleItemId(null);
-                            }} className="secondaryButton">
-                                Back
-                        </button>
-                        <button onClick={handleDelete} className="secondaryButton">Delete</button>
-                        <SaveButton
-                            save={handleSubmit}
-                            loading={loading}
-                            textCreate="Add Subscription"
-                            textCreateLoading="Saving..."
-                            textCreateSuccess="Saved"
-                            textCreateError="Error"
-                            textUpdate="Save"
-                            textUpdateLoading="Updating..."
-                            textUpdateSuccess="Updated"
-                            textUpdateError="Error"
-                            isUpdating={!!subscription} 
-                        />
-                    </div>
-                </div>
-            </div>
-
-            <BillingShipping
-                order={subscription}
-            />
-
-            <SubscriptionSchedule
-                subscription={subscription}
-                formData={formData}
-                onChange={(e) => setFormData({ ...formData, [e.target.name]: e.target.value })}
-            />
-
-            <LineItems
-                order={subscription}
-            />
-
-            <div className="card">
-                <div className='card-header'>
-                    <h2>Orders</h2>
-                </div>
-                <div className='card-content'>
-                    <div className="subscription-details-cont">
-                        <p><strong>Parent Order ID:</strong> {subscription?.originalSubscriptionOrderId}</p>
-                        <Link to={`/portal/orders?view=single&id=${subscription?.originalSubscriptionOrderId}`}>
-                            <button className="secondaryButton">View / Edit</button>
-                        </Link>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-
-    );
-
-};
-
-export default CrudSubscriptionSingle;

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

@@ -1,107 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import gnarEngine from '@gnar-engine/js-client';
-import dotsVertical from '../../assets/dots-vertical.svg';
-import CustomCheckbox from '../../ui/customCheckbox/CustomCheckbox';
-
-const CrudUserList = ({ setSelectedSingleItemId, setView, selectedUserIds, setSelectedUserIds, users, message }) => {
-
-    const allSelected = users.length > 0 && selectedUserIds.size === users.length;
-
-    const handleEditClick = (user) => {
-        setSelectedSingleItemId(user.id);
-        setView('single');
-    };
-
-    const toggleUserSelection = (userId) => {
-        setSelectedUserIds(prev => {
-            const newSet = new Set(prev);
-            if (newSet.has(userId)) {
-                newSet.delete(userId);
-            } else {
-                newSet.add(userId);
-            }
-            return newSet;
-        });
-    };
-
-
-    const toggleSelectAll = () => {
-        if (allSelected) {
-            setSelectedUserIds(new Set());
-        } else {
-            setSelectedUserIds(new Set(users.map(user => user.id)));
-        }
-    };
-    
-
-    const columns = [
-        { columnLabel: 'ID', dataKey: 'id' },
-        { columnLabel: 'Username', dataKey: 'username' },
-        { columnLabel: 'Email', dataKey: 'email' },
-        { columnLabel: 'User Role', dataKey: 'userRole' },
-        { columnLabel: 'Date Added', dataKey: 'createdAt' }
-    ];
-
-    return (
-        <div className="">
-            <div className='pagination-labels-cont'>
-                <div className='pagination-count'>
-                    Showing {users.length} of {users.length} user{users.length !== 1 ? 's' : ''}
-                </div>
-                <div className="pagination-count">
-                    {selectedUserIds.size} of {users.length} user{users.length !== 1 ? 's' : ''} selected
-                </div>
-            </div>
-
-            <div className='crud-list'>
-                <table className='custom-table'>
-                    <thead>
-                        <tr>
-                            <th className="checkbox">
-                                <CustomCheckbox
-                                    name="select-all"
-                                    checked={allSelected}
-                                    setChecked={toggleSelectAll}
-                                />
-                            </th>
-                            {columns.map(column => (
-                                <th key={column.columnLabel}>{column.columnLabel}</th>
-                            ))}
-                        </tr>
-                    </thead>
-
-                    <tbody>
-                        {message ? (
-                            <tr>
-                                <td colSpan={columns.length + 1}>{message}</td>
-                            </tr>
-                        ) : (
-                            users.length > 0 ? (
-                                users.map(user => (
-                                    <tr key={user.id} onClick={() => handleEditClick(user)}>
-                                        <td onClick={(e) => e.stopPropagation()}>
-                                        <CustomCheckbox
-                                            name={`checkbox-${user.id}`}
-                                            checked={selectedUserIds.has(user.id)}
-                                            setChecked={() => toggleUserSelection(user.id)}
-                                        />
-                                        </td>
-                                        {columns.map(column => (
-                                            <td key={column.dataKey}>{user[column.dataKey]}</td>
-                                        ))}
-                                    </tr>
-                                ))
-                            ) : (
-                                <tr>
-                                    <td colSpan={columns.length + 1}>No users found</td>
-                                </tr>
-                            )
-                        )}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    );
-};
-
-export default CrudUserList;