Skip to content

Commit 071fc58

Browse files
del15881del15881
authored
New Commit to Create NEW PR with Latest Develop (#4385)
* New Commit to Create NEW PR with Latest Develop * Fixing Prettier Issues
1 parent 4117fbd commit 071fc58

File tree

16 files changed

+581
-0
lines changed

16 files changed

+581
-0
lines changed

‎packages/extensions/venia-sample-payments-cashondelivery/README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# venia-sample-payments-cashondelivery
2+
3+
This package provides the `Cash On Delivery` payment method for Venia.
4+
5+
## Installation
6+
7+
To install this extension, add it as a `devDependency` to your app.
8+
project:
9+
10+
`yarn add -D @magento/venia-sample-payments-cashondelivery`

‎packages/extensions/venia-sample-payments-cashondelivery/intercept.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
module.exports = targets => {
2+
const { specialFeatures } = targets.of('@magento/pwa-buildpack');
3+
specialFeatures.tap(flags => {
4+
/**
5+
* Wee need to activate esModules, cssModules and GQL Queries to allow build pack to load our extension
6+
* {@link https://magento.github.io/pwa-studio/pwa-buildpack/reference/configure-webpack/#special-flags}.
7+
*/
8+
flags[targets.name] = {
9+
esModules: true,
10+
cssModules: true,
11+
graphqlQueries: true
12+
};
13+
});
14+
15+
const {
16+
checkoutPagePaymentTypes,
17+
editablePaymentTypes,
18+
summaryPagePaymentTypes
19+
} = targets.of('@magento/venia-ui');
20+
checkoutPagePaymentTypes.tap(payments =>
21+
payments.add({
22+
paymentCode: 'cashondelivery',
23+
importPath:
24+
'@magento/venia-sample-payments-cashondelivery/src/components/cashondelivery.js'
25+
})
26+
);
27+
editablePaymentTypes.tap(editablePaymentTypes => {
28+
editablePaymentTypes.add({
29+
paymentCode: 'cashondelivery',
30+
importPath:
31+
'@magento/venia-sample-payments-cashondelivery/src/components/editcod.js'
32+
});
33+
});
34+
summaryPagePaymentTypes.tap(paymentSummaries =>
35+
paymentSummaries.add({
36+
paymentCode: 'cashondelivery',
37+
importPath:
38+
'@magento/venia-sample-payments-cashondelivery/src/components/summarycod.js'
39+
})
40+
);
41+
};

‎packages/extensions/venia-sample-payments-cashondelivery/package.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "@magento/venia-sample-payments-cashondelivery",
3+
"version": "0.0.1",
4+
"publishConfig": {
5+
"access": "public"
6+
},
7+
"description": "Provides demo Cash On Delivery Payment Method for PWA Studio.",
8+
"main": "./intercept.js",
9+
"scripts": {
10+
"clean": " "
11+
},
12+
"repository": "github:magento/pwa-studio",
13+
"license": "(OSL-3.0 OR AFL-3.0)",
14+
"peerDependencies": {
15+
"@magento/peregrine": "~14.4.1",
16+
"@magento/pwa-buildpack": "~11.5.3",
17+
"@magento/venia-ui": "~11.5.0",
18+
"react": "~17.0.1",
19+
"react-intl": "~5.20.0",
20+
"react-router-dom": "~5.2.0"
21+
},
22+
"pwa-studio": {
23+
"targets": {
24+
"intercept": "./intercept"
25+
}
26+
}
27+
}

‎packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/__snapshots__/cashondelivery.spec.js.snap‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Should render CashOnDelivery component correctly`] = `
4+
<div
5+
className="cod_root"
6+
>
7+
<mock-BillingAddress
8+
onBillingAddressChangedError={[MockFunction]}
9+
onBillingAddressChangedSuccess={[MockFunction]}
10+
/>
11+
</div>
12+
`;

‎packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/__snapshots__/editcod.spec.js.snap‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`renders correctly 1`] = `
4+
<div
5+
className="root"
6+
>
7+
<mock-CashOnDelivery
8+
onPaymentError={[MockFunction onPaymentError]}
9+
onPaymentReady={[MockFunction onPaymentReady]}
10+
onPaymentSuccess={[MockFunction onPaymentSuccess]}
11+
resetShouldSubmit={[MockFunction resetShouldSubmit]}
12+
shouldSubmit={false}
13+
/>
14+
</div>
15+
`;

‎packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/__snapshots__/summarycod.spec.js.snap‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`renders correctly 1`] = `
4+
<div
5+
className="root"
6+
>
7+
<div
8+
className="heading_container"
9+
>
10+
<h5
11+
className="heading"
12+
>
13+
<div
14+
componentName="Formatted Message Component"
15+
defaultMessage="Payment Information"
16+
id="checkoutPage.paymentInformation"
17+
/>
18+
</h5>
19+
<mock-LinkButton
20+
className="edit_button"
21+
onClick={[MockFunction onEdit]}
22+
type="button"
23+
>
24+
<mock-Icon
25+
classes={
26+
Object {
27+
"icon": "edit_icon",
28+
}
29+
}
30+
size={16}
31+
src={
32+
Object {
33+
"$$typeof": Symbol(react.forward_ref),
34+
"propTypes": Object {
35+
"color": [Function],
36+
"size": [Function],
37+
},
38+
"render": [Function],
39+
}
40+
}
41+
/>
42+
<span
43+
className="edit_text"
44+
>
45+
<div
46+
componentName="Formatted Message Component"
47+
defaultMessage="Edit"
48+
id="global.editButton"
49+
/>
50+
</span>
51+
</mock-LinkButton>
52+
</div>
53+
<div
54+
className="cod_details_container"
55+
>
56+
<span
57+
className="payment_type"
58+
>
59+
<div
60+
componentName="Formatted Message Component"
61+
defaultMessage="Cash On Delivery"
62+
id="CashOnDelivery.paymentType"
63+
/>
64+
</span>
65+
</div>
66+
</div>
67+
`;

‎packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/cashondelivery.spec.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
import { createTestInstance } from '@magento/peregrine';
3+
import { useCashondelivery } from '../../talons/useCashondelivery';
4+
5+
import CashOnDelivery from '../cashondelivery';
6+
7+
jest.mock('@magento/venia-ui/lib/classify');
8+
jest.mock('../../talons/useCashondelivery', () => {
9+
return {
10+
useCashondelivery: jest.fn().mockReturnValue({
11+
onBillingAddressChangedError: jest.fn(),
12+
onBillingAddressChangedSuccess: jest.fn()
13+
})
14+
};
15+
});
16+
17+
jest.mock(
18+
'@magento/venia-ui/lib/components/CheckoutPage/BillingAddress',
19+
() => props => <mock-BillingAddress {...props} />
20+
);
21+
22+
const useCashondeliveryReturnValue = {
23+
onBillingAddressChangedError: jest.fn(),
24+
onBillingAddressChangedSuccess: jest.fn()
25+
};
26+
27+
test('Should render CashOnDelivery component correctly', () => {
28+
useCashondelivery.mockReturnValueOnce({
29+
...useCashondeliveryReturnValue
30+
});
31+
32+
const tree = createTestInstance(<CashOnDelivery />);
33+
34+
expect(tree.toJSON()).toMatchSnapshot();
35+
});

‎packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/editcod.spec.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import { createTestInstance } from '@magento/peregrine';
3+
4+
import EditCod from '../editcod';
5+
6+
jest.mock('@magento/venia-ui/lib/classify');
7+
jest.mock('../cashondelivery', () => props => (
8+
<mock-CashOnDelivery {...props} />
9+
));
10+
11+
const mocks = {
12+
onPaymentReady: jest.fn().mockName('onPaymentReady'),
13+
onPaymentSuccess: jest.fn().mockName('onPaymentSuccess'),
14+
onPaymentError: jest.fn().mockName('onPaymentError'),
15+
resetShouldSubmit: jest.fn().mockName('resetShouldSubmit')
16+
};
17+
18+
test('renders correctly', () => {
19+
// Arrange.
20+
const props = {
21+
...mocks,
22+
shouldSubmit: false
23+
};
24+
25+
// Act.
26+
const tree = createTestInstance(<EditCod {...props} />);
27+
28+
// Assert.
29+
expect(tree.toJSON()).toMatchSnapshot();
30+
});

‎packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/summarycod.spec.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import { createTestInstance } from '@magento/peregrine';
3+
4+
import SummaryCod from '../summarycod';
5+
6+
jest.mock('@magento/venia-ui/lib/classify');
7+
jest.mock('react-intl', () => ({
8+
FormattedMessage: props => (
9+
<div componentName="Formatted Message Component" {...props} />
10+
)
11+
}));
12+
jest.mock('@magento/venia-ui/lib/components/LinkButton', () => props => (
13+
<mock-LinkButton {...props} />
14+
));
15+
jest.mock('@magento/venia-ui/lib/components/Icon', () => props => (
16+
<mock-Icon {...props} />
17+
));
18+
19+
test('renders correctly', () => {
20+
// Arrange.
21+
const props = {
22+
onEdit: jest.fn().mockName('onEdit')
23+
};
24+
25+
// Act.
26+
const tree = createTestInstance(<SummaryCod {...props} />);
27+
28+
// Assert.
29+
expect(tree.toJSON()).toMatchSnapshot();
30+
});

‎packages/extensions/venia-sample-payments-cashondelivery/src/components/cashondelivery.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react';
2+
import { useStyle } from '@magento/venia-ui/lib/classify';
3+
import { shape, string, bool, func } from 'prop-types';
4+
import BillingAddress from '@magento/venia-ui/lib/components/CheckoutPage/BillingAddress';
5+
import { useCashondelivery } from '../talons/useCashondelivery';
6+
import defaultClasses from './cashondelivery.module.css';
7+
8+
/**
9+
* The CashOnDelivery component renders all information to handle cashondelivery payment.
10+
*
11+
* @param {Boolean} props.shouldSubmit boolean value which represents if a payment nonce request has been submitted
12+
* @param {Function} props.onPaymentSuccess callback to invoke when the a payment nonce has been generated
13+
* @param {Function} props.onPaymentReady callback to invoke when the component is ready
14+
* @param {Function} props.onPaymentError callback to invoke when component throws an error
15+
* @param {Function} props.resetShouldSubmit callback to reset the shouldSubmit flag
16+
*/
17+
const CashOnDelivery = props => {
18+
const classes = useStyle(defaultClasses, props.classes);
19+
20+
const {
21+
onBillingAddressChangedError,
22+
onBillingAddressChangedSuccess
23+
} = useCashondelivery(props);
24+
25+
return (
26+
<div className={classes.cod_root}>
27+
<BillingAddress
28+
resetShouldSubmit={props.resetShouldSubmit}
29+
shouldSubmit={props.shouldSubmit}
30+
onBillingAddressChangedError={onBillingAddressChangedError}
31+
onBillingAddressChangedSuccess={onBillingAddressChangedSuccess}
32+
/>
33+
</div>
34+
);
35+
};
36+
37+
CashOnDelivery.propTypes = {
38+
classes: shape({ root: string }),
39+
shouldSubmit: bool.isRequired,
40+
onPaymentSuccess: func,
41+
onPaymentReady: func,
42+
onPaymentError: func,
43+
resetShouldSubmit: func.isRequired
44+
};
45+
46+
export default CashOnDelivery;

0 commit comments

Comments
 (0)