This transaction process enables price negotiation on your marketplace. If you want to use this process in your Sharetribe Web Template, you will need to make the following modifications:
You can see the instructions in this tutorial article. Once you have pushed the process into your marketplace, you will be able to see it in Console > Build > Transaction processes.
There are a number of configurations in the template that are necessary for taking the new process into use.
- Add a new listing type in src/config/configListing.js, and add this negotiation process as the transaction type.
- Add a transactionProcessNegotiation.js file to the src/transactions folder. The file should describe the states and transitions of the process. You can model this file based on this example, or base it on transactionProcessBooking.js in the same folder.
- Modify transaction.js file in the same folder to return the negotiation process information when necessary
- Update isBookingProcess function in transaction.js to include this process.
- Add a src/containers/TransactionPage/TransactionPage.stateDataNegotiation.js file to return the correct state information for each state of the process. You can model this file based on this example, or base it on TransactionPage.stateDataBooking.js file in the same folder.
- Use TransactionPage.stateDataNegotiation.js in the TransactionPage.stateData.js file to return state data for the correct process.
- Add a src/containers/InboxPage/InboxPage.stateDataNegotiation.js file to return the correct state information for each state of the process. You can model this file based on this example, or base it on InboxPage.stateDataBooking.js in the same folder.
- Use InboxPage.stateDataNegotiation.js in the InboxPage.stateData.js file to return state data for the correct process.
- Add process-specific microcopy to your microcopy file.
You will need to modify the user interface to handle the price negotiation process.
- Add a text input for a suggested total price on listing page, and show it for listings with negotiation as listing type.
- Add a price negotiation form element (text input + button) to the transaction page, so that when the participant has received an offer, they can make a counter offer.
- Show the action buttons for accepting and declining a transaction to the customer when the provider has made a counter offer.
In the template, CheckoutPage.js is configured to handle payments. Therefore, the simplest way to handle negotiation is to add a logic that triggers the transaction for the negotiation process directly from the listing page, and then redirects to TransactionPage.js. That way, the negotiation can happen on transaction page. You will need to trigger a transition each time one of the transaction participants makes an offer, and also when one of the participants accepts or declines the transaction.
Once the transaction price has been accepted, redirect the customer to CheckoutPage.js to complete the payment. You will need to modify the fnRequestPayment
function in handlePaymentIntent
to trigger the correct transition for the negotiation process.
You will also need to modify the line item calculation used for the transaction. You will need to create a line item suggested-adjustment
that reduces the total to the suggested number. The transaction process email templates expect a line item with code line-item/suggested-adjustment
, so if your line item code is different, you will need to update the email templates as well.
For instance, if the default transaction total would be $250 and the suggested total is $200, the suggested-adjustment
line item would have quantity 1 and unitPrice -$50.
// Returns the adjustment as negative if it is a discount, and
// positive if it is an extra payment.
exports.resolveSuggestedAdjustment = (order, negotiatedTotal) => {
if (!negotiatedTotal) {
return null;
}
const orderTotalAmount = order.unitPrice.amount * order.quantity;
return new Money(negotiatedTotal.amount - orderTotalAmount, negotiatedTotal.currency);
}
const suggestedAdjustment = resolveSuggestedAdjustment(order, orderData.negotiatedTotal)
const suggestedAdjustmentLineItem = suggestedAdjustment ? [{
code: 'line-item/suggested-adjustment',
quantity: 1,
unitPrice: suggestedAdjustment,
includeFor: ['customer', 'provider'],
}] : [];
By default, the web template shows a provider notification when they have a transaction to accept. For the negotiation process, you will need to add a logic to src/ducks/user.duck.js to fetch both customer and provider transactions where the next transitions require user action. You then need to add the notifications to src/containers/TopbarContainer/TopbarContainer.js and src/containers/InboxPage/InboxPage.js.
Customer action is required when the provider has made a counter offer, or when the provider has accepted the transaction and the customer needs to initiate manual payment. Provider action is needed when the customer has made an offer.