You are viewing an old version of this page. View the current version.
Compare with Current
View Page History
« Previous
Version 3
Next »
Repos that we’ll change
Whitelabel: https://github.com/rbilabs/intl-whitelabel-app
Figma: Schroer, Gabriel (Deactivated)
Task summary
Whitelabel:
Components tree architecture
Tasks breakdown
Task 1: Create and add a new method in payment-method-option structure
frontend/src/state/payment/types.ts
export interface IPaymentMethod {
// ... rest of the code
newPaymentMethod?: boolean | null;
}
frontend/src/components/payment-method-option/new-payment-method.tsx (example of new file)
import React from 'react';
import { useIntl } from 'react-intl';
import { MethodType } from './styled';
const NewPaymentMethod = () => { // Example SodexoMethod
const { formatMessage } = useIntl();
return <MethodType>{formatMessage({ id: 'payWithNewMethod' })}</MethodType>;
};
export default NewPaymentMethod;
frontend/src/components/payment-method-option/index.tsx
Adjust the RenderMethodType and add the new method created above
const RenderMethodType = () => {
// ... rest of the code
// New if here
if (method.newPaymentMethod) {
return <NewPaymentMethod />;
}
return null;
};
// add the new payment method inside the <MethodTypeWrapper> in the return
return
// rest of the code
(
// rest of the code
<MethodTypeWrapper
data-private
data-dd-privacy="mask"
onClick={onClickMethod}
$isClickable={!!onClick}
disableMethod={disableMethod}
fromCheckout={fromCheckout}
data-testid={`method-type-wrapper-${method.accountIdentifier ?? method.fdAccountId ?? ''}`}
selected={selected}
>
// rest of the code
<div>
<MethodTypeDescription>
// Add new method here inside the description
{method.newPaymentMethod && <StyledNewPaymentMethodCardIcon />}
</MethodTypeDescription>
// rest of the code
</div>
</MethodTypeWrapper>
// rest of the code
);
0 Comments