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.

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

Adding New Extension to Add Cash On Delivery Payment Feature at Checkout #4350

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
module.exports = targets => {
const { specialFeatures } = targets.of('@magento/pwa-buildpack');
specialFeatures.tap(flags => {
/**
* Wee need to activate esModules, cssModules and GQL Queries to allow build pack to load our extension
* {@link https://magento.github.io/pwa-studio/pwa-buildpack/reference/configure-webpack/#special-flags}.
*/
flags[targets.name] = {
esModules: true,
cssModules: true,
graphqlQueries: true
};
});

const {
checkoutPagePaymentTypes,
editablePaymentTypes,
summaryPagePaymentTypes
} = targets.of('@magento/venia-ui');
checkoutPagePaymentTypes.tap(payments =>
payments.add({
paymentCode: 'cashondelivery',
importPath:
'@magento/venia-sample-payments-cashondelivery/src/components/cashondelivery.js'
})
);
editablePaymentTypes.tap(editablePaymentTypes => {
editablePaymentTypes.add({
paymentCode: 'cashondelivery',
importPath:
'@magento/venia-sample-payments-cashondelivery/src/components/editcod.js'
});
});
summaryPagePaymentTypes.tap(paymentSummaries =>
paymentSummaries.add({
paymentCode: 'cashondelivery',
importPath:
'@magento/venia-sample-payments-cashondelivery/src/components/summarycod.js'
})
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"name": "@magento/venia-sample-payments-cashondelivery",
"version": "0.0.1",
"publishConfig": {
"access": "public"
},
"description": "Provides demo Cash On Delivery Payment Method for PWA Studio.",
"main": "./intercept.js",
"scripts": {
"clean": " "
},
"repository": "github:magento/pwa-studio",
"license": "(OSL-3.0 OR AFL-3.0)",
"peerDependencies": {
"@magento/peregrine": "~14.4.1",
"@magento/pwa-buildpack": "~11.5.3",
"@magento/venia-ui": "~11.5.0",
"react": "~17.0.1",
"react-intl": "~5.20.0",
"react-router-dom": "~5.2.0"
},
"pwa-studio": {
"targets": {
"intercept": "./intercept"
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Should render CashOnDelivery component correctly`] = `
<div
className="cod_root"
>
<mock-BillingAddress
onBillingAddressChangedError={[MockFunction]}
onBillingAddressChangedSuccess={[MockFunction]}
/>
</div>
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders correctly 1`] = `
<div
className="root"
>
<mock-CashOnDelivery
onPaymentError={[MockFunction onPaymentError]}
onPaymentReady={[MockFunction onPaymentReady]}
onPaymentSuccess={[MockFunction onPaymentSuccess]}
resetShouldSubmit={[MockFunction resetShouldSubmit]}
shouldSubmit={false}
/>
</div>
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders correctly 1`] = `
<div
className="root"
>
<div
className="heading_container"
>
<h5
className="heading"
>
<div
componentName="Formatted Message Component"
defaultMessage="Payment Information"
id="checkoutPage.paymentInformation"
/>
</h5>
<mock-LinkButton
className="edit_button"
onClick={[MockFunction onEdit]}
type="button"
>
<mock-Icon
classes={
Object {
"icon": "edit_icon",
}
}
size={16}
src={
Object {
"$$typeof": Symbol(react.forward_ref),
"propTypes": Object {
"color": [Function],
"size": [Function],
},
"render": [Function],
}
}
/>
<span
className="edit_text"
>
<div
componentName="Formatted Message Component"
defaultMessage="Edit"
id="global.editButton"
/>
</span>
</mock-LinkButton>
</div>
<div
className="cod_details_container"
>
<span
className="payment_type"
>
<div
componentName="Formatted Message Component"
defaultMessage="Cash On Delivery"
id="CashOnDelivery.paymentType"
/>
</span>
</div>
</div>
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';
import { createTestInstance } from '@magento/peregrine';
import { useCashondelivery } from '../../talons/useCashondelivery';

import CashOnDelivery from '../cashondelivery';

jest.mock('@magento/venia-ui/lib/classify');
jest.mock('../../talons/useCashondelivery', () => {
return {
useCashondelivery: jest.fn().mockReturnValue({
onBillingAddressChangedError: jest.fn(),
onBillingAddressChangedSuccess: jest.fn()
})
};
});

jest.mock(
'@magento/venia-ui/lib/components/CheckoutPage/BillingAddress',
() => props => <mock-BillingAddress {...props} />
);

const useCashondeliveryReturnValue = {
onBillingAddressChangedError: jest.fn(),
onBillingAddressChangedSuccess: jest.fn()
};

test('Should render CashOnDelivery component correctly', () => {
useCashondelivery.mockReturnValueOnce({
...useCashondeliveryReturnValue
});

const tree = createTestInstance(<CashOnDelivery />);

expect(tree.toJSON()).toMatchSnapshot();
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from 'react';
import { createTestInstance } from '@magento/peregrine';

import EditCod from '../editcod';

jest.mock('@magento/venia-ui/lib/classify');
jest.mock('../cashondelivery', () => props => (
<mock-CashOnDelivery {...props} />
));

const mocks = {
onPaymentReady: jest.fn().mockName('onPaymentReady'),
onPaymentSuccess: jest.fn().mockName('onPaymentSuccess'),
onPaymentError: jest.fn().mockName('onPaymentError'),
resetShouldSubmit: jest.fn().mockName('resetShouldSubmit')
};

test('renders correctly', () => {
// Arrange.
const props = {
...mocks,
shouldSubmit: false
};

// Act.
const tree = createTestInstance(<EditCod {...props} />);

// Assert.
expect(tree.toJSON()).toMatchSnapshot();
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from 'react';
import { createTestInstance } from '@magento/peregrine';

import SummaryCod from '../summarycod';

jest.mock('@magento/venia-ui/lib/classify');
jest.mock('react-intl', () => ({
FormattedMessage: props => (
<div componentName="Formatted Message Component" {...props} />
)
}));
jest.mock('@magento/venia-ui/lib/components/LinkButton', () => props => (
<mock-LinkButton {...props} />
));
jest.mock('@magento/venia-ui/lib/components/Icon', () => props => (
<mock-Icon {...props} />
));

test('renders correctly', () => {
// Arrange.
const props = {
onEdit: jest.fn().mockName('onEdit')
};

// Act.
const tree = createTestInstance(<SummaryCod {...props} />);

// Assert.
expect(tree.toJSON()).toMatchSnapshot();
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import React from 'react';
import { useStyle } from '@magento/venia-ui/lib/classify';
import { shape, string, bool, func } from 'prop-types';
import BillingAddress from '@magento/venia-ui/lib/components/CheckoutPage/BillingAddress';
import { useCashondelivery } from '../talons/useCashondelivery';
import defaultClasses from './cashondelivery.module.css';

/**
* The CashOnDelivery component renders all information to handle cashondelivery payment.
*
* @param {Boolean} props.shouldSubmit boolean value which represents if a payment nonce request has been submitted
* @param {Function} props.onPaymentSuccess callback to invoke when the a payment nonce has been generated
* @param {Function} props.onPaymentReady callback to invoke when the component is ready
* @param {Function} props.onPaymentError callback to invoke when component throws an error
* @param {Function} props.resetShouldSubmit callback to reset the shouldSubmit flag
*/
const CashOnDelivery = props => {
const classes = useStyle(defaultClasses, props.classes);

const {
onBillingAddressChangedError,
onBillingAddressChangedSuccess
} = useCashondelivery(props);

return (
<div className={classes.cod_root}>
<BillingAddress
resetShouldSubmit={props.resetShouldSubmit}
shouldSubmit={props.shouldSubmit}
onBillingAddressChangedError={onBillingAddressChangedError}
onBillingAddressChangedSuccess={onBillingAddressChangedSuccess}
/>
</div>
);
};

CashOnDelivery.propTypes = {
classes: shape({ root: string }),
shouldSubmit: bool.isRequired,
onPaymentSuccess: func,
onPaymentReady: func,
onPaymentError: func,
resetShouldSubmit: func.isRequired
};

export default CashOnDelivery;
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.cod_root {
padding-top: 1.125rem;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import React from 'react';
import { shape, string, bool, func } from 'prop-types';

import { useStyle } from '@magento/venia-ui/lib/classify';

import CashOnDelivery from './cashondelivery';
import defaultClasses from './cashondelivery.module.css';

/**
* The edit view for the Cod payment method.
*/
const EditCod = props => {
const {
onPaymentReady,
onPaymentSuccess,
onPaymentError,
resetShouldSubmit,
shouldSubmit
} = props;

const classes = useStyle(defaultClasses, props.classes);

return (
<div className={classes.root}>
<CashOnDelivery
onPaymentReady={onPaymentReady}
onPaymentSuccess={onPaymentSuccess}
onPaymentError={onPaymentError}
resetShouldSubmit={resetShouldSubmit}
shouldSubmit={shouldSubmit}
/>
</div>
);
};

export default EditCod;

EditCod.propTypes = {
classes: shape({
root: string
}),
onPaymentReady: func.isRequired,
onPaymentSuccess: func.isRequired,
onPaymentError: func.isRequired,
resetShouldSubmit: func.isRequired,
shouldSubmit: bool
};
Loading