ToolStation - Internal Docs
My Account

Stock Notification

Description

The Stock Notification feature allows users to subscribe for notifications when a product is out of stock. If a product is unavailable for both collection and delivery, a Notify Me button is displayed on the product card. Clicking this button triggers a subscription process, where the user is notified when the product becomes available again. Users can also manage their subscriptions via the Stock Notifications section in the my accounts page, where they can unsubscribe from individual products or remove all subscriptions.

Purpose

The Stock Notification feature aims to enhance the user experience by ensuring customers can stay informed about product availability. This feature provides flexibility in managing stock notifications and prevents users from repeatedly checking for restocked items.

Use Cases

  • Subscribe to Product Notifications: Users can subscribe to receive notifications when an out-of-stock product becomes available.
  • View Subscribed Products: Users can view all subscribed products in the Stock Notifications section of their account page.
  • Unsubscribe from a Single Product: Users can unsubscribe from individual product notifications.
  • Unsubscribe from All Products: Users can unsubscribe from all product notifications at once.

Key Features

API Endpoints

The following API endpoints are used for the Stock Notification feature:

  1. GET /api/customers/{customerId}/stock-notifications
    • Retrieves all stock notification subscriptions for a customer.
  2. POST /api/customers/{customerId}/stock-notifications/{productId}
    • Subscribes a customer to a stock notification for a specific product.
  3. DELETE /api/customers/{customerId}/stock-notifications/{productId}
    • Unsubscribes a customer from a stock notification for a specific product.

Components and Methods

subscribeProduct(productCode?: string)

This method subscribes a user to a product's stock notifications if the product is out of stock.

  • Parameters:
    • productCode: Optional. The code for the product to be subscribed.
  • Flow:
    • Checks if the user is already subscribed to the product.
    • Calls the subscription API if the user is not already subscribed.
    • On successful subscription, a confirmation modal is shown.
async subscribeProduct(productCode?: string) {
  const authStore = useAuthStore();
  this.is_stock_subscribe_loading = true;

  let product_code = productCode || this.notify_product_code;
  if (!product_code) return;

  try {
    const customerId = authStore.user?.id;
    let response = await new ProductService().subscribeProduct(customerId, product_code);
    if (!response?.success) throw new Error("Failed to subscribe to product stock");
    return response;
  } catch (error) {
    await useErrorHandler(error);
    return false;
  } finally {
    this.is_stock_subscribe_loading = false;
  }
}

unSubscribeProduct(productId: string | undefined, showToast: boolean = true)

This method unsubscribes a user from a stock notification for a specific product.

  • Parameters:
    • productId: The ID of the product to unsubscribe from.
    • showToast: Optional. Determines whether a success toast message is displayed.
  • Flow:
    • Calls the API to unsubscribe the user from the selected product.
    • On success, it displays a toast message if showToast is true.
async unSubscribeProduct(productId: string | undefined, showToast: boolean = true) {
  const authStore = useAuthStore();
  try {
    const customerId = authStore.user?.id;
    let response = await new ProductService().unSubscribeProduct(customerId, productId);
    if (showToast) {
      toast("Successfully unsubscribed", { autoClose: true, type: "success" });
    }
    if (!response?.success) throw "Failed to unsubscribe the product.";
    return true;
  } catch (error) {
    await useErrorHandler(error);
    return false;
  }
}

fetchSubscribedProductsDetails()

Fetches details of all products that the user has subscribed to.

  • Flow:
    • Retrieves product IDs from the user’s subscriptions.
    • Fetches product details for each subscribed product.
    • Updates the list of subscribed product details in the store.
async fetchSubscribedProductsDetails() {
  const accountStore = useAccountStore();
  if (accountStore.stock_notifications.length > 0) {
    const productIds = accountStore.stock_notifications.map(notification => Number(notification.product_id));
    if (productIds.length > 0) {
      try {
        const response = await new ProductService().getProducts(productIds);
        if (response) {
          this.subscribedProductDetails = accountStore.stock_notifications.map(notification => {
            const productData = response.find(product => product.code === notification.product_id);
            return { product_data: productData, created_at: notification.created_at };
          });
        } else {
          this.subscribedProductDetails = [];
          accountStore.stock_notifications = [];
        }
      } catch (err) {
        this.subscribedProductDetails = [];
        accountStore.stock_notifications = [];
        useErrorHandler(err);
      }
    }
  }
}

UI Components

  1. Notify Me Button
    • Displayed when a product is out of stock.
    • Calls subscribeProduct to subscribe the user to notifications for this product.
  2. Subscription Confirmation Modal
    • Shown after successful subscription.
    • Notifies the user that they have subscribed with their registered email.
    • Offers an option to unsubscribe directly from the modal.
  3. Account Stock Notification Page
    • Lists all products the user has subscribed to.
    • Displays each product's subscription status and provides options to unsubscribe.
    • Includes an Unsubscribe All button to clear all subscriptions.

Error Handling and Loading State Management

  • Error Handling:
    • Errors are handled in the Pinia store, with useErrorHandler called to manage exceptions.
    • Displays appropriate error messages to the user when API calls fail.
  • Loading States:
    • Loading indicators are displayed while API requests are being processed for subscribing, unsubscribing, and fetching subscribed products.

Acceptance Criteria

  • The Notify Me button is shown for out-of-stock products.
  • Users can successfully subscribe to a product's stock notifications.
  • A confirmation modal is shown after subscribing, with the option to unsubscribe.
  • Users can view all subscribed products on the Stock Notifications page.
  • Users can unsubscribe from individual products or all products on the Stock Notifications page.
  • Proper error handling is in place for all API calls, with error messages shown as needed.

Message Center

Addresses

Copyright © 2026