# Customer Screen WiFi Integration

## Option 1: Using Your Own Customer Screen

If you have a custom customer screen, you can initialize it by sending the URL link to Easypay. This allows your application to display your personalized interface for customer interactions.

```javascript
//Initialize your custom Customer Screen by sending its URL to Easypay
const initCustomerScreen = () => {
    const initRequest = {
        method: "initCustomerDisplayUrl",
        customerDisplayUrl: "https://your-customer-screen-url.com" // Replace with your customer screen URL
    };
    
    try {
        socket.send(JSON.stringify(initRequest));
        console.log("Initialized custom Customer Screen:", initRequest);
    } catch (error) {
        console.error("Failed to initialize Customer Screen:", error);
        // Optionally, implement retry logic or notify the user
    }
};

// Example usage:
initCustomerScreen();
```

**Explanation:**

* **Method:** `initCustomerDisplayUrl`
* **Purpose:** Sends the URL of your custom Customer Screen to Easypay to initialize it.
* **Parameters:**
  * `customerDisplayUrl`: The URL of your custom Customer Screen.

## Option 2: Using Easypay's Built-in Customer Screen

Easypay's built-in Customer Screen allows you to manage order lines dynamically. Below are the methods to add, update, remove, and synchronize order lines.

### **Adding a New Order Line**

To add a new product to the current order displayed on the Customer Screen, utilize the `newOrderLine` method. This allows you to specify product details such as image, name, quantity, and price.

```javascript
//Function to add a new order line to the Customer Screen
const addOrderLine = () => {
    const newOrderLineRequest = {
        method: "newOrderLine",
        product_image: "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png",
        id: 1,
        product_name: "Burger",
        quantity: 1,
        price: 35.00
    };
    
    try {
        socket.send(JSON.stringify(newOrderLineRequest));
        console.log("Added new order line:", newOrderLineRequest);
    } catch (error) {
        console.error("Failed to add new order line:", error);
        // Optionally, implement retry logic or notify the user
    }
};

// Example usage:
addOrderLine();
```

**Explanation:**

* **Method:** `newOrderLine`
* **Purpose:** Adds a new product to the current order displayed on the Customer Screen.
* **Parameters:**
  * `product_image`: URL of the product image.
  * `id`: Unique identifier for the product.
  * `product_name`: Name of the product.
  * `quantity`: Quantity of the product.
  * `price`: Price per unit of the product.

### **Updating an Existing Order Line**

To update the details of an existing product in the current order, use the `updateOrderLine` method. This allows modifications to the product's quantity, price, or other attributes.

```javascript
// Function to update an existing order line on the Customer Screen
const updateOrderLine = () => {
    const updateOrderLineRequest = {
        method: "updateOrderLine",
        product_image: "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png",
        id: 1,
        product_name: "Burger",
        quantity: 3,
        price: 35.00
    };
    
    try {
        socket.send(JSON.stringify(updateOrderLineRequest));
        console.log("Updated order line:", updateOrderLineRequest);
    } catch (error) {
        console.error("Failed to update order line:", error);
        // Optionally, implement retry logic or notify the user
    }
};

// Example usage:
updateOrderLine();
```

**Explanation:**

* **Method:** `updateOrderLine`
* **Purpose:** Updates the details of an existing product in the current order.
* **Parameters:**
  * `product_image`: URL of the product image.
  * `id`: Unique identifier for the product to be updated.
  * `product_name`: Name of the product.
  * `quantity`: New quantity of the product.
  * `price`: Price per unit of the product.

### **Removing an Order Line**

To remove a specific product from the current order, utilize the `removeOrderLine` method by specifying the product's unique identifier.

```javascript
// Function to remove an order line from the Customer Screen
const removeOrderLine = () => {
    const removeOrderLineRequest = {
        method: "removeOrderLine",
        id: 1 // ID of the product to be removed
    };
    
    try {
        socket.send(JSON.stringify(removeOrderLineRequest));
        console.log("Removed order line with ID:", removeOrderLineRequest.id);
    } catch (error) {
        console.error("Failed to remove order line:", error);
        // Optionally, implement retry logic or notify the user
    }
};

// Example usage:
removeOrderLine();
```

**Explanation:**

* **Method:** `removeOrderLine`
* **Purpose:** Removes a specific product from the current order.
* **Parameters:**
  * `id`: Unique identifier of the product to be removed.

### **Creating a New Order (Clearing Order Lines)**

To initiate a new order and clear all existing order lines, use the `newOrder` method. This is useful when starting a fresh transaction.

```javascript
// Function to create a new order by clearing all existing order lines
const createNewOrder = () => {
    const newOrderRequest = {
        method: "newOrder"
    };
    
    try {
        socket.send(JSON.stringify(newOrderRequest));
        console.log("Created a new order and cleared all order lines.");
    } catch (error) {
        console.error("Failed to create a new order:", error);
        // Optionally, implement retry logic or notify the user
    }
};

// Example usage:
createNewOrder();
```

**Explanation:**

* **Method:** `newOrder`
* **Purpose:** Initializes a new order by clearing all existing order lines on the Customer Screen.
* **Parameters:** None.

### **Updating All Order Lines at Once**

To efficiently update all order lines simultaneously, use the `UpdateAllOrderlines` method. This ensures synchronization between your POS system and the Customer Screen by sending the complete list of current order lines.

```javascript
// Function to update all order lines on the Customer Screen
const updateAllOrderLines = () => {
    const updateAllOrderlinesRequest = {
        method: "UpdateAllOrderlines",
        data: [
            {
                id: 1,
                product_name: "Burger",
                quantity: 2,
                unit_price: 35.00,
                price: 70.00,
                product_image: "https://www.example.com/images/burger.png"
            },
            {
                id: 2,
                product_name: "Fries",
                quantity: 1,
                unit_price: 20.00,
                price: 20.00,
                product_image: "https://www.example.com/images/fries.png"
            },
            {
                id: 3,
                product_name: "Coke",
                quantity: 3,
                unit_price: 15.00,
                price: 45.00,
                product_image: "https://www.example.com/images/coke.png"
            }
        ]
    };
    
    try {
        socket.send(JSON.stringify(updateAllOrderlinesRequest));
        console.log("Updated all order lines:", updateAllOrderlinesRequest.data);
    } catch (error) {
        console.error("Failed to update all order lines:", error);
        // Optionally, implement retry logic or notify the user
    }
};

// Example usage:
updateAllOrderLines();
```

**Explanation:**

* **Method:** `UpdateAllOrderlines`
* **Purpose:** Sends the complete list of current order lines to the Customer Screen, ensuring synchronization.
* **Parameters:**
  * `data`: An array of order line objects, each containing:
    * `id`: Unique identifier for the product.
    * `product_name`: Name of the product.
    * `quantity`: Quantity of the product.
    * `unit_price`: Price per unit of the product.
    * `price`: Total price for the product (`unit_price` × `quantity`).
    * `product_image`: URL of the product image.

### **Summary of WiFi Integration Methods**

<table><thead><tr><th width="227">Functionality</th><th width="266">Method</th><th>Description</th></tr></thead><tbody><tr><td><strong>Initialize Customer Screen</strong></td><td><code>initCustomerDisplayUrl</code></td><td>Initializes your custom Customer Screen with a URL.</td></tr><tr><td><strong>Add Order Line</strong></td><td><code>newOrderLine</code></td><td>Adds a new product to the current order.</td></tr><tr><td><strong>Update Order Line</strong></td><td><code>updateOrderLine</code></td><td>Updates details of an existing product in the order.</td></tr><tr><td><strong>Remove Order Line</strong></td><td><code>removeOrderLine</code></td><td>Removes a specific product from the order.</td></tr><tr><td><strong>Create New Order</strong></td><td><code>newOrder</code></td><td>Clears all existing order lines to start a new order.</td></tr><tr><td><strong>Update All Order Lines</strong></td><td><code>UpdateAllOrderlines</code></td><td>Synchronizes all order lines at once with the screen.</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.easypay.sa/easypay/customer-screen-integration-guide/customer-screen-wifi-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.