Set Up

import useScript from './hooks/useScript';
import './App.css';

// Function that makes a call to Attentive/s /v1/subscriptions endpoint
const subscribeToAttentive = async (phone) => {
    const url = 'https://api.attentivemobile.com/v1/subscriptions';
    const token = '<YOUR_ATTENTIVE_TOKEN>'; // replace with your Attentive token
    // 'user' and 'signUpSourceId' are required fields. 'externalIdentifiers' is optional.
    const data = {
    user: {
        phone: phone,
    },
    signUpSourceId: 'string',
    externalIdentifiers: {
        clientUserId: 'string',
        shopifyId: 'string',
        klaviyoId: 'string',
        customIdentifiers: [
            {
                name: 'string',
                value: 'string',
            }
        ]},
    };

    fetch(url, {
    method: 'POST',
    headers: {
        'Authorization': 'Bearer ' + token,
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
    })
    .then(response => {
        console.log(response);
        // Handle response
    })
    .catch(error => {
        console.error(error);
        // Handle error
    });
}


var callbacks = {
  check: function () {
    // This function is called just before the checkout form loads.

    // This is a hook to determine whether Bolt can proceed with checkout at this point. This function MUST return a boolean.

    return true
  },

  onCheckoutStart: function () {
    // This function is called after the checkout form is presented to the user.
  },

  onEmailEnter: function (email) {
    // This function is called after the user enters their email address.
  },

  onShippingDetailsComplete: function (address) {
    // This function is called 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 () {
    // This function is called when the user proceeds to the payment details page.
    // This is applicable only to multi-step checkout.
  },

  onPaymentSubmit: function () {
    // This function is called after the user clicks the pay button.
  },

  success: function (transaction, callback) {
    // This function is called when the Bolt checkout transaction is successful.
    var customFields = transaction.custom_field_responses;
    console.log(JSON.stringify(customFields[0]))

    for (let i = 0; i< customFields.length; i++) {
      // Check if the public_id matches the custom field ID for the checkbox. Note this ID is visible from Bolt's side, so we've provided it to you here
      if (customFields[i].public_id === 'SSr8UzPtEf4z' &&  customFields[i].response === true) {
          // Parse the phone number
          let phone = transaction.from_consumer.phones[0] ? transaction.from_consumer.phones[0].number : null;
          if (phone) {
              // Format the phone number for use with Attentive API
              phone = phone.replace(/ /g,'');
              console.log("phone: ", phone);
              // Make API call to Attentive
              subscribeToAttentive(phone);
          }
      }
    }

    // **IMPORTANT** callback must be executed at the end of this function
    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.
  },
}