@gnar-engine/cli 1.0.0 → 1.0.1

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

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

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

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

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