more minor fixes

Author: malincrist

src/components/template-pages/api-details-page/ko/runtime/staticPages/api-products-cards.html

@@ -82,7 +82,7 @@ <h5>Legal</h5>
         <hr class="mt-20 mb-20" />
 
         <div class="commands">
-            <a class="outlined" href="#" data-bind="attr: { href: getProductUrl(quickViewProduct) }">
+            <a class="outlined" href="#" data-bind="attr: { href: getProductUrl(quickViewProduct()) }">
                 View Product
             </a>
         </div>

src/components/template-pages/api-details-page/ko/runtime/staticPages/api-products-cards.ts

@@ -78,7 +78,7 @@ export class ApiProductsCards {
     }
 
     public getProductUrl(product: Product): string {
-        return this.routeHelper.getProductReferenceUrl(product.name, "product");
+        return this.routeHelper.getProductReferenceUrl(product.name, "/product");
     }
 
     private async onRouteChange(): Promise<void> {

src/components/template-pages/product-details-page/ko/runtime/product-details-page.html

@@ -1,7 +1,7 @@
 <div id="widgetPopupContainer" class="widget-popup-container" data-bind="css: { 'show': showSubscribeForm() }">
     <div class="popup-content">
         <subscription-form
-            params="{closeSubscriptionForm: closeSubscriptionForm, product: product}"></subscription-form>
+            params="{closeSubscriptionForm: closeSubscriptionForm, product: product, subscriptionCreated: subscriptionCreated}"></subscription-form>
     </div>
 </div>
 
@@ -58,7 +58,7 @@ <h3>About this Product</h3>
 
         <!-- ko if: selectedMenuItem()?.value === 'subscriptions' -->
         <product-details-page-subscriptions
-            params="{ product: product, openSubscriptionForm: openSubscriptionForm, canCreateNewSubscription: canCreateNewSubscription, calculateCanCreateNewSubscription: calculateCanCreateNewSubscription }"></product-details-page-subscriptions>
+            params="{ product: product, openSubscriptionForm: openSubscriptionForm, canCreateNewSubscription: canCreateNewSubscription, calculateCanCreateNewSubscription: calculateCanCreateNewSubscription, subscriptionCreated: subscriptionCreated }"></product-details-page-subscriptions>
         <!-- /ko -->
         <!-- /ko -->
 

src/components/template-pages/product-details-page/ko/runtime/product-details-page.ts

@@ -23,6 +23,7 @@ export class ProductDetailsPage {
     public readonly selectedMenuItem: ko.Observable<menuItem>;
     public readonly showSubscribeForm: ko.Observable<boolean>;
     public readonly canCreateNewSubscription: ko.Observable<boolean>;
+    public readonly subscriptionCreated: ko.Observable<boolean>;
 
     @Param()
     public wrapText: ko.Observable<boolean>;
@@ -41,6 +42,7 @@ export class ProductDetailsPage {
         this.showSubscribeForm = ko.observable(false);
         this.canCreateNewSubscription = ko.observable(false);
         this.calculateCanCreateNewSubscription = this.calculateCanCreateNewSubscription.bind(this);
+        this.subscriptionCreated = ko.observable();
     }
 
     @OnMounted()

src/components/template-pages/product-details-page/ko/runtime/staticPages/product-apis-cards.html

@@ -82,7 +82,7 @@ <h5>Legal</h5>
         <hr class="mt-20 mb-20" />
 
         <div class="commands">
-            <a class="outlined" href="#" data-bind="attr: { href: getApiUrl(quickViewApi) }">
+            <a class="outlined" data-bind="attr: { href: getApiUrl(quickViewApi()) }">
                 View API
             </a>
         </div>

src/components/template-pages/product-details-page/ko/runtime/staticPages/product-apis-cards.ts

@@ -99,7 +99,6 @@ export class ProductApisCards {
     }
 
     public getApiUrl(api: Api): string {
-        return this.routeHelper.getApiReferenceUrl(api.name, "api-details");
+        return this.routeHelper.getApiReferenceUrl(api.name, "/api-details");
     }
-
 }

src/components/template-pages/product-details-page/ko/runtime/staticPages/product-details-page-subscriptions.html

@@ -1,5 +1,10 @@
 <h3>Subscriptions</h3>
 
+<!-- ko if: working -->
+<spinner class="fit"></spinner>
+<!-- /ko -->
+
+<!-- ko ifnot: working -->
 <!-- ko ifnot: isUserSignedIn() -->
 <p>
     You need to sign in or create an account to see your subscriptions.
@@ -10,11 +15,6 @@ <h3>Subscriptions</h3>
 </div>
 <!-- /ko -->
 
-<!-- ko if: working -->
-<spinner class="fit"></spinner>
-<!-- /ko -->
-
-<!-- ko ifnot: working -->
 <!-- ko if: isUserSignedIn() -->
 <p>Below are your subscriptions for this product</p>
 

src/components/template-pages/product-details-page/ko/runtime/staticPages/product-details-page-subscriptions.ts

@@ -39,6 +39,9 @@ export class ProdutDetailsPageSubscriptions {
     @Param()
     public readonly calculateCanCreateNewSubscription: () => Promise<void>;
 
+    @Param()
+    public readonly subscriptionCreated: ko.Observable<boolean>;
+
     constructor(
         private readonly usersService: UsersService,
         private readonly productService: ProductService,
@@ -55,6 +58,14 @@ export class ProdutDetailsPageSubscriptions {
         this.product = ko.observable();
         this.loadModeSubscriptions = ko.observable(false);
         this.canCreateNewSubscription = ko.observable();
+        this.subscriptionCreated = ko.observable(false);
+
+        this.subscriptionCreated.subscribe(async (isCreated) => {
+            if(isCreated) {
+                await this.loadProductSubscriptions();
+            }
+        });
+
     }
 
     @OnMounted()
@@ -133,12 +144,14 @@ export class ProdutDetailsPageSubscriptions {
         this.isUserSignedIn(!!userId);
 
         if (!userId) {
+            this.working(false);
             return;
         }
 
         const productName = this.routeHelper.getProductName();
 
         if (!productName) {
+            this.working(false);
             return;
         }
 

src/components/template-pages/product-details-page/ko/runtime/subscripion-form/subscription-form.ts

@@ -26,6 +26,9 @@ export class SubscriptionForm {
     @Param()
     closeSubscriptionForm: () => void;
 
+    @Param()
+    subscriptionCreated: ko.Observable<boolean>;
+
     constructor(private readonly usersService: UsersService,
         private readonly productService: ProductService,
         private readonly tenantService: TenantService,
@@ -37,6 +40,7 @@ export class SubscriptionForm {
         this.working = ko.observable(false);
         this.hasError = ko.observable(false);
         this.isDelegationEnabled = ko.observable(false);
+        this.subscriptionCreated = ko.observable(false);
 
         this.product = ko.observable();
 
@@ -92,7 +96,7 @@ export class SubscriptionForm {
             const subscriptionId = `/subscriptions/${Utils.getBsonObjectId()}`;
             await this.productService.createSubscription(subscriptionId, userId, `/products/${this.product().name}`, this.subscriptionName());
 
-
+            this.subscriptionCreated(true);
             this.closeSubscriptionForm();
         }
         catch (error) {