-
Notifications
You must be signed in to change notification settings - Fork 686
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
New Commit to Create NEW PR with Latest Develop
- Loading branch information
Showing
16 changed files
with
581 additions
and
0 deletions.
There are no files selected for viewing
10 changes: 10 additions & 0 deletions
10
packages/extensions/venia-sample-payments-cashondelivery/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
# venia-sample-payments-cashondelivery | ||
|
||
This package provides the `Cash On Delivery` payment method for Venia. | ||
|
||
## Installation | ||
|
||
To install this extension, add it as a `devDependency` to your app. | ||
project: | ||
|
||
`yarn add -D @magento/venia-sample-payments-cashondelivery` |
41 changes: 41 additions & 0 deletions
41
packages/extensions/venia-sample-payments-cashondelivery/intercept.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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' | ||
}) | ||
); | ||
}; |
27 changes: 27 additions & 0 deletions
27
packages/extensions/venia-sample-payments-cashondelivery/package.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | ||
} | ||
} | ||
} |
12 changes: 12 additions & 0 deletions
12
...ayments-cashondelivery/src/components/__tests__/__snapshots__/cashondelivery.spec.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
`; |
15 changes: 15 additions & 0 deletions
15
...ample-payments-cashondelivery/src/components/__tests__/__snapshots__/editcod.spec.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
`; |
67 changes: 67 additions & 0 deletions
67
...le-payments-cashondelivery/src/components/__tests__/__snapshots__/summarycod.spec.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
`; |
35 changes: 35 additions & 0 deletions
35
...ions/venia-sample-payments-cashondelivery/src/components/__tests__/cashondelivery.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | ||
}); |
30 changes: 30 additions & 0 deletions
30
.../extensions/venia-sample-payments-cashondelivery/src/components/__tests__/editcod.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | ||
}); |
30 changes: 30 additions & 0 deletions
30
...tensions/venia-sample-payments-cashondelivery/src/components/__tests__/summarycod.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | ||
}); |
46 changes: 46 additions & 0 deletions
46
packages/extensions/venia-sample-payments-cashondelivery/src/components/cashondelivery.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
3 changes: 3 additions & 0 deletions
3
.../extensions/venia-sample-payments-cashondelivery/src/components/cashondelivery.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
.cod_root { | ||
padding-top: 1.125rem; | ||
} |
47 changes: 47 additions & 0 deletions
47
packages/extensions/venia-sample-payments-cashondelivery/src/components/editcod.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
}; |
Oops, something went wrong.