Trolley Code

Description

The Trolley Code is an encrypted identifier containing key information such as product codes, quantities, and delivery methods. This code enables users to share the contents of their trolley, allowing recipients to view and interact with the items directly, enhancing collaboration and streamlining the ordering process.

Purpose

The Trolley Code simplifies product sharing by encoding all trolley details into a single code. It’s especially useful in scenarios where users need to quickly reference or share a pre-defined list of products, improving accuracy and consistency in product sharing across platforms.

Problem

The following challenges are addressed by implementing the Trolley Code:

• Sharing product selections traditionally requires users to manually compile lists.
• Cross-platform sharing of product information can be inconsistent.
• Ensuring the accuracy of shared product quantities and delivery methods can be difficult without a standardized code.

Solution

The Trolley Code provides the following solutions to enhance user experience:

• Streamlined Sharing: Users can easily share a single encrypted code containing all relevant trolley information.
• Consistency Across Platforms: A standardized code that displays the same trolley contents regardless of device or platform.
• Precision in Product Details: Each code retains specific product quantities and delivery methods, reducing potential errors in shared data.

The Trolley Code enables smooth communication and collaboration, allowing multiple parties to interact with a precise list of products and related data, reducing miscommunication and enhancing the shopping experience.

Key Features

The Trolley Code's primary features include:

• Encryption: Ensures data privacy and security when sharing trolley details.
• Cross-Platform Compatibility: Works seamlessly across different devices and platforms.
• Easy Integration: Can be embedded into messaging or email to simplify the sharing process.

Implementation Details

Functions and URL Encoding

In the TrolleyStore, two main functions handle encoding and decoding the Trolley Code for secure data sharing.

getEncodeTrolleyCodeQueryString Encodes trolley details into a secure URL string, including product code, quantity, and channel.

getEncodeTrolleyCodeQueryString(trolleyCode: string) {
  const products = this.all_trolley_line_items || [];
  
  const productString = products
    .map(product => `${product.product_code}:${product.quantity}:${product.channel}`)
    .join(',');

  const queryString = `${trolleyCode}#${productString}`;
  const encodedString = window.btoa(queryString);

  this.trolley.encoded_trolley_url = encodedString;
}

Parameters:

• trolleyCode: An identifier for the specific trolley.

Functionality:

• Retrieves products from the trolley, formats them as a string containing product codes, quantities, and channels.
• Combines trolleyCode and productString into a query string, encodes it using base64, and assigns the encoded URL to trolley.encoded_trolley_url.

getDecodeTrolleyCodeQueryString Decodes a given Trolley Code URL, retrieves the product details, and maps them to their corresponding items in the store.

async getDecodeTrolleyCodeQueryString(url: string) {
  try {
    const decodedString = window.atob(url);
    const [trolleyCode, productString] = decodedString.split('#');
    
    if (!productString) throw new Error("Invalid product string format.");
    
    const productEntries = productString.split(',');
    const productDetails = productEntries.map(entry => {
      const [productCode, quantity, channel] = entry.split(':');
      return { productCode, quantity, channel };
    });

    const productIds = productDetails.map(item => item.productCode);
    const productService = new ProductService();
    const response = await productService.getProducts(productIds);

    this.Trolley_code_product = response.map(product => {
      const matchingProductDetail = productDetails.find(item => item.productCode === product.code);
      return {
        ...product,
        quantity: matchingProductDetail ? matchingProductDetail.quantity : 1,
        channel: matchingProductDetail ? matchingProductDetail.channel : 0
      };
    });
    this.trolley_Code = trolleyCode;
  } catch (error) {
    console.error("Error decoding trolley code or fetching products:", error);
  }
}

Parameters:

• url: The encoded Trolley Code URL.

Functionality:

• Decodes the URL to extract trolleyCode and productString.
• Splits productString to retrieve product details and stores them in Trolley_code_product.
• Makes an API call to fetch products based on product codes, then matches and assigns quantities and channels from the Trolley Code data.

Additional Information

• The Trolley Code can be integrated into existing Application with minimal setup, making it ideal for retailers seeking quick and effective solutions for product sharing and collaboration.
• In Trolley Store we have Created Two Function which is getEncodeTrolleyCodeQueryString and getDecodeTrolleyCodeQueryString .
• Every call to service must be enclosed by a try…catch block to manage client side error states inside the store.
• Within catch block, we need to use errorHandle composable.
• Loader will be visible when user click on the trolley code button

Acceptance Criteria

• Users should be able to generate a Trolley Code from their current trolley contents.
• Recipients can open the Trolley Code and view the same products, quantities, and delivery methods.
• The Trolley Code functions consistently across different devices and platforms.