So, can we connect on Google Meet or is there any other way to connect? and below is my checkout UI extension code -
import {
extension,
Banner,
BlockStack,
Button,
TextField,
Heading,
Text,
InlineStack
} from "@shopify/ui-extensions/checkout";
import Cookies from "js-cookie";
import createApp from "@shopify/app-bridge";
import { Cart } from "@shopify/app-bridge/actions";
import jwtDecode from "jwt-decode";
// 1. Choose an extension target
export default extension(
"purchase.checkout.shipping-option-list.render-after",
(root, api) => {
let inputField1Value = "";
let companyNameValue = "";
let locationValue = "";
const messageContainer = root.createComponent(BlockStack, { spacing: "loose" }); // Placeholder for messages
// Use Shopify's storage API
const saveToStorage = async (key, value) => {
try {
// Use the metafields API to store data
await api.storage.write(key, value);
console.log(`Saved ${key} to storage:`, value);
} catch (error) {
console.error(`Error saving ${key} to storage:`, error);
}
};
const getFromStorage = async (key) => {
try {
const value = await api.storage.read(key);
console.log(`Retrieved ${key} from storage:`, value);
return value;
} catch (error) {
console.error(`Error reading ${key} from storage:`, error);
return null;
}
};
async function onButtonClick() {
let apiSession = api;
const taxValue = apiSession.cost.totalTaxAmount.current.amount;
const shopStoreFrontUrl = apiSession.shop.myshopifyDomain;
const countryCodeForCouponApply = api.shippingAddress.current?.countryCode
const checkoutId = apiSession.checkoutToken?.current
console.log("text amount ---", apiSession.applyCartLinesChange())
console.log("lines ---", api.lines);
let sessionTax = await api.cost.totalTaxAmount.current.amount;
// console.log("Tax Amount -----------",apiSession.cost.totalTaxAmount.current.amount);
console.log("apiSession -----------",apiSession);
console.log("taxValue -----------",taxValue);
try {
const response = await fetch(apiUrl);
if (!response.ok) throw new Error("API request failed");
const responseData = await response.json();
const discountCode = responseData.data;
if (responseData.errorCode == 200 || responseData.errorCode == 216 || responseData.errorCode == 218 || responseData.errorCode == 219) {
if(countryCodeForCouponApply != "DE"){
await api.applyDiscountCodeChange({
type: "addDiscountCode",
code: responseData.data,
});
// Save values to storage instead
await saveToStorage('discountCode', responseData.data);
}
// Create the note content including both VAT ID and company name
const noteContent = `local-vat-id: ${inputField1Value}, vat-company: ${companyNameValue}`;
await api.applyNoteChange({
type: "updateNote",
note: noteContent,
});
messageContainer.replaceChildren(
root.createComponent(
BlockStack,
{ border: "dotted", padding: "tight" },
[
// root.createComponent(Heading, { level: 3 }, "Success Validation"),
root.createComponent(
Banner,
{ title: "Success", status: "success" },
"VAT validation passed successfully!"
),
]
)
);
} else {
messageContainer.replaceChildren(
root.createComponent(
BlockStack,
{ border: "dotted", padding: "tight" },
[
// root.createComponent(Heading, { level: 3 }, "Validation Failed"),
root.createComponent(
Banner,
{ title: "Error", status: "critical" },
`Validation failed: ${responseData.message}`
),
]
)
);
}
} catch (error) {
console.error("Error fetching data:", error);
messageContainer.replaceChildren(
root.createComponent(
BlockStack,
{ border: "dotted", padding: "tight" },
[
root.createComponent(Heading, { level: 3 }, "VAT Validation"),
root.createComponent(
Banner,
{ title: "Error", status: "critical" },
"An error occurred while EU VAT ID validation."
),
]
)
);
}
}
// Function to render the VAT Validation section based on the provinceCode
const renderVATValidationSection = async (countryCode) => {
const validCountryCodes = [
"AT", "BE", "BG", "HR", "CY", "CZ", "DK", "EE", "FI", "FR",
"DE", "GR", "HU", "IE", "IT", "LV", "LT", "LU", "MT", "NL",
"PL", "PT", "RO", "SK", "SI", "ES", "SE", "IN"
];
// store country code for validatedate the discount for germany only
if (!validCountryCodes.includes(countryCode)) {
// get discount Code
const savedValue = await getFromStorage('discountCode');
console.log('Saved discount code ANAS:', savedValue);
try {
await api.applyGiftCardChange({
type: "removeGiftCard",
code: savedValue
});
console.log("Discount code removed successfully.", savedValue);
} catch (error) {
console.error("Error removing discount code:", error);
}
root.replaceChildren(
root.createComponent(
Banner,
{ title: "Notice", status: "info" },
"EU VAT ID validation is not required for your country."
)
);
} else {
// Create the VAT Validation section
const vatValidationSection = root.createComponent(
BlockStack,
{ border: "dotted", padding: "tight" },
[
root.createComponent(Heading, { level: 3 }, "EU VAT ID validation"),
root.createComponent(
Text,
{ size: "small", appearance: "subdued" }, // Small, subtle text style
"Please enter your VAT ID below for validation." // Subheading text
),
root.createComponent(TextField, {
label: "VAT ID",
onInput: (value) => {
inputField1Value = value;
},
}),
root.createComponent(TextField, {
label: "Company Name",
onInput: (value) => {
companyNameValue = value;
},
}),
root.createComponent(TextField, {
label: "Location",
onInput: (value) => {
locationValue = value;
},
}),
messageContainer,
root.createComponent(
Button,
{
onPress: () => onButtonClick(),
},
"EU VAT ID Check"
),
]
);
root.replaceChildren(vatValidationSection);
}
};
api.lines.subscribe((lines) => {
console.log("lines data:", lines); // Debugging
});
api.lines.subscribe((query) => {
console.log("lines query:", query[0].merchandise); // Debugging
});
api.instructions.subscribe((instructions) => {
if (!api.instructions.current.discounts.canUpdateDiscountCodes) {
root.replaceChildren(
root.createComponent(
Banner,
{ title: "checkout-extension-1", status: "warning" },
api.i18n.translate("attributeChangesAreNotSupported")
)
);
} else {
// Create the VAT Validation section & Get the initial countryCode
const countryCode = api.shippingAddress.current?.countryCode || null;
renderVATValidationSection(countryCode);
// Listen for changes to the shipping address (countryCode)
api.shippingAddress.subscribe((newAddress) => {
const newCountryCode = newAddress?.countryCode || null;
renderVATValidationSection(newCountryCode);
});
}
});
}
);