{"type":"doc","content":[{"type":"paragraph","content":[{"text":"Repos that we’ll change:","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Whitelabel: ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://github.com/rbilabs/intl-whitelabel-app"}}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Figma: ","type":"text"},{"type":"mention","attrs":{"id":"640623fd15d668edd8ef44b4","text":"@Schroer, Gabriel (Deactivated)"}},{"text":" ","type":"text"}]},{"type":"rule"},{"type":"paragraph","content":[{"text":"Task summary - Whitelabel:","type":"text","marks":[{"type":"strong"}]}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"minLevel":{"value":"2"},"maxLevel":{"value":"6"},"include":{"value":""},"outline":{"value":"false"},"indent":{"value":""},"exclude":{"value":""},"type":{"value":"list"},"class":{"value":""},"printable":{"value":"false"}},"macroMetadata":{"macroId":{"value":"d0b1a711-0617-4884-8723-e9514dc8017f"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"d38e1798-4578-434e-af1c-617a15923210"}},{"type":"rule"},{"type":"heading","attrs":{"level":1},"content":[{"text":"Components tree architecture","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":2280,"id":"bbe20faa-ae66-4b07-8d49-db1136d3c660","collection":"contentId-4362960979","type":"file","height":1392}},{"type":"caption","content":[{"text":"Schema to show how the payment method options will behavior in the application","type":"text"}]}]},{"type":"rule"},{"type":"heading","attrs":{"level":1},"content":[{"text":"Business rules","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The new payment method should only be available if the user selects “delivery mode” inside the Whitelabel App","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The confirmation/tracking page should show the correct text in the payment reminder for this new payment method","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The receipt email should show the correct payment option for this new payment method","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The new method should be available in the user account methods list","type":"text"}]}]}]},{"type":"rule"},{"type":"heading","attrs":{"level":1},"content":[{"text":"Tasks breakdown","type":"text"}]},{"type":"paragraph","content":[{"text":"The solution was based on the Sodexo Cheque Gourmet Voucher implementation: ","type":"text"},{"text":"https://github.com/rbilabs/intl-whitelabel-app/pull/686/files","type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/rbilabs/intl-whitelabel-app/pull/686/files"}}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Task 1: Create a new feature flag","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Flag should be added in: ","type":"text"},{"text":"frontend/src/utils/launchdarkly/flags.ts","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"Suggestion name: ","type":"text"},{"text":"enable-payment-on-delivery-card","type":"text","marks":[{"type":"code"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The user can pay using credit or debit mode, so “card” is a generic name","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"https://app.launchdarkly.com/intl-guest-app/dev-plk-es/features/enable-payment-on-delivery-card-paycomet/targeting","type":"text","marks":[{"type":"underline"},{"type":"link","attrs":{"href":"https://app.launchdarkly.com/intl-guest-app/dev-plk-es/features/enable-payment-on-delivery-card-paycomet/targeting"}}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Task 2: Add the new payment method in the payment state and structure","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Create a new placeholder for the new payment method","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The idea is to send this new payment method identified as ","type":"text"},{"text":"cash","type":"text","marks":[{"type":"strong"}]}]}]}]}]}]},{"type":"expand","attrs":{"title":"frontend/src/state/payment/constants.ts"},"content":[{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"// Replace this name for what we decide\nexport const NEW_PAYMENT_METHOD_PLACEHOLDER: IPaymentMethod = {\n sodexo: false,\n fdAccountId: 'CASH',\n accountIdentifier: 'NEW_PAYMENT_METHOD', // TO BE DEFINED\n paymentMethodBrand: 'NEW_PAYMENT_METHOD', // TO BE DEFINED\n chaseProfileId: null,\n credit: null,\n prepaid: null,\n paypalIdentifier: null,\n ideal: null,\n paypal: false,\n};","type":"text"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add the new payment method in ","type":"text"},{"text":"getPaymentMethodsState","type":"text","marks":[{"type":"code"}]},{"text":":","type":"text"}]}]}]},{"type":"expand","attrs":{"title":"frontend/src/state/payment/hooks/getPaymentMethodsState/index.ts"},"content":[{"type":"paragraph","content":[{"text":"Update the interface:","type":"text"}]},{"type":"paragraph","content":[{"text":"frontend/src/state/payment/hooks/types.ts","type":"text","marks":[{"type":"code"}]},{"text":":","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"export interface ISetupPaymentMethodState {\n enableNewMethod: boolean;\n}","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Adjust the ","type":"text"},{"text":"getPaymentMethodsState","type":"text","marks":[{"type":"code"}]},{"text":":","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"export const getPaymentMethodsState = ({\n // rest of the code\n enableNewMethod,\n}: ISetupPaymentMethodState) => {\n // rest of the code\n\n if (enableNewMethod) {\n availablePaymentMethodList.push(NEW_PAYMENT_METHOD_PLACEHOLDER);\n }\n // rest of the code\n};","type":"text"}]},{"type":"paragraph"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Adjust the payment hook","type":"text"}]}]}]},{"type":"expand","attrs":{"title":"frontend/src/state/payment/hooks/use-payment.tsx"},"content":[{"type":"paragraph","content":[{"text":"Update cash account variable:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"const cashAccount: IPaymentMethod = {\n // rest of the code\n newMethod: null,\n};","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Add the new feature flag here and then pass through the ","type":"text"},{"text":"getPaymentMethodState","type":"text","marks":[{"type":"code"}]},{"text":":","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"const usePayment = ({\n // rest of the code\n const enableNewMethod = useFlag(LaunchDarklyFlag.ENABLE_CREDIT_CARD_AT_HOME_PAYCOMET); // new line\n \n \n const initPaymentMethods = useCallback(() => {\n const {\n availablePaymentMethodList,\n validDefaultPaymentMethodId,\n validDefaultReloadPaymentMethodId,\n } = getPaymentMethodsState({\n enableNewMethod, // new line here\n });\n },\n []\n );\n});","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Adjust the unit tests mocking the new flag where necessary: ","type":"text"},{"text":"frontend/src/state/payment/tests/use-payment.test.tsx","type":"text","marks":[{"type":"code"}]}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Adjust ","type":"text"},{"text":"use-order-payment","type":"text","marks":[{"type":"code"}]},{"text":" hook","type":"text"}]}]}]},{"type":"expand","attrs":{"title":"frontend/src/pages/cart/payment/order-payment/use-order-payment.ts"},"content":[{"type":"paragraph","content":[{"text":"Add a new state for the new payment method:","type":"text"}]},{"type":"paragraph","content":[{"text":"const [isPaycometNewMethodSelected, setIsPaycometNewMethodSelected] = useState('');","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Update the ","type":"text"},{"text":"handlePaymentMethodSelected","type":"text","marks":[{"type":"code"}]},{"text":" adding the new method:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":" const handlePaymentMethodSelected = (newFdAccountId?: string) => {\n if (!newFdAccountId) {\n payment.setCheckoutPaymentMethodId('');\n return;\n }\n \n // rest of the code\n setIsPaycometNewMethodSelected(''); // New line\n };","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Clear our new method in the ","type":"text"},{"text":"useEffect","type":"text","marks":[{"type":"code"}]},{"text":" logic that already exist:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":" // when checkout payment method have been updated from payment context\n // the flags to show add new credit card or add gift card\n // have to be updated.\n useEffect(() => {\n // rest of the code\n setIsPaycometNewMethodSelected('');\n }\n }, [setCheckoutPaymentMethodId, checkoutPaymentMethodId]);","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Update the ","type":"text"},{"text":"placeOrder","type":"text","marks":[{"type":"code"}]},{"text":" function to deal with the new method:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Option 1:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Adjust the if condition for ","type":"text"},{"text":"paycomet","type":"text","marks":[{"type":"strong"}]},{"text":" processor to deal with the new method:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"} else if (payment.isPaycomet) {\n // rest of the code\n if (payCometValues.isPaypal) {\n // rest of the code\n } else {\n // add a new condition here for our new method, like the sodexo one\n let paymentMethodBrandValue = undefined;\n if (isPaycometSodexoMethodSelected || isPaycometChequeGourmetMethodSelected) {\n paymentMethodBrandValue = isPaycometSodexoMethodSelected\n ? PaymentMethodBrand.SODEXO\n : PaymentMethodBrand.CHEQUE_GOURMET;\n }\n commitInput = {\n // rest of the code\n };\n }\n // rest of the code","type":"text"}]},{"type":"paragraph"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Option 2:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Separate this logic in another reusable block and then pass the new ","type":"text"},{"text":"paymentMethodBrand","type":"text","marks":[{"type":"code"}]},{"text":" (as a kind of builder pattern or something similar). We can discuss that on an A&D section.","type":"text"}]}]}]}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Adjust the ","type":"text"},{"text":"processOrderWithAccount","type":"text","marks":[{"type":"code"}]},{"text":" function for the new method like this Sodexo example:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":" // rest of the code\n const isPaymentWithVoucher =\n paymentAccount.paymentMethodBrand === PaymentMethodBrand.SODEXO_VOUCHER ||\n paymentAccount.paymentMethodBrand === PaymentMethodBrand.CHEQUE_GOURMET_VOUCHER;\n if (payment.checkoutPaymentMethodId === CASH_ACCOUNT_IDENTIFIER || isPaymentWithVoucher) {\n const paymentDetails: IPayment = {\n cashPayment: true,\n fullName,\n paymentMethodBrand: paymentAccount?.paymentMethodBrand ?? undefined,\n };\n\n if (payment.isVrPayment) {\n // The GraphQL endpoint for VR Payment expects this object even\n // for Cash orders, otherwise the order creation fails\n paymentDetails.vrPaymentInput = {\n merchantAccount: '',\n pspReference: '',\n storePaymentMethod: true,\n };\n }\n\n return commitOrder({\n ...commitInput,\n creditType: CASH_ACCOUNT_IDENTIFIER,\n payment: paymentDetails,\n });\n }","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Adjust the ","type":"text"},{"text":"handleOrderCommit","type":"text","marks":[{"type":"code"}]},{"text":" to place the order with the new method:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":" // Add new condition here as the isPaymentWithVoucher from the Sodexo example\n \n const isPaymentWithVoucher = isPaymentWithSodexoVoucher || isPaymentWithChequeGourmetVoucher;\n\n if (\n (showAddPaymentMethod ||\n isAdyenBlikMethodSelected ||\n reloadAddPaymentMethod ||\n isPayPalRegistration) &&\n !(selectedPaymentMethod?.cash || isPaymentWithVoucher || payment.isFreeOrderPayment)\n ) {\n await placeOrder();\n } else {\n await placeOrderWithAccount();\n }","type":"text"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Extend the ","type":"text"},{"text":"getCurrentSelectedMethodType","type":"text","marks":[{"type":"code"}]},{"text":":","type":"text"}]}]}]},{"type":"expand","attrs":{"title":"frontend/src/components/payment-method/utils/get-current-selected-method-type.ts"},"content":[{"type":"paragraph","content":[{"text":"Add the new payment in the enum ","type":"text"},{"text":"CurrentSelectedMethodType","type":"text","marks":[{"type":"code"}]},{"text":":","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"frontend/src/components/payment-method/types.ts","type":"text","marks":[{"type":"code"}]},{"text":": ","type":"text"}]}]}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"export enum CurrentSelectedMethodType {\n // rest of the code\n ADD_NEW_PAYMENT_NEW_METHOD = 'addNewPaymentNewMethod',\n}","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Adjust the ","type":"text"},{"text":"IPaymentMethodProps","type":"text","marks":[{"type":"code"}]},{"text":":","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"export interface IPaymentMethodProps {\n // rest of the code\n setIsPaycometNewMethodSelected?: Dispatch>;\n isPaycometNewMethodSelected?: string;\n}","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Add the new condition in ","type":"text"},{"text":"getCurrentSelectedMethodType","type":"text","marks":[{"type":"code"}]},{"text":":","type":"text"}]},{"type":"codeBlock","content":[{"text":"\ntype GetCurrentSelectedMethodTypeParams = {\n // rest of the code\n isPaycometNewMethodSelected?: string;\n};\n\nfunction getCurrentSelectedMethodType({\n // rest of the code\n isPaycometNewMethodSelected\n}: GetCurrentSelectedMethodTypeParams): CurrentSelectedMethodType {\n let currentSelectedMethodType = CurrentSelectedMethodType.ADD_NEW_PAYMENT_METHOD;\n // rest of the code\n if (isPaycometNewMethodSelected === 'card') {\n currentSelectedMethodType = CurrentSelectedMethodType.ADD_NEW_PAYMENT_NEW_METHOD;\n }\n // rest of the code\n}","type":"text"}]},{"type":"paragraph"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Adjust order-payment comp:","type":"text"}]}]}]},{"type":"expand","attrs":{"title":"frontend/src/pages/cart/payment/order-payment/payment.tsx"},"content":[{"type":"paragraph","content":[{"text":"Return the new create state from ","type":"text"},{"text":"useOrderPayment","type":"text","marks":[{"type":"code"}]},{"text":":","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":" const {\n // rest of the code\n isPaycometNewMethodSelected, // new line here\n } = useOrderPayment({\n serverOrder,\n onPriceOrder,\n enableOrderTimedFire,\n });","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Pass the returned value to the ","type":"text"},{"text":"getCurrentSelectedMethodType","type":"text","marks":[{"type":"code"}]},{"text":":","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":" const currentSelectedMethodType = getCurrentSelectedMethodType({\n isPaycometNewMethodSelected,\n });","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Pass the new method to the ","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":" comp:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"","type":"text"}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Task 3: Add the new method in payment-method structure","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Create new styled component for the new payment method","type":"text"}]}]}]},{"type":"expand","attrs":{"title":"frontend/src/components/payment-method/styled.ts"},"content":[{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"// ... rest of the file\nexport const StyledNewMethodCardIcon = styled(IconNewMethod)`\n ${cardIconSize}\n`;","type":"text"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add a new type","type":"text"}]}]}]},{"type":"expand","attrs":{"title":"frontend/src/components/payment-method/payment-method-options/types.ts"},"content":[{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"export type PaymentMethodOptionProps = {\n // ... rest of the file\n setIsPaycometNewMethodSelected?: Dispatch>;\n};","type":"text"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":" Add the new method in payment-method comp","type":"text"}]}]}]},{"type":"expand","attrs":{"title":"workspaces/frontend/src/components/payment-method/index.tsx"},"content":[{"type":"paragraph","content":[{"text":"Add new props in ","type":"text"},{"text":"PaymentMethod","type":"text","marks":[{"type":"code"}]},{"text":":","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"\nfunction PaymentMethod({\n // rest of the code\n isPaycometNewMethodSelected,\n setIsPaycometNewMethodSelected,\n}: IPaymentMethodProps) {\n // rest of the code\n \n // pass the new prop in the getCurrentSelectedMethodType\n const currentSelectedMethodType = getCurrentSelectedMethodType({\n isPaycometNewMethodSelected\n });\n});","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Create new item inside ","type":"text"},{"text":"PaymentMethod","type":"text","marks":[{"type":"code"}]},{"text":" comp:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"text":"// ... rest of the file\nconst SelectedNewMethodOptionItem = (\n }\n onClick={getSelectedMethodClickHandler()}\n selected\n />\n);","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Add the new method in the map structure:","type":"text"}]},{"type":"codeBlock","content":[{"text":" const CurrentSelectedMethodMap = {\n // ... rest of the file\n [CurrentSelectedMethodType.ADD_NEW_PAYMENT_METHOD]: SelectedNewMethodOptionItem,\n };","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Pass the new prop in the ","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":" comp:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":" ","type":"text"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add the new method in payment-method-options comp","type":"text"}]}]}]},{"type":"expand","attrs":{"title":"frontend/src/components/payment-method/payment-method-options/payment-method-options.tsx"},"content":[{"type":"paragraph","content":[{"text":"Add the new prop in ","type":"text"},{"text":"PaymentMethodOptions","type":"text","marks":[{"type":"code"}]},{"text":" comp:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"function PaymentMethodOptions({\n // .. rest of the file\n setIsPaycometNewMethodSelected\n}: PaymentMethodOptionProps) {\n const enableNewMethod = useFlag(LaunchDarklyFlag.ENABLE_CREDIT_CARD_AT_HOME_PAYCOMET); // new line\n\n});","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Add new condition in ","type":"text"},{"text":"handleUnselectedMethodClick","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"handleAddNewCardOptionClick","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"handleAddNewGiftCardOptionClick","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"handlePaypalOptionClick","type":"text","marks":[{"type":"code"}]},{"text":" and ","type":"text"},{"text":"handleAdyenIdealOptionClick","type":"text","marks":[{"type":"code"}]},{"text":" to clear our new state:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":" if (setIsPaycometSodexoOptionSelected) {\n setIsPaycometNewMethodSelected('');\n }","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Add a new handle for our new method (using useCallback) where we’ll clear the other methods and set your:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":" const handleNewMethodOptionClick = useCallback(\n (e: React.FormEvent, newMethodType: string) => {\n e.preventDefault();\n setIsAddNewCardOptionSelected(false);\n setIsAddNewGiftCardOptionSelected(false);\n if (setIsPaycometPaypalOptionSelected) {\n setIsPaycometPaypalOptionSelected(false);\n }\n if (setIsAdyenIdealOptionSelected) {\n setIsAdyenIdealOptionSelected(false);\n }\n if (setIsAdyenBlikOptionSelected) {\n setIsAdyenBlikOptionSelected(false);\n }\n if (setIsPaycometSodexoOptionSelected) {\n setIsPaycometSodexoOptionSelected('');\n }\n if (setIsPaycometSodexoOptionSelected) {\n setIsPaycometSodexoOptionSelected('');\n }\n // our new method here\n if (setIsPaycometNewMethodSelected) {\n setIsPaycometNewMethodSelected(newMethodType);\n if (newMethodType === 'card') {\n setIsAddNewCardOptionSelected(true);\n }\n }\n\n handleSelect();\n setCollapsed(true);\n },\n [\n // callback dependencies here\n ]\n );","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Add in the ","type":"text"},{"text":"enableSortPaymentMethods && unSelectedMethods.map","type":"text","marks":[{"type":"code"}]},{"text":" a new block for our new method:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"We also need to condition this payment method to be shown only if delivery mode is selected","type":"text"}]}]}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"const isDelivery = serverOrder?.delivery;\n\n{method?.newMethod && method?.transient && isDelivery && (\n \n \n }\n onClick={e => handleNewMethodOptionClick(e, 'card')}\n isLoading={isLoadingPopup}\n />\n \n)}","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Add a new block for for the case where we not have the ","type":"text"},{"text":"enableSortPaymentMethods","type":"text","marks":[{"type":"code"}]},{"text":" as true:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"{!enableSortPaymentMethods && enableNewMethod && (\n \n \n }\n onClick={e => handleNewMethodOptionClick(e, 'card')}\n isLoading={isLoadingPopup}\n />\n \n)}","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Add the new payment method in the ","type":"text"},{"text":"sortPaymentMethods","type":"text","marks":[{"type":"code"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"frontend/src/components/payment-method/utils/sort-payment-methods.ts","type":"text"}]}]}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":" const paymentMethodListTypeOrder = [\n // rest of the code\n 'NEW_METHOD',\n ];\n \n // Add new case in switch for our new method\n function filterMethodByType(typeOrder: string, paymentMethods: IPaymentMethod[]): IPaymentMethod[] {\n switch (typeOrder) {\n // rest of the code\n case 'NEW_METHOD':\n return paymentMethods.filter(\n p => !p?.transient && p?.newMethod && p.accountIdentifier === typeOrder\n );\n // rest of the code\n }\n}","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Add a new logic to the filter ","type":"text"},{"text":"!enableSortPaymentMethods && unSelectedMethods.filter(isNotLocalWallet)...","type":"text","marks":[{"type":"code"}]},{"text":" to now show our payment method if delivery mode is not selected:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":" const isDelivery = serverOrder?.delivery;\n\n const isNotLocalWallet = (method: IPaymentMethod) => {\n return !method.blik && !method.ideal;\n };\n\n const sortedMethodsFilterConditions = (method: IPaymentMethod) => {\n if (method.newMethod && !isDelivery) {\n return false; // remove our item from the list if delivery is not selected\n }\n\n return isNotLocalWallet(method);\n };\n \n // A suggestion would be the creation of a new function for the filter conditions\n {!enableSortPaymentMethods &&\n unSelectedMethods.filter(sortedMethodsFilterConditions).map(method => {","type":"text"}]},{"type":"paragraph"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add the new method in paycomet-hosted-page-payment comp","type":"text"}]}]}]},{"type":"expand","attrs":{"title":"frontend/src/pages/cart/payment/order-payment/paycomet-hosted-page-payment/paycomet-hosted-page-payment.tsx"},"content":[{"type":"paragraph","content":[{"text":"Return the new values from the ","type":"text"},{"text":"useOrderPayment","type":"text","marks":[{"type":"code"}]},{"text":" hook","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"const {\n // rest of code\n setIsPaycometNewMethodSelected,\n isPaycometNewMethodSelected,\n } = useOrderPayment({\n enableOrderTimedFire,\n onPriceOrder,\n serverOrder,\n });","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Pass down the values to the comp","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"// rest of the code\n\n {showPaymentMethodSelection && (\n \n )}","type":"text"}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Task 4: Create and add a new method in payment-method-option structure","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":520,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":520,"id":"83156d13-a2b1-4935-9418-f4d67ffae3a1","collection":"contentId-4362960979","type":"file","height":425}},{"type":"caption","content":[{"text":"Just an example of where the new change will be","type":"text"}]}]},{"type":"paragraph"},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add the new icon for the new payment method in: ","type":"text"},{"text":"frontend/src/components/icons/new-payment-method/index.tsx","type":"text","marks":[{"type":"code"}]},{"text":" (replace “new-payment-method” for the new name, hahaha).","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"We can use the ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://react-svgr.com/playground/"}},{"text":" to convert the svg code from Figma to use in our code (following the pattern of the application)","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add the new method option in the interface of payment methods:","type":"text"}]}]}]},{"type":"expand","attrs":{"title":"frontend/src/state/payment/types.ts"},"content":[{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"export interface IPaymentMethod {\n // rest of the code\n newPaymentMethod?: boolean | null;\n}","type":"text"}]},{"type":"paragraph"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add new file in ","type":"text"},{"text":"frontend/src/components/payment-method-option/","type":"text","marks":[{"type":"code"}]},{"text":"as the following example:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Remember to add the translation that will be used in ","type":"text"},{"text":"formatMessage","type":"text","marks":[{"type":"code"}]}]}]}]}]}]},{"type":"expand","attrs":{"title":"frontend/src/components/payment-method-option/new-payment-method.tsx (example of new file)"},"content":[{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"import React from 'react';\n\nimport { useIntl } from 'react-intl';\n\nimport { MethodType } from './styled';\n\nconst NewPaymentMethod = () => { // Example SodexoMethod\n const { formatMessage } = useIntl();\n\n return {formatMessage({ id: 'payWithNewMethod' })};\n};\n\nexport default NewPaymentMethod;","type":"text"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Use the created payment method option in ","type":"text"},{"text":"payment-method-option","type":"text","marks":[{"type":"code"}]},{"text":":","type":"text"}]}]}]},{"type":"expand","attrs":{"title":"frontend/src/components/payment-method-option/index.tsx"},"content":[{"type":"paragraph","content":[{"text":"Adjust the ","type":"text"},{"text":"RenderMethodType","type":"text","marks":[{"type":"code"}]},{"text":" and add the new method created above","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"\n const RenderMethodType = () => {\n // rest of the code\n\n // New if here\n if (method.newPaymentMethod) {\n return ;\n } \n \n return null;\n };\n \n // add the new payment method inside the in the return\n \n return \n // rest of the code\n (\n // rest of the code\n \n // rest of the code\n

\n \n // Add new method here inside the description\n {method.newPaymentMethod && }\n \n // rest of the code\n

\n \n // rest of the code\n );","type":"text"}]},{"type":"paragraph"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Task 5: Adjust account payment method lists to deal with the new method","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":589,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":589,"id":"bd9d6af8-35b8-45b8-b590-51487a3e6cfe","collection":"contentId-4362960979","type":"file","height":409}},{"type":"caption","content":[{"text":"Adjusting the list to deal with the new method","type":"text"}]}]},{"type":"expand","attrs":{"title":"frontend/src/components/payment-method-flat-list-with-button/payment-method-flat-list-with-button.tsx"},"content":[{"type":"paragraph","content":[{"text":"We’ll exclude the new payment method if it is not actually stored in the user account:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"function filterOutUnsupportedPaymentMethods(paymentMethods: IPaymentMethod[]) {\n return paymentMethods.filter(\n n =>\n n.accountIdentifier !== PAYPAL_PAYMENT_METHOD_PLACEHOLDER.accountIdentifier &&\n n.accountIdentifier !== SODEXO_VOUCHER_PAYMENT_METHOD_PLACEHOLDER.accountIdentifier &&\n n.accountIdentifier !== NEW_PAYMENT_METHOD_PLACEHOLDER.accountIdentifier &&\n );\n}","type":"text"}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Nice to have - not considered now","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Task 6: Adjust the confirmation text for confirmation page and tracking modal","type":"text","marks":[{"type":"strike"}]}]},{"type":"layoutSection","content":[{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":248,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":537,"id":"9d1f4cfb-3aa5-4c47-9dd8-0c172f47309b","collection":"contentId-4362960979","type":"file","height":596}},{"type":"caption","content":[{"text":"Confirmation page","type":"text"}]}]}]},{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":362,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":970,"id":"100b8799-78d7-4d37-80ae-8b3ed36acac5","collection":"contentId-4362960979","type":"file","height":728}},{"type":"caption","content":[{"text":"Tracking info modal","type":"text"}]}]}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The same component is used to show both cases: ","type":"text"},{"text":"frontend/src/pages/order-confirmation/delivery/delivery-details.tsx","type":"text","marks":[{"type":"code"}]}]}]}]},{"type":"paragraph","content":[{"text":"Suggestion of implementation:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add a new property/flag inside the ","type":"text"},{"text":"cart.payment","type":"text","marks":[{"type":"code"}]},{"text":" structure to enable a new condition to show new texts for these case (I think that perhaps we should not change the ","type":"text"},{"text":"cardType","type":"text","marks":[{"type":"code"}]},{"text":", not sure yet)","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":232,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":232,"id":"0548d249-f36b-48af-a40e-6607cd0dff7c","collection":"contentId-4362960979","type":"file","height":110}}]}]}]},{"type":"paragraph","content":[{"text":"For the payment reminder tip we have some options:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":664,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":664,"id":"ed20f79f-c842-4760-99b0-7ce949ba2dc4","collection":"contentId-4362960979","type":"file","height":81}}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Create new component as the ","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":" that we have today for the new condition/new text","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Adjust the ","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":" to deal with other types of texts and perhaps rename this component to have a generic name (for example ","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":")","type":"text"}]}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Task 7: Adjust the receipt email to show the correct message for the new payment method","type":"text","marks":[{"type":"strike"}]}]},{"type":"mediaSingle","attrs":{"layout":"center","width":683,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":683,"id":"dff8366d-2b42-45dd-9cf3-d20df6a20e9e","collection":"contentId-4362960979","type":"file","height":679}}]},{"type":"paragraph","content":[{"text":"Today, when the commit order is processed, order-service triggers Braze API with the order info, that then sends the confirmation email to the customer.","type":"text"}]},{"type":"paragraph","content":[{"text":"The first necessary alteration will be to include paymentMethodBrand in the properties sent to braze in ","type":"text"},{"text":"transformOrderProperties","type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/rbilabs/intl-packages/blob/master/packages/emails/src/utils.ts#L130"}}]},{"text":" utility method. For example:","type":"text"}]},{"type":"paragraph"},{"type":"expand","attrs":{"title":"packages/emails/src/utils.ts"},"content":[{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"export const transformOrderProperties = ({\n rbiOrder,\n brand,\n fzStore,\n language,\n}: ITransformOrderProperties): Record => {\n ...\n const { cardType, ccLast4: last4, paymentType, paymentMethodBrand }: Partial = payment || {};\n ...\n properties.paymentMethodBrand = paymentMethodBrand;\n return properties;\n}","type":"text"}]}]},{"type":"paragraph","content":[{"text":"After we change intl-packages/email to send the necessary information to Braze API, we need to update the templates configured, which are split into templates and content blocks (reusable pieces of content). Using PLK-ES as example we can see:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Email template","type":"text","marks":[{"type":"link","attrs":{"href":"https://dashboard-02.braze.eu/engagement/campaigns/6516ad6de0cb200480e37a1f/6512e907cbaad2004eef702a?locale=en&campaignName=Receipt%20Campaign&page=0"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Payment method content block","type":"text","marks":[{"type":"link","attrs":{"href":"https://dashboard-02.braze.eu/engagement/templates_and_media/content_blocks/6512e907cbaad2004eef702a?id=6516a2c8d577ea006e538e49&locale=en"}}]}]}]}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"The example displays a LiquidJS template, which is similar but not equal to Braze templates. Braze access properties using the syntax ","type":"text"},{"text":"{{event_properties.${language}}}","type":"text","marks":[{"type":"code"}]}]}]},{"type":"paragraph"},{"type":"expand","attrs":{"title":"LiquidJS template example"},"content":[{"type":"codeBlock","content":[{"text":"{% assign people = \"alice\" | split: \", \" -%}\n{% assign cardType = \"CASH\" %}\n{% assign paymentMethodBrand = \"PAYMENT_ON_DELIVERY_CARD\" %}\n{% assign last4 = \"1234\" %}\n\n

\n \n {{ person | capitalize }}\n \n {{cardType}}\n Pagado con {% if cardType != \"CASH\" %} Tarjeta terminada en {{last4}} {% else %}{% if paymentMethodBrand != nil %}{{paymentMethodBrand}} {%else%}efectivo {%endif%} {%endif%}\n

\n","type":"text"}]}]}],"version":1}

Browser not supported