Embedded API Events

application.addEventListener("READY", () => ({
    console.log("Integration Ready to Process");
}));

application.addEventListener("FORMAT_INTEGRATED_PRODUCT", event => {
    const product = event.product;
    if (
        typeof product.additional === "object" &&
        product.additional !== null &&
        product.additional.my_integration === 1
    ) {
        return {
            product: {
                ...product,
                metaData: {
                    ...product.metaData,
                    customInfo: {
                        name: "myIntegration",
                    },
                },
            },
        };
    }
});

//Return a custom payment method
const getPaymentMethod = async () => {
    let customMethod: LocalPaymentMethod | undefined;
    const methods = await application.database.all<LocalPaymentMethod>("paymentMethods");

    for(let i = 0, l = methods.length; i < l; i++) {
        if (methods[i].type === "custom" || methods[i].gateway_url === "https://mycustom.url") {
            customMethod = methods[i];
        }
    }

    return customMethod;
};

application.addEventListener("PAYMENT_METHODS_ENABLED", async methods => {
    const method = await getPaymentMethod();

    if (method) {
        //Add the payment method
        methods.push({
            ...method,
            default_pay_exact: true,
            type             : "custom"
        });
    }

    return methods;
});

application.addEventListener("REGISTER_CHANGED", event => ({
    console.log(`New register id: ${event.register}`);
}));

import { Button } from "@shopfront/bridge";

const orderViewButtons = () => {
    const button = new Button("Send to Integration", "https://example.com/icon.png");

    button.addEventListener("click", () => {
        // Perform action here
    });

    return [button];
};

application.addEventListener("REQUEST_BUTTONS", location => {
    switch(location) {
        case "ORDER_VIEW":
            return orderViewButtons();
    }

    return [];
});

application.addEventListener("REQUEST_CUSTOMER_LIST_OPTIONS", () => {
    return [
        {
            contents: "Add Loyalty Customer",
            onClick : () => {
                console.log("Adding loyalty customer");
            }
        }
    ];
});

import { SaleKey } from "@shopfront/bridge";r

application.addEventListener("REQUEST_SALE_KEYS", () => ({
    const keys: SaleKey[] = []; 
    const saleKey = new SaleKey(
        "@onshopfront/example/newKey",
         "A New Sale Key"
    ); 

    saleKey.addEventListener("click", () => {
        console.log("Button clicked");
    };

    keys.push(saleKey);

    return keys;
});

application.addEventListener("REQUEST_SELL_SCREEN_OPTIONS", () => ({
    "url": "https://example.com",
    "title": "Example Option",
});

application.addEventListener("REQUEST_SETTINGS", () => ({
    logo: "https://example.com/logo-location.png",
    description: "Sends purchases to your accounting software",
    url: "https://example.com/shopfront-settings"
}));

application.addEventListener("REQUEST_TABLE_COLUMNS", (location, data) => {
    if(location === "ORDER_VIEW") {
        if(data.status === "SENT" && data.type === "ORDER") {
            return {
                headers: [{
                    label : "10 Or More",
                    key   : "more",
                    weight: 10, // Will be 10 from the left
                }],
                body: data.products.map(product => ({
                    more: product.orderedQuantity > 10 ? "Yes" : "No",
                })),
                footer: {
                    more: "",
                },
            }
        }
    }
    
    return null;
});

application.addEventListener("SALE_COMPLETE", event => ({
    console.log("Sale was finalized");
}));

application.addEventListener("AUDIO_READY", () => ({
    console.log("Audio Events Ready to Process");
}));

application.addEventListener("UI_PIPELINE", (existing, context) => ({
    if (context.location === "shopfront:sell:transaction:products:pre") {
        const content = `<p>Your new content</p>`
        existing.push({
            "My new content",
            content
        });
    }

    return existing;
});

application.addEventListener("SALE_PRE_FINISH_PIPELINE", (sale, context) => {
    if(shouldFailSale(sale, context)) {
        return false;
    }

    return {
        ...sale,
        notes: {
            ...sale.notes,
            internal: `${sale.notes.internal}\nAdded an internal note`,
        },
    };
});

application.addEventListener("INTERNAL_PAGE_MESSAGE", event => {
    if(event.url !== process.env.CUSTOM_PAGE_URL || event.clientId !== process.env.CLIENT_ID) {
        return;
    }

    if(typeof event.message !== "object") {
        return;
    }

    if(event.method === "REQUEST_SELL_SCREEN") {
        if(event.message.type === "PING") {
            // You can keep a copy of event.reference around if you want
            // to send more messages without having to send them from the
            // custom page first.
            event.reference.send({
                type: "PONG",
            });
        }
    }
});

window.addEventListener("message", event => {
    if(event.origin !== "https://<vendor>.onshopfront.com") {
        return;
    }

    if(typeof event.data !== "object") {
        return;
    }

    if(event.data.url !== process.env.CUSTOM_PAGE_URL || event.data.clientId !== process.env.CLIENT_ID) {
        return;
    }

    if(event.data.type !== "INTERNAL_PAGE_MESSAGE") {
        return;
    }

    if(typeof event.data.message !== "object") {
        return;
    }

    if(event.data.message.type === "PONG") {
        console.log("Communication Successful!");
    }
}, false);

window.parent.postMessage({
    type    : "INTERNAL_PAGE_MESSAGE",
    from    : process.env.CUSTOM_PAGE_URL,
    clientId: process.env.CLIENT_ID,
    message : {
        type: "PING",
    },
}, "https://<vendor>.onshopfront.com");

application.addEventListener("GIFT_CARD_CODE_CHECK", async event => {
    const reservedRange = ["00001002", "00002002"]

    if (event.message !== null) {
        return event
    }

    const codeInt = parseInt(event.code);

    if (codeInt >= parseInt(reservedRange[0]) && codeInt <= parseInt(reservedRange[1])) {
        // Check to make sure the length of the cardNumber is within Card Ranges length
        const minLength = reservedRange[0].length;
        const maxLength = reservedRange[1].length;

        if (event.code.length >= minLength && event.code.length <= maxLength) {
            return {
                code   : event.code,
                message: `Your Application: Gift card code refused - ${event.code} is within a reserved range of values.`
            };
        }
    }

    return event;
});

application.addEventListener("SALE_PRODUCT_ADD", () => {
    // Do something...
});