@gnar-engine/cli 1.0.0 → 1.0.1

package/bootstrap/services/portal/src/data/data.js

@@ -0,0 +1,70 @@
+export const userRoles = [
+    {name: "Service Admin", role: 'service_admin'},
+    {name: "Admin", role: 'admin'},
+    {name: "Customer", role: 'customer'},
+];
+
+export const currencies = [
+    { id: "USD", currency: "USD - US Dollar" },
+    { id: "EUR", currency: "EUR - Euro" },
+    { id: "GBP", currency: "GBP - British Pound" }
+];
+
+export const taxClasses = [
+    { id: "standard", taxClass: "Standard Rate" },
+    { id: "reduced", taxClass: "Reduced Rate" },
+    { id: "zero", taxClass: "Zero Rate" }
+];
+
+export const productStatuses = [
+    { id: "draft", status: "Draft" },
+    { id: "published", status: "Published" },
+    { id: "archived", status: "Archived" }
+];
+
+export const productCategories = [
+    { id: "plugins", category: "Plugins" },
+    { id: "hosting", category: "Hosting" },
+    { id: "merchandise", category: "Merchandise" },
+];
+
+export const productPriceTypes = [
+    { id: "recurring", type: "Recurring" },
+    { id: "one-time", type: "One-time" },
+];
+
+export const productIntervals = [
+    { id: "daily", interval: "Daily" },
+    { id: "weekly", interval: "Weekly" },
+    { id: "monthly", interval: "Monthly" },
+    { id: "quarterly", interval: "Quarterly" },
+    { id: "annually", interval: "Annually" },
+];
+
+export const orderTypes = [
+    { id: "order", type: "Order" },
+    { id: "subscription-payment", type: "Subscription" },
+];
+
+export const orderStatuses = [
+    { id: "pending-payment", status: "Pending Payment" },
+    { id: "processing", status: "Processing" },
+    { id: "completed", status: "Completed" },
+    { id: "cancelled", status: "Cancelled" },
+    { id: "refunded", status: "Refunded" },
+];
+
+export const subscriptionStatuses = [
+    { id: "active", status: "Active" },
+    { id: "failed", status: "Failed" },
+    { id: "paused", status: "Paused" },
+    { id: "cancelled", status: "Cancelled" },
+    { id: "expired", status: "Expired" },
+    { id: "payment-due", status: "Payment Due" },
+];
+
+export const raffleStatuses = [
+    { id: "draft", status: "Draft" },
+    { id: "active", status: "Active" },
+    { id: "closed", status: "Closed" }
+];

package/bootstrap/services/portal/src/features/attributeFormRow/AttributeFormRow.jsx

@@ -0,0 +1,32 @@
+import bin from '../../assets/bin.svg';
+import CustomSelect from '../../ui/customSelect/CustomSelect';
+
+const AttributeFormRow = ({ item, onChange, remove }) => {
+
+
+    return (
+        <div className='form-row'>
+            <CustomSelect 
+                name="attribute"
+                placeholder="Select attribute"
+                options="TBC"
+                labelKey="attribute"
+                setSelectedOption="TBC"
+                selectedOption="TBC"
+            />
+            <CustomSelect 
+                name="value"
+                placeholder="Select attribute value"
+                options="TBC"
+                labelKey="value"
+                setSelectedOption="TBC"
+                selectedOption="TBC"
+            />
+
+            <button className='bin-icon' onClick={remove}><img src={bin} alt="" /></button>
+        </div>
+    )
+}
+
+
+export default AttributeFormRow;

package/bootstrap/services/portal/src/features/billingShipping/BillingShipping.jsx

@@ -0,0 +1,160 @@
+import { useEffect, useState } from "react";
+
+const BillingShipping = ({ order }) => {
+
+    const [isEditingBilling, setIsEditingBilling] = useState(false);
+    const [isEditingShipping, setIsEditingShipping] = useState(false);
+    
+    const [billingAddress, setBillingAddress] = useState(order?.billingAddress || {});
+    const [shippingAddress, setShippingAddress] = useState(order?.shippingAddress || {});
+
+    const handleInputChange = (e, addressType, field) => {
+        const value = e.target.value;
+        if (addressType === 'billing') {
+            setBillingAddress((prev) => ({ ...prev, [field]: value }));
+        } else {
+            setShippingAddress((prev) => ({ ...prev, [field]: value }));
+        }
+    };
+
+    return (
+        <div className="card">
+            <div className='card-header'>
+                <h2>Billing & Shipping</h2>
+            </div>
+            <div className='card-content'>
+                <div className="billing-shipping-cont">
+                    <div className="billing-cont">
+                        <div className="billing-header">
+                            <h2>Billing Address</h2>
+                        </div>
+                        <div className="billing-body">
+                            {isEditingBilling ? (
+                                <div>
+                                    <input 
+                                        type="text" 
+                                        placeholder="First Name"
+                                        value={billingAddress.firstName || ''} 
+                                        onChange={(e) => handleInputChange(e, 'billing', 'firstName')} 
+                                    />
+                                    <input 
+                                        type="text" 
+                                        placeholder="Last Name"
+                                        value={order?.billingAddress.lastName} 
+                                        onChange={(e) => handleInputChange(e, 'billing', 'lastName')} 
+                                    />
+                                    <input 
+                                        type="text" 
+                                        placeholder="Address Line 1"
+                                        value={order?.billingAddress.addressLine1} 
+                                        onChange={(e) => handleInputChange(e, 'billing', 'addressLine1')} 
+                                    />
+                                    <input 
+                                        type="text" 
+                                        placeholder="Address Line 2"
+                                        value={order?.billingAddress.addressLine2} 
+                                        onChange={(e) => handleInputChange(e, 'billing', 'addressLine2')} 
+                                    />
+                                    <input 
+                                        type="text" 
+                                        placeholder="City"
+                                        value={order?.billingAddress.city} 
+                                        onChange={(e) => handleInputChange(e, 'billing', 'city')} 
+                                    />
+                                    <input 
+                                        type="text" 
+                                        placeholder="Postcode"
+                                        value={order?.billingAddress.postcode} 
+                                        onChange={(e) => handleInputChange(e, 'billing', 'postcode')} 
+                                    />
+                                    <br />
+                                    <p>{order?.billingAddress.email}</p>
+                                    <p>{order?.billingAddress.phone}</p>
+                                </div>
+                            ) : (
+                                <div>
+                                    <p>{order?.billingAddress.firstName} {order?.billingAddress.lastName}</p>
+                                    <p>{order?.billingAddress.addressLine1}</p>
+                                    <p>{order?.billingAddress.addressLine2}</p>
+                                    <p>{order?.billingAddress.city}</p>
+                                    <p>{order?.billingAddress.postcode}</p>
+                                    <br />
+                                    <p>{order?.billingAddress.email}</p>
+                                    <p>{order?.billingAddress.phone}</p>
+                                </div>
+                            )}
+                            <button
+                                onClick={() => setIsEditingBilling((prev) => !prev)} 
+                            >
+                                {isEditingBilling ? 'Save' : 'Edit'}
+                            </button>
+                        </div>
+                    </div>
+
+                    <div className="shipping-cont">
+                        <div className="shipping-header">
+                            <h2>Shipping Address</h2>
+                        </div>
+                        <div className="shipping-body">
+                            {isEditingShipping ? (
+                                <div>
+                                    <input 
+                                        type="text"
+                                        placeholder="First Name" 
+                                        value={shippingAddress.firstName} 
+                                        onChange={(e) => handleInputChange(e, 'shipping', 'firstName')} 
+                                    />
+                                    <input 
+                                        type="text" 
+                                        placeholder="Last Name"
+                                        value={shippingAddress.lastName} 
+                                        onChange={(e) => handleInputChange(e, 'shipping', 'lastName')} 
+                                    />
+                                    <input 
+                                        type="text"
+                                        placeholder="Address Line 1" 
+                                        value={shippingAddress.addressLine1} 
+                                        onChange={(e) => handleInputChange(e, 'shipping', 'addressLine1')} 
+                                    />
+                                    <input 
+                                        type="text" 
+                                        placeholder="Address Line 2"
+                                        value={shippingAddress.addressLine2} 
+                                        onChange={(e) => handleInputChange(e, 'shipping', 'addressLine2')} 
+                                    />
+                                    <input 
+                                        type="text" 
+                                        placeholder="City"
+                                        value={shippingAddress.city} 
+                                        onChange={(e) => handleInputChange(e, 'shipping', 'city')} 
+                                    />
+                                    <input 
+                                        type="text" 
+                                        placeholder="Postcode"
+                                        value={shippingAddress.postcode} 
+                                        onChange={(e) => handleInputChange(e, 'shipping', 'postcode')} 
+                                    />
+                                </div>
+                            ) : (
+                                <div>
+                                    <p>{shippingAddress.firstName} {shippingAddress.lastName}</p>
+                                    <p>{shippingAddress.addressLine1}</p>
+                                    <p>{shippingAddress.addressLine2}</p>
+                                    <p>{shippingAddress.city}</p>
+                                    <p>{shippingAddress.postcode}</p>
+                                </div>
+                            )}
+                            <button 
+                                onClick={() => setIsEditingShipping((prev) => !prev)} 
+                            >
+                                {isEditingShipping ? 'Save' : 'Edit'}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default BillingShipping;

package/bootstrap/services/portal/src/features/crud/crudEdit.less

@@ -0,0 +1,230 @@
+.crud-edit {
+    .edit-heading {
+        display: flex;
+        justify-content: space-between;
+    }
+}
+
+.single-edit {
+    .single-edit-header {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 20px;
+    }
+
+    &.subscriptions {
+        .subscriptions-table {
+            width: 100%;
+            border-collapse: collapse;
+
+            thead {
+                border-bottom: 1px solid @dark-grey-1;
+            }
+
+            th, td {
+                padding: 8px;
+                text-align: left;
+            }
+        }
+    }
+
+    &.order,
+    &.subscriptions {
+        .billing-shipping-cont {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 20px;
+
+            .billing-cont,
+            .shipping-cont {
+                width: 50%;
+                padding-right: 20px;
+            }
+        }
+
+        
+        .line-items-totals-cont {
+            .line-items-cont {
+                margin-bottom: 40px;
+    
+                .line-items-table,
+                .totals-table {
+                    width: 100%;
+                    border-collapse: collapse;
+
+                    th {
+                        border-bottom: 1px solid @dark-grey-1;
+                    }
+
+                    th, td {
+                        padding: 8px;
+                        text-align: left;
+                    }
+                }
+            }
+        }
+    
+        .totals-cont {
+            display: flex;
+            justify-content: flex-end;
+
+            .totals-table {
+                tr {
+                    td {
+                        padding: 8px 0px 8px 15px;
+                        text-align: right;
+                    }
+                }
+                .order-total {
+                    font-weight: bold;
+                }
+            }
+        }
+
+        .subscription-details-cont {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 20px;
+        }
+
+        .order-notes-cont {
+            .note-item {
+                display: flex;
+                margin-bottom: 20px;
+                width: 100%;
+                justify-content: space-between;
+
+                .note-item-body {
+                    flex: 1;
+                    display: flex;
+
+                    textarea {
+                        width: 100%;
+                        flex-grow: 1;
+                    }
+                }
+
+
+            }
+        }
+    }
+
+    .account,
+    .contacts {
+        form {
+            display: flex;
+            gap: 20px;
+            align-items: flex-end;
+        }
+    }
+
+    .user-form {
+        display: flex;
+        gap: 20px;
+        align-items: flex-end;
+    }
+
+    .api-key {
+        form {
+            width: 100%;
+
+            input {
+                width: 100%;
+            }
+        }
+    }
+
+    .single-inner-cont {
+        position: relative;
+
+        .repeater-cont {
+            width: 100%;
+            margin-top: 15px;
+        
+            table {
+                width: 100%;
+                border-collapse: separate;
+                border-spacing: 10px;
+
+                th {
+                    min-width: 100%;
+                    color: @dark-1;
+                    opacity: 0.5;
+                    font-size: 10px;
+                    line-height: 1.1em;
+                    font-style: italic;
+                }
+
+                .contacts-bin-icon {
+                    cursor: pointer;
+                    margin-top: 15px;
+                }
+        
+                th, td {
+                    text-align: left;
+                    vertical-align: top;
+                }
+        
+                th input,
+                td input {
+                    width: 100%;
+                }
+
+                .react-datepicker-wrapper {
+                    width: 100%;
+                }
+            }
+
+            td.period-name {
+                width: 100%;
+                display: block;  
+            }
+        }
+
+        .react-datepicker-popper {
+            z-index: 99;
+        }
+    }
+
+
+    .field-instruction {
+        min-width: 100%;
+        display: inline-block;
+        color: @dark-1;
+        opacity: 0.5;
+        font-size: 10px;
+        line-height: 1.1em;
+        font-style: italic;
+    }
+
+    .error-messages {
+        width: 100%;
+        background: @red-2;
+        border: 1px solid @red-1;
+        border-radius: 5px;
+        padding: 15px;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+
+        p {
+            color: @red-1;
+            line-height: 1em;
+            margin-top: 3px;
+            margin-bottom: 3px;
+        }
+    }
+
+    form {
+        label {
+            display: block;
+        }
+        input {
+            width: 300px;
+
+            &#marketingOptIn {
+                width: 15px;
+                height: 15px;
+            }
+        }
+    }
+}

package/bootstrap/services/portal/src/features/crud/crudList.less

@@ -0,0 +1,134 @@
+.crud-list {
+    width: 100%; /* Adjust width as needed */
+    margin-bottom: 20px; /* Adjust margin as needed */
+
+    .custom-table {
+        width: 100%;
+        border-collapse: collapse;
+        border-spacing: 0px;
+        border: none;
+
+        .separator-row {
+            display: inline-block;
+        }
+
+        .checkbox {
+            display: flex;
+            align-items: center;
+        }
+        
+        th {
+            background-color: @dark-grey-1;
+            color: @white;
+            text-align: left;
+            padding: 10px;
+            text-transform: capitalize;
+            
+            &:first-child {
+                border-top-left-radius: 10px;
+            }
+
+            &:last-child {
+                border-top-right-radius: 10px;
+                width: 12%;
+            }
+        }
+
+        td {
+            padding: 5px 10px;
+            border: none;
+
+            &:last-child {
+                border-bottom: none; 
+            }
+
+            &.edit-dots {
+                text-align: start;
+            }
+        }
+
+        tbody {
+            
+            button {
+                width: 20px;
+                background: none;
+                border: none;
+                margin: 0;
+            }
+            tr {
+                border-top:1px solid transparent;
+                border-bottom:1px solid transparent;
+
+                td {
+                    line-height: 1em;
+                    &:first-child {
+                        border-left: 1px solid @grey-mid-1;
+                    }
+                    &:last-child {
+                        border-right: 1px solid @grey-mid-1;
+                    }
+                }
+            }
+            tr:first-of-type {
+                td {
+                    border-top: 1px solid @grey-mid-1;
+                    &:first-child {
+                        border-left: 1px solid @grey-mid-1;
+                    }
+                    &:last-child {
+                        border-right: 1px solid @grey-mid-1;
+                    }
+                }
+            }
+            tr:last-of-type {
+                td {
+                    border-bottom: 1px solid @grey-mid-1;
+                    &:first-child {
+                        border-left: 1px solid @grey-mid-1;
+                        border-bottom-left-radius: 10px;
+                    }
+                    &:last-child {
+                        border-right: 1px solid @grey-mid-1;
+                        border-bottom-right-radius: 10px;
+                    }
+                }
+            }
+
+            tr:nth-child(even) {
+                td {
+                    background-color: #f1f1f1;
+                }
+            }
+
+            // HOVER EFFECT
+            tr:hover td {
+                border-top: 1px solid @green-1;
+                border-bottom: 1px solid @green-1;
+                cursor: pointer;
+            }
+
+            tr:hover td:first-child {
+                border-left: 1px solid @green-1;
+                cursor: pointer;
+            }
+
+            tr:hover td:last-child {
+                border-right: 1px solid @green-1;
+                cursor: pointer;
+            }
+        }
+    }
+}
+
+.pagination-labels-cont {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.pagination-count {
+    margin-bottom: 20px;
+    text-align: left;
+    font-size: 12px;
+}

package/bootstrap/services/portal/src/features/crud/crudPage.less

@@ -0,0 +1,31 @@
+.crud-page,
+.manage-students {
+    position: relative;
+
+    .flex-row-select-cont {
+        margin-top: 50px;
+    }
+
+    .clear-filters-btn {
+        position: absolute;
+        top: 65px;
+        right: 5px;
+
+        &:hover {
+            cursor: pointer;
+            opacity: 0.8;
+        }
+    }
+
+    .password-reset-btn {
+        display: block;
+        position: relative;
+        color: @green-1;
+        text-decoration: underline;
+
+        &:hover {
+            cursor: pointer;
+            opacity: 0.8;
+        }
+    }
+}