this suitelet is can be used in the email to display a page that has a button unsubscribe styled with html and css aligned in the centre of the page.
As shown below
when the unsubscribe button is clicked this will go to the customer record passed as argument and loads that record and checks the checkbox unsubscribe in the corresponding customer record.
the following code can be used for this dunctionality.
/**
* @NApiVersion 2.1
* @NScriptType Suitelet
*/
define(['N/record', 'N/ui/serverWidget', 'N/log'], function (record, serverWidget, log) {
function onRequest(scriptContext) {
try {
if (scriptContext.request.method === 'GET') {
// Fetch the customer ID from the URL
let customerId = scriptContext.request.parameters.customerId;
let html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unsubscribe</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f9f9f9;
}
.unsubscribe-container {
text-align: center;
background: #ffffff;
padding: 20px 40px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.unsubscribe-container h1 {
font-size: 24px;
color: #333333;
}
.unsubscribe-container .red-box {
background-color: #ffdddd;
border: 1px solid #d9534f;
padding: 20px;
color: #d9534f;
font-size: 16px;
border-radius: 5px;
margin-bottom: 20px;
}
.unsubscribe-container button {
padding: 10px 20px;
font-size: 16px;
color: #ffffff;
background: #d9534f;
border: none;
border-radius: 5px;
cursor: pointer;
}
.unsubscribe-container button:hover {
background: #c9302c;
}
</style>
</head>
<body>
<div class="unsubscribe-container">
<h1>Unsubscribe from Notifications</h1>
<div class="red-box">
<p>Are you sure you want to unsubscribe? This action cannot be undone.</p>
</div>
<form method="POST">
<input type="hidden" name="customerId" value="${customerId}">
<button type="submit">Unsubscribe</button>
</form>
</div>
</body>
</html>
`;
// Display the HTML
scriptContext.response.write(html);
} else if (scriptContext.request.method === 'POST') {
// Handle the form submission
let customerId = scriptContext.request.parameters.customerId;
if (customerId) {
// Load the customer record
let customerRecord = record.load({
type: record.Type.CUSTOMER,
id: customerId
});
log.debug('customer',customerId)
// Update the custom checkbox field for unsubscribing
customerRecord.setValue({
fieldId: 'custentity_jj_email_unsubscribe', // Replace with your custom checkbox field ID
value: true
});
customerRecord.save();
// Display the success message
let html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unsubscribed</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f9f9f9;
}
.unsubscribe-container {
text-align: center;
background: #ffffff;
padding: 20px 40px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.unsubscribe-container h1 {
font-size: 24px;
color: #333333;
}
.unsubscribe-container p {
font-size: 16px;
color: #555555;
}
</style>
</head>
<body>
<div class="unsubscribe-container">
<h1>Unsubscribed Successfully</h1>
<p>You have successfully unsubscribed from our notifications. Thank you.</p>
</div>
</body>
</html>
`;
scriptContext.response.write(html);
} else {
throw new Error('Customer ID is missing.');
}
}
} catch (e) {
log.error('Error in Suitelet', e);
// Display the error message
let html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Error</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f9f9f9;
}
.error-container {
text-align: center;
background: #ffffff;
padding: 20px 40px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.error-container h1 {
font-size: 24px;
color: #d9534f;
}
.error-container p {
font-size: 16px;
color: #555555;
}
</style>
</head>
<body>
<div class="error-container">
<h1>Error</h1>
<p>An error occurred: ${e.message}</p>
</div>
</body>
</html>
`;
scriptContext.response.write(html);
}
}
return {
onRequest: onRequest
};
});