Re: checkout extensibility error message
I want to override the existing error message on checkout extensibility. I have written code to override existing error message but it is working only when the email is invalid. It is not working when email is blank.
My code :
import {
reactExtension,
useBuyerJourneyIntercept,
useEmail
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function validEmailAddress(email) {
return String(email)
.toLowerCase()
.match(
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
);
}
function Extension() {
const email = useEmail();
useBuyerJourneyIntercept(({ canBlockProgress }) => {
console.log("email1:",email);
if (canBlockProgress && (!email || email.trim() === '')) {
console.log("email2:",email);
return {
behavior: "block",
reason: "Empty email address",
errors: [
{
message: "A valid email address is required to proceed",
target: "$.cart.buyerIdentity.email",
}
],
};
}
if (canBlockProgress && !validEmailAddress(email)) {
return {
behavior: "block",
reason: "Invalid email address",
errors: [
{
message: "A valid email address is required to proceed",
target: "$.cart.buyerIdentity.email",
}
],
};
}
return {
behavior: "allow",
};
});
return null;
}
