Skip to content

Commit

Permalink
Merge pull request #548 from twilio-labs/update-lookup
Browse files Browse the repository at this point in the history 
Updates lookup
  • Loading branch information
@robinske
robinske authored Aug 13, 2024
2 parents cdebf80 + a27cc2c commit 717bf20
Show file tree
Hide file tree
Showing 6 changed files with 357 additions and 117 deletions.
226 changes: 168 additions & 58 deletions lookup/assets/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,73 +70,181 @@
</div>
<main>
<div class="content">
<h1>
<img
src="https://twilio-labs.github.io/function-templates/static/v1/success.svg"
/>
<div>
<p>Welcome!</p>
<p>Your live application with Twilio is ready to use!</p>
</div>
</h1>
<h2>Phone number lookup</h2>
<p>
This example shows how to process and parse international phone
numbers with the
<a href="https://github.com/jackocnr/intl-tel-input">
<code>intl-tel-input</code>
</a>
library and detect invalid phone numbers, carrier information, and
caller name with the
library and detect invalid phone numbers, line type, carrier
information, caller name, and more with the
<a href="https://twilio.com/docs/lookup/api">Twilio Lookup API</a>.
</p>
<p>
New data like enhanced Line Type Intelligence and SIM Swap detection
available in V2.
<a href="https://www.twilio.com/docs/lookup/v2-api"> Learn more. </a>
</p>
<ul>
<li>
💰
<a
href="https://www.twilio.com/en-us/user-authentication-identity/pricing/lookup"
>Pricing by package and country.</a
>
</li>
<li>
📖
<a href="https://www.twilio.com/docs/lookup/v2-api#data-packages"
>Package descriptions and availability</a
>
</li>
</ul>
<div>
<form id="lookup">
<p>Enter your phone number:</p>
<p>Enter your phone number</p>
<input id="phone" type="tel" name="phone" />
<p>Request type:</p>
<p>
Select your data packages
<a href="https://www.twilio.com/docs/lookup/v2-api#data-packages"
>[learn more]</a
>
</p>
<div>
<input type="checkbox" checked disabled />
<label>Formatting [free]</label><br />
<input
type="checkbox"
id="validation"
name="fields"
value="validation"
checked
disabled
/>
<label for="validation">Validation and Formatting [free]</label
><br />
</div>
<div>
<input type="checkbox" id="lti" name="types" value="lti" />
<input
type="checkbox"
id="lti"
name="fields"
value="line_type_intelligence"
/>
<label for="lti"
>Line Type Intelligence <strong>(beta)</strong> [$0.008 /
request]</label
><a
href="https://www.twilio.com/docs/lookup/v2-api/line-type-intelligence"
>Line Type Intelligence</a
></label
><br />
</div>
<div>
<input
type="checkbox"
id="callerName"
name="fields"
value="caller_name"
/>
<label for="callerName">
<a href="https://www.twilio.com/docs/lookup/v2-api/caller-name"
>Caller Name</a
> </label
><br />
</div>
<div>
<input
type="checkbox"
id="smsPumpingRisk"
name="fields"
value="sms_pumping_risk"
/>
<label for="smsPumpingRisk">
<a
href="https://www.twilio.com/docs/lookup/v2-api/sms-pumping-risk"
>SMS Pumping Risk</a
></label
><br />
</div>
<div>
<input
type="checkbox"
id="carrier"
name="types"
value="carrier"
id="simSwap"
name="fields"
value="sim_swap"
/>
<label for="carrier">Carrier [$0.005 / request]</label><br />
<label for="simSwap">
<a href="https://www.twilio.com/docs/lookup/v2-api/sim-swap"
>SIM Swap</a
>*</label
><br />
</div>
<div>
<input
type="checkbox"
id="caller-name"
name="types"
value="caller-name"
id="callForwarding"
name="fields"
value="call_forwarding"
/>
<label for="caller-name">
Caller name [USA Only; $0.01 / request]
</label>
<br />
<label for="callForwarding">
<a
href="https://www.twilio.com/docs/lookup/v2-api/call-forwarding"
>Call Forwarding</a
>*</label
><br />
</div>
<div>
<input
type="checkbox"
id="lineStatus"
name="fields"
value="line_status"
/>
<label for="lineStatus">
<a href="https://www.twilio.com/docs/lookup/v2-api/line-status"
>Line Status</a
>*</label
><br />
</div>
<input type="submit" class="btn" value="Lookup" />
<p>
* Additional carrier approval required prior to use.
<a
href="https://twlo.my.salesforce-sites.com/countrycarrier/SN_CarrierRegistration_VFP"
>Submit this form to request access.</a
>
</p>
</form>
<div class="alert alert-info" style="display: none"></div>
<div class="alert alert-error" style="display: none"></div>
<!-- EDIT_CODE_V2 -->
<div class="alert" style="display: none"></div>
<h3>Additional Lookup Data Packages</h3>
<p>
👀
<strong
><a
href="https://www.twilio.com/docs/lookup/v2-api/identity-match"
>Identity Match</a
></strong
>
and
<strong
><a
href="https://www.twilio.com/docs/lookup/v2-api/reassigned-number"
>Reassigned Number</a
></strong
>
packages require additional details in the request.
<a
href="https://www.twilio.com/en-us/blog/confirm-phone-number-ownership-lookup-identity-match"
>Learn more about Identity Match in this blog post.</a
>
</p>
<p>
✏️
<strong
><a
href="https://www.twilio.com/docs/lookup/v2-api/identity-match"
>Identity Pre-fill</a
></strong
>
combines Verify and Lookup for a seamless onboarding experience.
<a
href="https://www.twilio.com/code-exchange/verify-lookup-identity-prefill"
>Learn more in this Code Exchange project.</a
>
</p>
</div>
</div>
</main>
Expand All @@ -146,58 +254,60 @@ <h2>Phone number lookup</h2>
<script>
// Handle international prefixes, format phone input field
// Uses intl-tel-input plugin
const phoneInputField = document.querySelector('#phone');
const phoneInputField = document.querySelector("#phone");
const phoneInput = window.intlTelInput(phoneInputField, {
// https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
preferredCountries: ['us', 'co', 'in', 'de'],
preferredCountries: ["us", "co", "in", "de"],
utilsScript:
'https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js',
"https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js",
});

const info = document.querySelector('.alert-info');
const error = document.querySelector('.alert-error');
const alert = document.querySelector(".alert");
function displayAlert(message, type) {
let replace = type === "error" ? "info" : "error";
alert.style.display = "";
alert.classList.replace(replace, type) || alert.classList.add(type);
alert.innerHTML = message;
}

async function lookup(event) {
event.preventDefault();
alert.style.display = "none";

try {
const phoneNumber = phoneInput.getNumber();

info.style.display = 'none';
error.style.display = 'none';

const data = {
phone: phoneNumber,
types: Array.from(
document.querySelectorAll('input[name=types]:checked')
fields: Array.from(
document.querySelectorAll("input[name=fields]:checked")
).map((t) => t.value),
};

const response = await fetch('./lookup', {
method: 'POST',
const response = await fetch("./lookup", {
method: "POST",
headers: {
'Content-Type': 'application/json',
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});

const json = await response.json();
alert.style.display = "";
if (response.status === 200) {
info.style.display = '';
info.innerHTML = `<pre>${JSON.stringify(json, null, 2)}</pre>`;
displayAlert(`<pre>${JSON.stringify(json, null, 2)}</pre>`, "info");
} else {
console.error(json.error);
error.style.display = '';
error.innerHTML = `Invalid phone number.`;
displayAlert(json.error, "error");
}
} catch (err) {
error.style.display = '';
error.innerHTML = `Something went wrong: ${err}`;
console.error(err);
displayAlert("Something went wrong.", "error");
}
}

const form = document.getElementById('lookup');
form.addEventListener('submit', (event) => lookup(event));
const form = document.getElementById("lookup");
form.addEventListener("submit", (event) => lookup(event));
</script>
</body>
</html>
4 changes: 2 additions & 2 deletions lookup/assets/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ pre {
border-radius: 4px;
}

.alert-info {
.info {
border-color: #bce8f1;
color: #31708f;
background-color: #d9edf7;
}

.alert-error {
.error {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
Expand Down
4 changes: 4 additions & 0 deletions lookup/changelog.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# Changelog

## [1.1.0]
### Changed
- Moved all requests to Lookup V2

## [1.0.1]
### Added
- Adds option for V2 Line Type Intelligence data package
Expand Down
Loading

0 comments on commit 717bf20

Please sign in to comment.