@taon-dev/e-commerce 21.0.3 → 21.0.5

package/browser-prod.split-namespaces.json

@@ -6,9 +6,24 @@
     "TaonECommerceCartItemModels.TaonECommerceCartItemState": "TaonECommerceCartItemModels__NS__TaonECommerceCartItemState",
     "TaonECommerceCartItemUtils.isActive": "TaonECommerceCartItemUtils__NS__isActive",
     "TaonECommerceCartItemValidators.passwordMatchValidator": "TaonECommerceCartItemValidators__NS__passwordMatchValidator",
+    "TaonECommerceCustomerAddressModels.TaonECommerceCustomerAddressState": "TaonECommerceCustomerAddressModels__NS__TaonECommerceCustomerAddressState",
+    "TaonECommerceCustomerAddressUtils.isActive": "TaonECommerceCustomerAddressUtils__NS__isActive",
+    "TaonECommerceCustomerAddressValidators.passwordMatchValidator": "TaonECommerceCustomerAddressValidators__NS__passwordMatchValidator",
+    "TaonECommerceOrderModels.TaonECommerceOrderState": "TaonECommerceOrderModels__NS__TaonECommerceOrderState",
+    "TaonECommerceOrderUtils.isActive": "TaonECommerceOrderUtils__NS__isActive",
+    "TaonECommerceOrderValidators.passwordMatchValidator": "TaonECommerceOrderValidators__NS__passwordMatchValidator",
+    "TaonECommerceOrderItemModels.TaonECommerceOrderItemState": "TaonECommerceOrderItemModels__NS__TaonECommerceOrderItemState",
+    "TaonECommerceOrderItemUtils.isActive": "TaonECommerceOrderItemUtils__NS__isActive",
+    "TaonECommerceOrderItemValidators.passwordMatchValidator": "TaonECommerceOrderItemValidators__NS__passwordMatchValidator",
+    "TaonECommercePaymentTransactionModels.TaonECommercePaymentTransactionState": "TaonECommercePaymentTransactionModels__NS__TaonECommercePaymentTransactionState",
+    "TaonECommercePaymentTransactionUtils.isActive": "TaonECommercePaymentTransactionUtils__NS__isActive",
+    "TaonECommercePaymentTransactionValidators.passwordMatchValidator": "TaonECommercePaymentTransactionValidators__NS__passwordMatchValidator",
     "TaonECommerceProductModels.TaonECommerceProductState": "TaonECommerceProductModels__NS__TaonECommerceProductState",
     "TaonECommerceProductUtils.isActive": "TaonECommerceProductUtils__NS__isActive",
-    "TaonECommerceProductValidators.passwordMatchValidator": "TaonECommerceProductValidators__NS__passwordMatchValidator"
+    "TaonECommerceProductValidators.passwordMatchValidator": "TaonECommerceProductValidators__NS__passwordMatchValidator",
+    "TaonECommerceProductPermissionModels.TaonECommerceProductPermissionState": "TaonECommerceProductPermissionModels__NS__TaonECommerceProductPermissionState",
+    "TaonECommerceProductPermissionUtils.isActive": "TaonECommerceProductPermissionUtils__NS__isActive",
+    "TaonECommerceProductPermissionValidators.passwordMatchValidator": "TaonECommerceProductPermissionValidators__NS__passwordMatchValidator"
   },
   "namespacesReplace": {
     "TaonECommerceCartModels": [
@@ -29,6 +44,42 @@
     "TaonECommerceCartItemValidators": [
       "TaonECommerceCartItemValidators__NS__passwordMatchValidator"
     ],
+    "TaonECommerceCustomerAddressModels": [
+      "TaonECommerceCustomerAddressModels__NS__TaonECommerceCustomerAddressState"
+    ],
+    "TaonECommerceCustomerAddressUtils": [
+      "TaonECommerceCustomerAddressUtils__NS__isActive"
+    ],
+    "TaonECommerceCustomerAddressValidators": [
+      "TaonECommerceCustomerAddressValidators__NS__passwordMatchValidator"
+    ],
+    "TaonECommerceOrderModels": [
+      "TaonECommerceOrderModels__NS__TaonECommerceOrderState"
+    ],
+    "TaonECommerceOrderUtils": [
+      "TaonECommerceOrderUtils__NS__isActive"
+    ],
+    "TaonECommerceOrderValidators": [
+      "TaonECommerceOrderValidators__NS__passwordMatchValidator"
+    ],
+    "TaonECommerceOrderItemModels": [
+      "TaonECommerceOrderItemModels__NS__TaonECommerceOrderItemState"
+    ],
+    "TaonECommerceOrderItemUtils": [
+      "TaonECommerceOrderItemUtils__NS__isActive"
+    ],
+    "TaonECommerceOrderItemValidators": [
+      "TaonECommerceOrderItemValidators__NS__passwordMatchValidator"
+    ],
+    "TaonECommercePaymentTransactionModels": [
+      "TaonECommercePaymentTransactionModels__NS__TaonECommercePaymentTransactionState"
+    ],
+    "TaonECommercePaymentTransactionUtils": [
+      "TaonECommercePaymentTransactionUtils__NS__isActive"
+    ],
+    "TaonECommercePaymentTransactionValidators": [
+      "TaonECommercePaymentTransactionValidators__NS__passwordMatchValidator"
+    ],
     "TaonECommerceProductModels": [
       "TaonECommerceProductModels__NS__TaonECommerceProductState"
     ],
@@ -37,6 +88,15 @@
     ],
     "TaonECommerceProductValidators": [
       "TaonECommerceProductValidators__NS__passwordMatchValidator"
+    ],
+    "TaonECommerceProductPermissionModels": [
+      "TaonECommerceProductPermissionModels__NS__TaonECommerceProductPermissionState"
+    ],
+    "TaonECommerceProductPermissionUtils": [
+      "TaonECommerceProductPermissionUtils__NS__isActive"
+    ],
+    "TaonECommerceProductPermissionValidators": [
+      "TaonECommerceProductPermissionValidators__NS__passwordMatchValidator"
     ]
   }
 }

package/html/app/baseline-backoffice/taon-baseline-backoffice.component.html

@@ -0,0 +1,23 @@
+<taon-backoffice-notifications [filter]="filter" />
+<taon-admin-layout
+  [routes]="adminRoutes"
+  [outlet]="outlet"
+  basePath="/backoffice">
+  <div
+    header
+    class="flex h-16 items-center px-6">
+    <strong>{{ title }}</strong>
+  </div>
+
+  <div
+    asideFooter
+    class="text-xs text-gray-500">
+    Taon Admin v1.0
+  </div>
+
+  <div
+    contentFooter
+    class="text-xs text-gray-500">
+    fixed content here
+  </div>
+</taon-admin-layout>

package/html/app/e-commerce-example/e-commerce-example.component.html

@@ -0,0 +1,2 @@
+<router-outlet></router-outlet>
+<p>e-commerce-example works!</p>

package/html/lib/taon-cart/taon-cart.component.html

@@ -0,0 +1,176 @@
+<section class="cart-shell">
+  <header class="cart-header">
+    <h2>Shopping</h2>
+    <button
+      mat-icon-button
+      type="button"
+      aria-label="Close cart"
+      (click)="close()">
+      <mat-icon>close</mat-icon>
+    </button>
+  </header>
+  @if (error()) {
+    <p
+      class="error"
+      role="alert">
+      {{ error() }}
+    </p>
+  }
+  <mat-tab-group
+    (selectedIndexChange)="onMainTabChange($event)"
+    [selectedIndex]="hasSuggestedProducts ? 0 : 1">
+    @if (hasSuggestedProducts) {
+      <mat-tab label="Buy">
+        <div class="products">
+          @for (product of suggestedProducts; track product.id) {
+            <article class="product">
+              <h3>{{ product.name }}</h3>
+              @if (product.description) {
+                <p>{{ product.description }}</p>
+              }
+              <p>{{ product.price | currency: product.currency }}</p>
+              <button
+                mat-flat-button
+                type="button"
+                (click)="addProduct(product)">
+                Add to cart
+              </button>
+            </article>
+          }
+        </div>
+      </mat-tab>
+    } @else {
+      <mat-tab
+        label="Buy"
+        [disabled]="true"></mat-tab>
+    }
+    <mat-tab label="Cart">
+      @if (loadingCart()) {
+        <p role="status">Loading cart...</p>
+      } @else if (!cart()?.items?.length) {
+        <p>Your cart is empty.</p>
+      } @else {
+        <div class="cart-items">
+          @for (item of cart()!.items; track item.id) {
+            <article class="cart-item">
+              <div class="item-product">
+                <strong>{{ item.product.name }}</strong>
+                <span
+                  >{{
+                    item.product.price | currency: item.product.currency
+                  }}
+                  each</span
+                >
+              </div>
+              <div class="quantity">
+                <button
+                  mat-icon-button
+                  type="button"
+                  aria-label="Decrease quantity"
+                  (click)="updateQuantity(item.id!, item.quantity - 1)">
+                  <mat-icon>remove</mat-icon>
+                </button>
+                <span>{{ item.quantity }}</span>
+                <button
+                  mat-icon-button
+                  type="button"
+                  aria-label="Increase quantity"
+                  (click)="updateQuantity(item.id!, item.quantity + 1)">
+                  <mat-icon>add</mat-icon>
+                </button>
+              </div>
+              <strong>{{
+                item.product.price * item.quantity
+                  | currency: item.product.currency
+              }}</strong>
+              <button
+                mat-button
+                type="button"
+                (click)="removeItem(item.id!)">
+                Remove
+              </button>
+            </article>
+          }
+        </div>
+      }
+    </mat-tab>
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <mat-icon aria-hidden="true">settings</mat-icon>
+        <span>Settings</span>
+      </ng-template>
+      <mat-tab-group (selectedIndexChange)="onSettingsTabChange($event)">
+        <mat-tab label="Settings">
+          @if (loadingSubscriptions()) {
+            <p role="status">Loading subscription statuses...</p>
+          } @else if (!subscriptions().length) {
+            <p>No subscriptions.</p>
+          } @else {
+            <div class="table-scroll">
+              <table>
+                <thead>
+                  <tr>
+                    <th>Subscription</th>
+                    <th>Status</th>
+                    <th>Valid until</th>
+                    <th></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  @for (
+                    subscription of subscriptions();
+                    track subscription.id
+                  ) {
+                    <tr>
+                      <td>{{ subscription.productName }}</td>
+                      <td>{{ subscription.status }}</td>
+                      <td>
+                        {{
+                          subscription.validUntil
+                            ? (subscription.validUntil | date)
+                            : '—'
+                        }}
+                      </td>
+                      <td>
+                        @if (subscription.status === 'active') {
+                          <button
+                            mat-button
+                            type="button"
+                            (click)="unsubscribe()">
+                            Unsubscribe
+                          </button>
+                        }
+                      </td>
+                    </tr>
+                  }
+                </tbody>
+              </table>
+            </div>
+          }
+        </mat-tab>
+        <mat-tab label="Orders">
+          @if (loadingOrders()) {
+            <p role="status">Loading orders...</p>
+          } @else {
+            <taon-datatable
+              [data]="orders()"
+              [columns]="orderColumns"
+              [hideAddButton]="true"
+              [hideSearch]="true" />
+          }
+        </mat-tab>
+        <mat-tab label="Transactions">
+          @if (loadingTransactions()) {
+            <p role="status">Loading transactions...</p>
+          } @else {
+            <taon-datatable
+              [data]="transactions()"
+              [columns]="transactionColumns"
+              [hideAddButton]="true"
+              [hideSearch]="true" />
+          }
+        </mat-tab>
+      </mat-tab-group>
+    </mat-tab>
+  </mat-tab-group>
+</section>

package/html/lib/taon-cart-button/taon-cart-button.component.html

@@ -0,0 +1,12 @@
+<button
+  mat-icon-button
+  type="button"
+  aria-label="Open shopping cart"
+  [matBadge]="badgeText"
+  [matBadgeHidden]="false"
+  (click)="openCart()">
+  <mat-icon>shopping_cart</mat-icon>
+</button>
+@if (error()) {
+  <span class="cart-button-error" role="alert" [title]="error()">!</span>
+}

package/html/lib/taon-e-commerce-backoffice/taon-e-commerce-backoffice.component.html

@@ -1,4 +1,9 @@
-<router-outlet></router-outlet>
-<p>
-  taon-e-commerce-backoffice works!
-</p>
+@if (!componentLoaded) {
+  <code>
+    In E-commerce section you can manager everything about your e-business.
+  </code>
+}
+
+<router-outlet
+  (activate)="onRouteActivate($event)"
+  (deactivate)="onRouteDeactivate($event)"></router-outlet>

package/html/lib/taon-e-commerce-backoffice-dashboard/taon-e-commerce-backoffice-dashboard.component.html

@@ -0,0 +1,39 @@
+<h1>E-commerce Dashboard</h1>
+
+@if (loading()) {
+  <p role="status">Loading e-commerce summary...</p>
+} @else if (summary(); as stats) {
+  <section
+    class="summary-cards"
+    aria-label="E-commerce summary">
+    <article>
+      <h2>Paid orders</h2>
+      <p>{{ stats.paidOrders }}</p>
+    </article>
+    <article>
+      <h2>Products sold</h2>
+      <p>{{ stats.productsSold }}</p>
+    </article>
+    <article>
+      <h2>Total earnings</h2>
+      @for (earning of stats.earnings; track earning.currency) {
+        <p>{{ earning.total.toFixed(2) }} {{ earning.currency }}</p>
+      } @empty {
+        <p>0.00</p>
+      }
+    </article>
+  </section>
+}
+
+@if (error()) {
+  <p
+    class="error"
+    role="alert">
+    {{ error() }}
+  </p>
+  <button
+    type="button"
+    (click)="load()">
+    Try again
+  </button>
+}

package/html/lib/taon-e-commerce-backoffice-settings/taon-e-commerce-backoffice-settings.component.html

@@ -0,0 +1,40 @@
+<h1>E-commerce Settings</h1>
+
+<section
+  class="setting"
+  aria-labelledby="selling-setting">
+  <div>
+    <h2 id="selling-setting">Selling enabled</h2>
+    @if (sellingEnabled() === false) {
+      <p>Checkout and purchasing are paused.</p>
+    } @else if (sellingEnabled() === true) {
+      <p>Customers can purchase products.</p>
+    }
+  </div>
+
+  @if (loading()) {
+    <p role="status">Loading setting...</p>
+  } @else if (sellingEnabled() !== null) {
+    <button
+      mat-flat-button
+      type="button"
+      [disabled]="saving()"
+      (click)="toggleSelling()">
+      @if (saving()) {
+        Saving...
+      } @else if (sellingEnabled()) {
+        Disable selling
+      } @else {
+        Enable selling
+      }
+    </button>
+  }
+</section>
+
+@if (error()) {
+  <p
+    class="error"
+    role="alert">
+    {{ error() }}
+  </p>
+}

package/html/lib/taon-e-commerce-order/taon-e-commerce-orders-backoffice/taon-e-commerce-order-details-backoffice.component.html

@@ -0,0 +1,89 @@
+<section class="order-details">
+  <h2>Order details</h2>
+
+  @if (loading()) {
+    <p role="status">Loading order...</p>
+  } @else if (order(); as currentOrder) {
+    <dl class="order-info">
+      <dt>Order ID</dt>
+      <dd>{{ currentOrder.id }}</dd>
+      <dt>User</dt>
+      <dd>#{{ currentOrder.userId }}</dd>
+      <dt>Status</dt>
+      <dd>{{ currentOrder.status }}</dd>
+      <dt>Created</dt>
+      <dd>{{ currentOrder.createdAt }}</dd>
+      <dt>Subtotal</dt>
+      <dd>{{ currentOrder.subtotal }} {{ currentOrder.currency }}</dd>
+      <dt>Total</dt>
+      <dd>{{ currentOrder.total }} {{ currentOrder.currency }}</dd>
+    </dl>
+
+    <h3>Items</h3>
+    <table>
+      <thead>
+        <tr>
+          <th>Product</th>
+          <th>Quantity</th>
+          <th>Unit price</th>
+          <th>Total</th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (item of items(); track item.id) {
+          <tr>
+            <td>{{ item.productName }}</td>
+            <td>{{ item.quantity }}</td>
+            <td>{{ item.unitPrice }} {{ currentOrder.currency }}</td>
+            <td>{{ item.totalPrice }} {{ currentOrder.currency }}</td>
+          </tr>
+        } @empty {
+          <tr>
+            <td colspan="4">No items in this order.</td>
+          </tr>
+        }
+      </tbody>
+    </table>
+
+    <h3>Payment transactions</h3>
+    <table>
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Provider</th>
+          <th>Provider transaction</th>
+          <th>Status</th>
+          <th>Amount</th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (transaction of transactions(); track transaction.id) {
+          <tr>
+            <td>{{ transaction.id }}</td>
+            <td>{{ transaction.provider }}</td>
+            <td>{{ transaction.providerTransactionId }}</td>
+            <td>{{ transaction.status }}</td>
+            <td>{{ transaction.amount }} {{ transaction.currency }}</td>
+          </tr>
+        } @empty {
+          <tr>
+            <td colspan="5">No payment transactions.</td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  }
+
+  @if (error()) {
+    <p
+      class="error"
+      role="alert">
+      {{ error() }}
+    </p>
+    <button
+      type="button"
+      (click)="load()">
+      Try again
+    </button>
+  }
+</section>

package/html/lib/taon-e-commerce-order/taon-e-commerce-orders-backoffice/taon-e-commerce-orders-backoffice.component.html

@@ -0,0 +1,16 @@
+<h1>Orders</h1>
+<taon-datatable
+  [entityCrudController]="crud"
+  [columns]="columns"
+  [hideAddButton]="true"
+  [allowedColumns]="[
+    'id',
+    'userId',
+    'status',
+    'total',
+    'currency',
+    'createdAt',
+  ]"
+  searchMode="advanced">
+</taon-datatable>
+<router-outlet></router-outlet>

package/html/lib/taon-e-commerce-payment-transaction/taon-e-commerce-payment-transactions-backoffice/taon-e-commerce-payment-transaction-details-backoffice.component.html

@@ -0,0 +1,53 @@
+<section class="transaction-details">
+  <h2>Transaction details</h2>
+
+  @if (loading()) {
+    <p role="status">Loading transaction...</p>
+  } @else if (transaction(); as currentTransaction) {
+    <dl>
+      <dt>Transaction ID</dt>
+      <dd>{{ currentTransaction.id }}</dd>
+      <dt>Order ID</dt>
+      <dd>{{ currentTransaction.orderId }}</dd>
+      <dt>Provider</dt>
+      <dd>{{ currentTransaction.provider }}</dd>
+      <dt>Provider transaction ID</dt>
+      <dd>{{ currentTransaction.providerTransactionId }}</dd>
+      <dt>Status</dt>
+      <dd>{{ currentTransaction.status }}</dd>
+      <dt>Amount</dt>
+      <dd>{{ currentTransaction.amount }} {{ currentTransaction.currency }}</dd>
+      <dt>Created</dt>
+      <dd>{{ currentTransaction.createdAt }}</dd>
+    </dl>
+
+    @if (order(); as relatedOrder) {
+      <h3>Related order</h3>
+      <dl>
+        <dt>Order ID</dt>
+        <dd>{{ relatedOrder.id }}</dd>
+        <dt>User</dt>
+        <dd>#{{ relatedOrder.userId }}</dd>
+        <dt>Status</dt>
+        <dd>{{ relatedOrder.status }}</dd>
+        <dt>Total</dt>
+        <dd>{{ relatedOrder.total }} {{ relatedOrder.currency }}</dd>
+        <dt>Created</dt>
+        <dd>{{ relatedOrder.createdAt }}</dd>
+      </dl>
+    }
+  }
+
+  @if (error()) {
+    <p
+      class="error"
+      role="alert">
+      {{ error() }}
+    </p>
+    <button
+      type="button"
+      (click)="load()">
+      Try again
+    </button>
+  }
+</section>

package/html/lib/taon-e-commerce-payment-transaction/taon-e-commerce-payment-transactions-backoffice/taon-e-commerce-payment-transactions-backoffice.component.html

@@ -0,0 +1,18 @@
+<h1>Transactions</h1>
+<taon-datatable
+  [entityCrudController]="crud"
+  [columns]="columns"
+  [hideAddButton]="true"
+  [allowedColumns]="[
+    'id',
+    'orderId',
+    'provider',
+    'providerTransactionId',
+    'status',
+    'amount',
+    'currency',
+    'createdAt',
+  ]"
+  searchMode="advanced">
+</taon-datatable>
+<router-outlet></router-outlet>