@taon-dev/e-commerce 21.0.4 → 21.0.6

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>

package/html/lib/taon-e-commerce-product/taon-e-commerce-product-edit-dialog.component.html

@@ -0,0 +1,137 @@
+<h2 mat-dialog-title>{{ data.product ? 'Edit product' : 'Add product' }}</h2>
+<br>
+<mat-dialog-content>
+  @if (loading()) {
+    <p role="status">Loading permissions...</p>
+  } @else {
+    <form class="product-form">
+      <mat-form-field appearance="outline">
+        <mat-label>Name</mat-label>
+        <input
+          matInput
+          required
+          [ngModel]="draft().name"
+          (ngModelChange)="updateName($event)"
+          name="name" />
+      </mat-form-field>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Description</mat-label>
+        <textarea
+          matInput
+          rows="4"
+          [ngModel]="draft().description"
+          (ngModelChange)="updateDescription($event)"
+          name="description"></textarea>
+      </mat-form-field>
+
+      <mat-checkbox
+        [checked]="draft().active"
+        (change)="updateActive($event.checked)"
+        >Active</mat-checkbox
+      >
+
+      <mat-form-field appearance="outline">
+        <mat-label>Type</mat-label>
+        <mat-select
+          [value]="draft().type"
+          (selectionChange)="updateType($event.value)">
+          @for (type of productTypes; track type) {
+            <mat-option [value]="type">{{ type }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+
+      <div class="price-fields">
+        <mat-form-field appearance="outline">
+          <mat-label>Price</mat-label>
+          <input
+            matInput
+            type="number"
+            min="0"
+            step="0.01"
+            [ngModel]="draft().price"
+            (ngModelChange)="updatePrice($event)"
+            name="price" />
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Currency</mat-label>
+          <mat-select
+            [value]="draft().currency"
+            (selectionChange)="updateCurrency($event.value)">
+            @for (currency of currencies; track currency) {
+              <mat-option [value]="currency">{{ currency }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Attached permissions</mat-label>
+        <mat-select
+          multiple
+          [value]="selectedPermissionIds()"
+          (selectionChange)="selectedPermissionIds.set($event.value)">
+          @for (permission of permissions(); track permission.id) {
+            <mat-option [value]="permission.id"
+              >{{ permission.name }} ({{ permission.code }})</mat-option
+            >
+          }
+        </mat-select>
+      </mat-form-field>
+
+      @if (data.product) {
+        <section
+          class="stripe-info"
+          aria-label="Stripe synchronization information">
+          <h3>Stripe synchronization</h3>
+          <p>
+            Stripe Product ID:
+            {{ data.product.stripeProductId || 'Not synchronized' }}
+          </p>
+          <p>
+            Stripe Price ID:
+            {{ data.product.stripePriceId || 'Not synchronized' }}
+          </p>
+          <p>
+            Last synchronized: {{ data.product.stripeLastSyncedAt || 'Never' }}
+          </p>
+        </section>
+      }
+    </form>
+  }
+
+  @if (error()) {
+    <p
+      class="error"
+      role="alert">
+      {{ error() }}
+    </p>
+    @if (!permissionsLoaded() && !loading()) {
+      <button
+        mat-button
+        type="button"
+        (click)="load()">
+        Retry loading permissions
+      </button>
+    }
+  }
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button
+    mat-button
+    type="button"
+    [disabled]="saving()"
+    (click)="dialogRef.close()">
+    Cancel
+  </button>
+  <button
+    mat-flat-button
+    type="button"
+    [disabled]="loading() || saving() || !permissionsLoaded()"
+    (click)="save()">
+    {{ saving() ? 'Saving...' : 'Save' }}
+  </button>
+</mat-dialog-actions>

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

@@ -0,0 +1,36 @@
+<header class="page-header pb-2">
+  <h1>Products</h1>
+  <div class="actions">
+    <button
+      mat-stroked-button
+      type="button"
+      [disabled]="syncInProgress()"
+      (click)="syncWithStripe()">
+      {{ syncInProgress() ? 'Syncing...' : 'Sync with Stripe' }}
+    </button>
+  </div>
+</header>
+
+@if (syncError()) {
+  <p
+    class="error"
+    role="alert">
+    {{ syncError() }}
+  </p>
+}
+
+<taon-datatable
+  [entityCrudController]="crud"
+  [columns]="columns"
+  [allowedColumns]="[
+    'id',
+    'name',
+    'type',
+    'price',
+    'currency',
+    'active',
+    'stripeLastSyncedAt',
+  ]"
+  searchMode="advanced"
+  (addingItem)="add()">
+</taon-datatable>

package/i18n/src.translation.d.ts

@@ -1,4 +1,4 @@
-import { CoreModels } from 'tnp-core/lib-esm';
+import { CoreModels } from 'tnp-core/src';
 import { EnUsTraslationOverrideSrcAppTs } from './app.ts.en-US.i18n.data';
 import { PlPlTraslationOverrideSrcAppTs } from './app.ts.pl-PL.i18n.data';
 export type SrcOverride = CoreModels.DeepPartial<EnUsTraslationOverrideSrcAppTs | PlPlTraslationOverrideSrcAppTs>;

package/lib/build-info._auto-generated_.d.ts

@@ -21,4 +21,4 @@ export declare const CURRENT_PACKAGE_TAON_VERSION = "v21";
 /**
  *  Autogenerated by current cli tool. Use *tnp release* to bump version.
  */
-export declare const CURRENT_PACKAGE_VERSION = "21.0.4";
+export declare const CURRENT_PACKAGE_VERSION = "21.0.6";

package/lib/build-info._auto-generated_.js

@@ -25,6 +25,6 @@ exports.CURRENT_PACKAGE_TAON_VERSION = 'v21';
 /**
  *  Autogenerated by current cli tool. Use *tnp release* to bump version.
  */
-exports.CURRENT_PACKAGE_VERSION = '21.0.4';
+exports.CURRENT_PACKAGE_VERSION = '21.0.6';
 // THIS FILE IS GENERATED - DO NOT MODIFY
 //# sourceMappingURL=build-info._auto-generated_.js.map