Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

PW-8054/Showing address details and payment string in Amazon Pay review page #852

Merged
merged 3 commits into from
Mar 10, 2023
Merged

PW-8054/Showing address details and payment string in Amazon Pay review page #852

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c3a4b95
displayed address details in amazon pay review page, also ran lint
zaiddreakh Mar 9, 2023
c041a3d
changed hard coded values into resource messages
zaiddreakh Mar 9, 2023
3cdd6fa
merge develop
zaiddreakh Mar 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions src/cartridges/int_adyen_SFRA/cartridge/client/default/js/adyenCheckout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,9 @@ $('button[value="submit-payment"]').on('click', () => {
store.paypalTerminatedEarly = false;
}
if (document.querySelector('#selectedPaymentOption').value === 'AdyenPOS') {
document.querySelector('#terminalId').value =
document.querySelector('#terminalList').value;
document.querySelector('#terminalId').value = document.querySelector(
'#terminalList',
).value;
}

if (
Expand Down
7 changes: 5 additions & 2 deletions ...ridges/int_adyen_SFRA/cartridge/client/default/js/adyen_checkout/checkoutConfiguration.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,8 +100,11 @@ function getGooglePayConfig() {
}

function handlePartialPaymentSuccess() {
const { giftCardSelectContainer, giftCardSelect, giftCardsList } =
getGiftCardElements();
const {
giftCardSelectContainer,
giftCardSelect,
giftCardsList,
} = getGiftCardElements();
giftCardSelectContainer.classList.add('invisible');
giftCardSelect.value = null;
giftCardsList.innerHTML = '';
Expand Down
140 changes: 68 additions & 72 deletions ...idges/int_adyen_SFRA/cartridge/client/default/js/adyen_checkout/renderGenericComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,21 +136,18 @@ function setAmazonPayConfig(adyenPaymentMethods) {
if (amazonpay) {
store.checkoutConfiguration.paymentMethodsConfiguration.amazonpay.configuration =
amazonpay.configuration;
store.checkoutConfiguration.paymentMethodsConfiguration.amazonpay.addressDetails =
{
name: `${document.querySelector('#shippingFirstNamedefault')?.value} ${
document.querySelector('#shippingLastNamedefault')?.value
}`,
addressLine1: document.querySelector('#shippingAddressOnedefault')
?.value,
city: document.querySelector('#shippingAddressCitydefault')?.value,
stateOrRegion: document.querySelector('#shippingAddressCitydefault')
?.value,
postalCode: document.querySelector('#shippingZipCodedefault')?.value,
countryCode: document.querySelector('#shippingCountrydefault')?.value,
phoneNumber: document.querySelector('#shippingPhoneNumberdefault')
?.value,
};
store.checkoutConfiguration.paymentMethodsConfiguration.amazonpay.addressDetails = {
name: `${document.querySelector('#shippingFirstNamedefault')?.value} ${
document.querySelector('#shippingLastNamedefault')?.value
}`,
addressLine1: document.querySelector('#shippingAddressOnedefault')?.value,
city: document.querySelector('#shippingAddressCitydefault')?.value,
stateOrRegion: document.querySelector('#shippingAddressCitydefault')
?.value,
postalCode: document.querySelector('#shippingZipCodedefault')?.value,
countryCode: document.querySelector('#shippingCountrydefault')?.value,
phoneNumber: document.querySelector('#shippingPhoneNumberdefault')?.value,
};
}
}

Expand All @@ -163,12 +160,12 @@ function setInstallments(amount) {
?.replace(/\[|]/g, '')
.split(',');
if (minAmount <= amount.value) {
store.checkoutConfiguration.paymentMethodsConfiguration.card.installmentOptions =
{
card: {},
}; // eslint-disable-next-line max-len
store.checkoutConfiguration.paymentMethodsConfiguration.card.installmentOptions.card.values =
helpers.getInstallmentValues(numOfInstallments);
store.checkoutConfiguration.paymentMethodsConfiguration.card.installmentOptions = {
card: {},
}; // eslint-disable-next-line max-len
store.checkoutConfiguration.paymentMethodsConfiguration.card.installmentOptions.card.values = helpers.getInstallmentValues(
numOfInstallments,
);
store.checkoutConfiguration.paymentMethodsConfiguration.card.showInstallmentAmounts = true;
}
} catch (e) {} // eslint-disable-line no-empty
Expand All @@ -177,63 +174,62 @@ function setInstallments(amount) {
/**
* Calls createSession and then renders the retrieved payment methods (including card component)
*/
module.exports.renderGenericComponent =
async function renderGenericComponent() {
if (Object.keys(store.componentsObj).length !== 0) {
await unmountComponents();
}
module.exports.renderGenericComponent = async function renderGenericComponent() {
if (Object.keys(store.componentsObj).length !== 0) {
await unmountComponents();
}

const session = await createSession();
const giftCardsData = await fetchGiftCards();
const session = await createSession();
const giftCardsData = await fetchGiftCards();

store.checkoutConfiguration.session = {
id: session.id,
sessionData: session.sessionData,
imagePath: session.imagePath,
adyenDescriptions: session.adyenDescriptions,
};
store.checkout = await AdyenCheckout(store.checkoutConfiguration);

const { totalDiscountedAmount, giftCards } = giftCardsData;
store.addedGiftCards = giftCards;
if (giftCards?.length) {
const lastGiftCard = giftCards[store.addedGiftCards.length - 1];
store.partialPaymentsOrderObj = giftCardsData.giftCards?.length
? { ...lastGiftCard, totalDiscountedAmount }
: null;
}
store.checkoutConfiguration.session = {
id: session.id,
sessionData: session.sessionData,
imagePath: session.imagePath,
adyenDescriptions: session.adyenDescriptions,
};
store.checkout = await AdyenCheckout(store.checkoutConfiguration);

const { totalDiscountedAmount, giftCards } = giftCardsData;
store.addedGiftCards = giftCards;
if (giftCards?.length) {
const lastGiftCard = giftCards[store.addedGiftCards.length - 1];
store.partialPaymentsOrderObj = giftCardsData.giftCards?.length
? { ...lastGiftCard, totalDiscountedAmount }
: null;
}

setCheckoutConfiguration(store.checkout.options);
setInstallments(store.checkout.options.amount);
setAmazonPayConfig(store.checkout.paymentMethodsResponse);
document.querySelector('#paymentMethodsList').innerHTML = '';
setCheckoutConfiguration(store.checkout.options);
setInstallments(store.checkout.options.amount);
setAmazonPayConfig(store.checkout.paymentMethodsResponse);
document.querySelector('#paymentMethodsList').innerHTML = '';

renderStoredPaymentMethods(
store.checkout.paymentMethodsResponse,
session.imagePath,
);
renderPaymentMethods(
store.checkout.paymentMethodsResponse,
session.imagePath,
session.adyenDescriptions,
);
renderPosTerminals(session.adyenConnectedTerminals);
renderStoredPaymentMethods(
store.checkout.paymentMethodsResponse,
session.imagePath,
);
renderPaymentMethods(
store.checkout.paymentMethodsResponse,
session.imagePath,
session.adyenDescriptions,
);
renderPosTerminals(session.adyenConnectedTerminals);

renderGiftCardLogo(session.imagePath);
renderGiftCardLogo(session.imagePath);

if (store.addedGiftCards?.length) {
applyGiftCards();
}
if (store.addedGiftCards?.length) {
applyGiftCards();
}

attachGiftCardAddButtonListener();
attachGiftCardAddButtonListener();

const firstPaymentMethod = document.querySelector(
'input[type=radio][name=brandCode]',
);
firstPaymentMethod.checked = true;
helpers.displaySelectedMethod(firstPaymentMethod.value);
const firstPaymentMethod = document.querySelector(
'input[type=radio][name=brandCode]',
);
firstPaymentMethod.checked = true;
helpers.displaySelectedMethod(firstPaymentMethod.value);

helpers.createShowConfirmationForm(
window.ShowConfirmationPaymentFromComponent,
);
};
helpers.createShowConfirmationForm(
window.ShowConfirmationPaymentFromComponent,
);
};
52 changes: 52 additions & 0 deletions src/cartridges/int_adyen_SFRA/cartridge/client/default/js/amazonPayExpressPart2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,56 @@ function saveShopperDetails(details) {
});
}

function constructAddress(shopperDetails) {
const addressKeys = Object.keys(shopperDetails.shippingAddress);
const addressValues = Object.values(shopperDetails.shippingAddress);
let addressStr = `${shopperDetails.shippingAddress.name}\n`;
for (let i = 0; i < addressKeys.length; i += 1) {
if (addressValues[i] && addressKeys[i] !== 'name') {
addressStr += `${addressValues[i]} `;
}
}
return addressStr;
}

function positionElementBefore(elm) {
const addressDetails = document.querySelector('#amazonPayAddressDetails');
const containerNode = addressDetails.parentNode.parentNode.parentNode;
containerNode.insertBefore(addressDetails, document.querySelector(elm));
}

function wrapChangeAddressButton() {
// hide component button and use custom "Edit" buttons instead
const changeDetailsBtn = document.getElementsByClassName(
'adyen-checkout__button adyen-checkout__button--ghost adyen-checkout__amazonpay__button--changeAddress',
)[0];
changeDetailsBtn.classList.add('invisible');
const editAddressBtns = document.querySelectorAll('.editAddressBtn');
editAddressBtns.forEach((btn) => {
btn.addEventListener('click', () => {
changeDetailsBtn.click();
});
});
}

function showAddressDetails(shopperDetails) {
const addressText = constructAddress(shopperDetails);

const addressElement = document.querySelector('#address');
const paymentDiscriptorElement = document.querySelector('#paymentStr');
addressElement.innerText = addressText;
paymentDiscriptorElement.innerText = shopperDetails.paymentDescriptor;

positionElementBefore('.coupons-and-promos');

wrapChangeAddressButton();

const payBtn = document.getElementsByClassName(
'adyen-checkout__button adyen-checkout__button--standalone adyen-checkout__button--pay',
)[0];
payBtn.style.background = '#00a1e0';
}

async function mountAmazonPayComponent() {
const amazonPayNode = document.getElementById('amazon-container');
const checkout = await AdyenCheckout(window.Configuration);
Expand All @@ -40,6 +90,8 @@ async function mountAmazonPayComponent() {

const shopperDetails = await amazonPayComponent.getShopperDetails();
saveShopperDetails(shopperDetails);

showAddressDetails(shopperDetails);
} catch (e) {
//
}
Expand Down
26 changes: 13 additions & 13 deletions src/cartridges/int_adyen_SFRA/cartridge/client/default/js/applePayExpress.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,9 @@ function callPaymentFromComponent(data, resolveApplePay, rejectApplePay) {
success(response) {
helpers.createShowConfirmationForm(window.showConfirmationAction);
helpers.setOrderFormData(response);
document.querySelector('#additionalDetailsHidden').value =
JSON.stringify(data);
document.querySelector('#additionalDetailsHidden').value = JSON.stringify(
data,
);
handleApplePayResponse(response, resolveApplePay, rejectApplePay);
},
}).fail(() => {
Expand All @@ -126,10 +127,9 @@ function callPaymentFromComponent(data, resolveApplePay, rejectApplePay) {
if (isSafari) {
initializeCheckout()
.then(() => {
const applePayPaymentMethod =
checkout.paymentMethodsResponse.paymentMethods.find(
(pm) => pm.type === APPLE_PAY,
);
const applePayPaymentMethod = checkout.paymentMethodsResponse.paymentMethods.find(
(pm) => pm.type === APPLE_PAY,
);

if (!applePayPaymentMethod) {
updateLoadedExpressMethods(APPLE_PAY);
Expand Down Expand Up @@ -190,10 +190,9 @@ if (isSafari) {
},
onShippingMethodSelected: async (resolve, reject, event) => {
const { shippingMethod } = event;
const matchingShippingMethod =
shippingMethodsData.shippingMethods.find(
(sm) => sm.ID === shippingMethod.identifier,
);
const matchingShippingMethod = shippingMethodsData.shippingMethods.find(
(sm) => sm.ID === shippingMethod.identifier,
);
const calculationResponse = await fetch(
`${window.calculateAmountUrl}?${new URLSearchParams({
shipmentUUID: matchingShippingMethod.shipmentUUID,
Expand Down Expand Up @@ -246,13 +245,14 @@ if (isSafari) {
},
);
if (calculationResponse.ok) {
const shippingMethodsStructured =
shippingMethodsData.shippingMethods.map((sm) => ({
const shippingMethodsStructured = shippingMethodsData.shippingMethods.map(
(sm) => ({
label: sm.displayName,
detail: sm.description,
identifier: sm.ID,
amount: `${sm.shippingCost.value}`,
}));
}),
);
const newCalculation = await calculationResponse.json();
const applePayShippingContactUpdate = {
newShippingMethods: shippingMethodsStructured,
Expand Down
51 changes: 25 additions & 26 deletions src/cartridges/int_adyen_SFRA/cartridge/client/default/js/commons/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,33 +31,32 @@ module.exports.fetchGiftCards = async function fetchGiftCards() {
});
};

module.exports.checkIfExpressMethodsAreReady =
function checkIfExpressMethodsAreReady() {
const expressMethodsConfig = {
applepay: window.isApplePayExpressEnabled === 'true',
amazonpay: window.isAmazonPayExpressEnabled === 'true',
};
let enabledExpressMethods = [];
Object.keys(expressMethodsConfig).forEach((key) => {
if (expressMethodsConfig[key]) {
enabledExpressMethods.push(key);
}
});
enabledExpressMethods = enabledExpressMethods.sort();
const loadedExpressMethods =
window.loadedExpressMethods && window.loadedExpressMethods.length
? window.loadedExpressMethods.sort()
: [];
const areAllMethodsReady =
JSON.stringify(enabledExpressMethods) ===
JSON.stringify(loadedExpressMethods);
if (!enabledExpressMethods.length || areAllMethodsReady) {
document
.getElementById('express-loader-container')
?.classList.add('hidden');
document.getElementById('express-container')?.classList.remove('hidden');
}
module.exports.checkIfExpressMethodsAreReady = function checkIfExpressMethodsAreReady() {
const expressMethodsConfig = {
applepay: window.isApplePayExpressEnabled === 'true',
amazonpay: window.isAmazonPayExpressEnabled === 'true',
};
let enabledExpressMethods = [];
Object.keys(expressMethodsConfig).forEach((key) => {
if (expressMethodsConfig[key]) {
enabledExpressMethods.push(key);
}
});
enabledExpressMethods = enabledExpressMethods.sort();
const loadedExpressMethods =
window.loadedExpressMethods && window.loadedExpressMethods.length
? window.loadedExpressMethods.sort()
: [];
const areAllMethodsReady =
JSON.stringify(enabledExpressMethods) ===
JSON.stringify(loadedExpressMethods);
if (!enabledExpressMethods.length || areAllMethodsReady) {
document
.getElementById('express-loader-container')
?.classList.add('hidden');
document.getElementById('express-container')?.classList.remove('hidden');
}
};

module.exports.updateLoadedExpressMethods = function updateLoadedExpressMethods(
method,
Expand Down
13 changes: 13 additions & 0 deletions src/cartridges/int_adyen_SFRA/cartridge/templates/default/cart/checkoutButtons.isml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,19 @@
assets.addJs('/js/amazonPayExpressPart2.js');
</isscript>
<input id="adyenStateData" type="hidden" name="${adyenPaymentFields.adyenStateData.htmlName}"/>
<div id="amazonPayAddressDetails">
<div class="addressHeaders">
<label>${Resource.msg('amazonpay.paymentMethod', 'adyen', null)}</label>
<button class="editAddressBtn">${Resource.msg('amazonpay.editButton', 'adyen', null)}</button>
</div>
<address id="paymentStr"></address>
<div class="addressHeaders">
<label>${Resource.msg('amazonpay.shippingAddress', 'adyen', null)}</label>
<button class="editAddressBtn">${Resource.msg('amazonpay.editButton', 'adyen', null)}</button>
</div>
<address id="address"></address>
</div>

<div id="amazon-container"></div>
<iselse>
<script type="text/javascript">
Expand Down
Loading