Before You Start

var fetchCart = async function() {
      const response = await fetch('/api/storefront/cart', {credentials: 'include'});
      const data = await response.json();
      return data;
  }
  
  var createSubscription = function(list_id, email, phone) {
      const url = 'https://a.klaviyo.com/client/subscriptions/?company_id=COMPANY_ID';
      let attributes = {
        list_id: list_id  
      };
      if (email) {
          attributes.email = email;
      }
      if (phone) {
          attributes.phone_number = phone;
      }
      const options = {
          method: 'POST',
          headers: {revision: '2023-01-24', 'content-type': 'application/json'},
          body: JSON.stringify({
              data: {
                  type: "subscription",
                  attributes: attributes
              }
          })
      };
      fetch(url, options)
      .then(res => res.text())
      .then(data => console.log(data))
      .catch(err => console.error('error:' + err));
  };
  
  var createEvent = function(data) {
      const url = 'https://a.klaviyo.com/client/events/?company_id=COMPANY_ID';
      const options = {
          method: 'POST',
          headers: {
            accept: 'application/json',
            revision: '2023-01-24',
            'content-type': 'application/json'
          },
          body: JSON.stringify({
            data: data
          })
        };
        
        fetch(url, options)
          .then(res => res.text())
          .then(data => console.log(data))
          .catch(err => console.error('error:' + err));
  };
  var items = [];
  var itemNames = [];
  var cartAmount = 0;
  var callbacks = {
      check : function () {
          // Executes just before the checkout form loads.
          // Must return a boolean that will determine if Bolt should proceed with checkout.
          return true;
      },
      onCheckoutStart : async function () {
          // Executes after the checkout form is presented to the user
          let cart = await fetchCart();
          items = [].concat(
            cart[0].lineItems.customItems,
            cart[0].lineItems.digitalItems,
            cart[0].lineItems.giftCertificates, 
            cart[0].lineItems.physicalItems
          );
          let tempItems = [];
          for(let i = 0; i < items.length; i++) {
              tempItems.push(items[i].name);
          }
          itemNames = tempItems;
          cartAmount = cart[0].cartAmount;

      },
      onEmailEnter: function (email) {
          // Executes after the user enters their email address.
          var _learnq = _learnq || []; 
          _learnq.push(['identify', {'$email': email}]);

          _learnq.push(['track','Started checkout', {
             "$event_id": "StartedCheckout_" + Date.now() + "_" + email,
             "$value": cartAmount,
             "ItemNames": itemNames,
             "CheckoutURL": "{{settings.secure_base_url}}{{urls.cart}}",
             "Items": items
          }]);
      },
      onShippingDetailsComplete: function (address) {
          // Executes when the user proceeds to the shipping options page.
          // This is applicable only to multi-step checkout.
          // When available the first parameter will contain a user's name and address info.
      },
      onShippingOptionsComplete: function () {
          // Executes when the user proceeds to the payment details page.
          // This is applicable only to multi-step checkout.
      },
      onPaymentSubmit: function () {
          // Executes after the user clicks the pay button.
      },
      success: function (transaction, callback) {
          // Executes when the Bolt checkout transaction is successful.
          // **IMPORTANT** callback() must be executed at the end of the success function
        var customFields = transaction.custom_field_responses;
        for (let i = 0; i< customFields.length; i++) {
        if (customFields[i].public_id === 'NEWSLETTER_CHECKBOX_ID' &&  customFields[i].response === true) { 
            // Newsletter Consent
              createSubscription('EMAIL_LIST_ID', transaction.shipping_address.email, '');
          }
          if (customFields[i].public_id === 'SMS_CHECKBOX_ID' &&  customFields[i].response === true) { 
            // SMS Consent
              let phone = transaction.from_consumer.phones[0] ? transaction.from_consumer.phones[0].number : null;
              if (phone) {
                  phone = phone.replace(/ /g,'');
                  createSubscription('SMS_LIST_ID', '', phone);
              }
          }      
        }

          // Placed Order event
          let profile = {
              "$email": transaction.shipping_address.email,
              "$phone_number": transaction.shipping_address.phone,
              "$first_name": transaction.shipping_address.first_name,
              "$last_name": transaction.shipping_address.last_name,
              "$city": transaction.shipping_address.locality,
              "$region": transaction.shipping_address.region,
              "$country": transaction.shipping_address.country,
              "$zip": transaction.shipping_address.postal_code
          };
          let placedOrderData = {
              type: 'event',
              attributes: {
                profile: profile,
                metric: {name: 'Placed Order'},
                properties: {
                    OrderId: transaction.merchant_order_number,
                    BillingAddress: {
                        "FirstName": transaction.billing_address.first_name,
                        "LastName": transaction.billing_address.last_name,
                        "Company": transaction.billing_address.company,
                        "Address1": transaction.billing_address.street_address1,
                        "Address2": transaction.billing_address.street_address2,
                        "City": transaction.billing_address.locality,
                        "Region": transaction.billing_address.region,
                        "Country": transaction.billing_address.country,
                        "CountryCode": transaction.billing_address.country_code,
                        "Zip": transaction.billing_address.postal_code,
                        "Phone": transaction.billing_address.phone
                    },
                    ShippingAddress: {
                        "FirstName": transaction.shipping_address.first_name,
                        "LastName": transaction.shipping_address.last_name,
                        "Company": transaction.shipping_address.company,
                        "Address1": transaction.shipping_address.street_address1,
                        "Address2": transaction.shipping_address.street_address2,
                        "City": transaction.shipping_address.locality,
                        "Region": transaction.shipping_address.region,
                        "Country": transaction.shipping_address.country,
                        "CountryCode": transaction.shipping_address.country_code,
                        "Zip": transaction.shipping_address.postal_code,
                        "Phone": transaction.shipping_address.phone
                    },
                    ItemNames: itemNames,
                    Items: items
                },
                value: Number(transaction.amount.amount) / 100,
                unique_id: transaction.merchant_order_number
              }
            };
          createEvent(placedOrderData);
          // Orderd Product
          for (let i = 0; i < items.length; i++) {
              let orderedProductData = {
                  type: 'event',
                  attributes: {
                    profile: profile,
                    metric: {name: 'Ordered Product'},
                    properties: {
                      OrderId: transaction.merchant_order_number,
                      ProductID: items[i].productId,
                      SKU: items[i].sku,
                      ProductName: items[i].name,
                      Quantity: items[i].quantity,
                      ProductURL: items[i].url,
                      ImageURL: items[i].imageUrl
                    },
                    value: items[i].salePrice,
                    unique_id: 'OrderedProduct_' + Date.now() + '_' + items[i].sku
                  }
                };
                createEvent(orderedProductData);
          }
          callback()
      },
      close: function () {
          // This function is called when the Bolt checkout modal is closed.
          // This will not be called when create_order endpoint returns a valid URL
          // and authorization is successful
      }
  }