Temporary shipping address
By default, Front-Commerce theme manages shipping addresses in the customer account address book. However, it is still possible to manage shipping addresses that will not be saved in the address book.
This feature is only available for Magento1 and Magento2 classic checkout.
Classic checkout
You can test these queries in the GraphQL Playground
This example set an address in customer's address book as the shipping address:
mutation {
setCheckoutShippingInformation(
cartId: "189"
shippingMethod: { carrier_code: "flatrate", method_code: "flatrate" }
shippingAddress: { id: 12 }
) {
success
}
}
This example set a shipping address that will not be saved in the address book:
mutation {
setCheckoutShippingInformation(
cartId: "209"
shippingMethod: { carrier_code: "flatrate", method_code: "flatrate" }
shippingAddress: {
address: {
firstname: "Testing"
lastname: "Front-Commerce"
street: ["42 Street of test"]
postcode: "31000"
city: "Toulouse"
country_id: "FR"
}
}
) {
success
errorMessage
}
}
To achieve this, you will need to remove the check for addresses ids for logged
in customers in the web/theme/pages/Checkout/stepsDefinition.js
:
const steps = [
{
renderProgressItem: () =>
renderProgressItem("address", "user", messages.address),
renderStep: (props) => (
<Address
checkoutType={props.checkoutState.checkoutType}
isEditingBillingAddress={props.checkoutState.isEditingBillingAddress}
isEditingShippingAddress={props.checkoutState.isEditingShippingAddress}
initialAddress={{
billing: props.checkoutState.billingAddress,
shipping: props.checkoutState.shippingAddress,
}}
onChooseAddress={(billing, shipping, email) => {
props.checkoutTransaction(() => {
props.setEmail(email);
props.setBillingAddress(billing);
if (shipping) {
props.setShippingAddress(shipping);
}
});
}}
shouldAskShipping={props.checkoutState.isShippable ?? true}
/>
),
isValid: (checkoutState) => {
- const isValidAddress = (address) =>
- checkoutState.checkoutType === ACCOUNT_TYPE.GUEST
- ? address
- : address?.id;
const hasGuestInfo =
checkoutState.checkoutType !== ACCOUNT_TYPE.GUEST ||
checkoutState.email;
return (
isValidAddress(checkoutState.billingAddress) &&
(!checkoutState.isShippable ||
- isValidAddress(checkoutState.shippingAddress)) &&
hasGuestInfo
);
},
isRelevant: () => true,
isDisplayable: () => true,
},
You must be sure to pass a shipping address without ID to the
ChooseShippingMethod
component in the stepsDefinition.js
file by editing the
Address
component that handle address selection.
<ChooseShippingMethod
// On the line below, if an address has an id, it will use id in address book
// if not it will use the temporary address
shippingAddress={props.checkoutState.shippingAddress}
billingAddress={props.checkoutState.billingAddress}
setShippingAddress={props.setShippingAddress}
setBillingAddress={props.setBillingAddress}
initialShipping={{
shippingMethod: props.checkoutState.shippingMethod,
shippingAdditionalInfo: props.checkoutState.shippingAdditionalInfo,
}}
onChooseShippingMethod={(method) => {
const { additionalData, ...rest } = method;
props.checkoutTransaction(() => {
props.setShippingMethod(rest);
props.setShippingAdditionalInfo(additionalData || {});
});
}}
onChangeShippingAddress={() => props.gotoStepNumber(0)}
/>
Negotiable quote checkout
You will need to override the EnhanceAddress
enhancer, and add an input to the
mutation to specify if the address needs to be save or not. Its original
location is:
modules/front-commerce-b2b2/web/theme/modules/Checkout/NegotiableQuotes/Address/EnhanceAddress.js
makeCommandDispatcher({
setShippingAddress:
(props) =>
({ address, onSuccess }) => {
return {
options: {
mutation: SetNegotiableQuoteShippingAddressMutation,
variables: {
input: {
quoteId: props.negotiableQuoteId,
address: formatCheckoutAddressInput(address),
+ saveInAddressBook: true
},
},
},
In the same file, you will find in the withHandlers
property the
onChooseAddress
method that will call the setShippingAddress
mutation, you
can insert your logic here to tell if you need to save address or not
withHandlers({
onChooseAddress: (props) => (billing, shipping) => {