update - compatibility with npmjs

add license
refactoring

.github/workflows/publish.yml

@@ -0,0 +1,23 @@
+name: "🚀 release"
+
+on:
+  release:
+    types:
+      - created
+
+jobs:
+  release:
+    name: 🚀 release
+    runs-on: ubuntu-latest
+    steps:
+      - name: 📚 checkout
+        uses: actions/checkout@v2
+      - name: 🟢 node
+        uses: actions/setup-node@v2
+        with:
+            node-version: '12.x'
+            registry-url: 'https://registry.npmjs.org'
+      - name: 🚀 publish
+        run: npm publish --access public
+        env:
+            NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}

.gitignore

@@ -0,0 +1,15 @@
+.idea
+.vscode
+coverage
+node_modules
+storybook-dist
+test-results
+dist
+.DS_Store
+.env
+build-stats.json
+npm-debug.log
+lastCachedGraphQLSchema.json
+test-report.xml
+test-results.json
+yarn-error.log

README.md

@@ -4,23 +4,21 @@ This add-on integrates [Gift Cards extension for Magento 2](https://www.mageworx
 ## Features
 - Add product type MageWorxGiftCards
 - Add fields to the gift card product page
-- Apply, remove gift cards to the cart
+- Apply, remove gift cards from the cart
 - Check gift card balance on the cart page
 - Show gift cards summary amount on the cart page
 
 ## Upload the extension
-1. Create directory `@mageworx/GiftCards-veniapwa` in the root of your project
-2. Copy this project to `@mageworx/GiftCards-veniapwa`
-3. Run `yarn add file:./@mageworx/GiftCards-veniapwa` in the root of your project
-4. Open `local-intercept.js` in the root of your project and put this code into `function localIntercept`. Pay attention, `function localIntercept` must have `targets` as parameter (you can see example of `local-intercept.js` in `@mageworx/GiftCards-veniapwa/documentation`).
+1. Run `yarn add @mageworx/giftcards-veniapwa` or `npm i @mageworx/giftcards-veniapwa` in the root of your project.
+2. Open `local-intercept.js` in the root of your project and put this code into `function localIntercept`. Pay attention, `function localIntercept` must have `targets` as parameter (you can see example of `local-intercept.js` in `@mageworx/giftcards-veniapwa/documentation`).
 ```
-/* MageWorx GiftCards-veniapwa start */
+/* MageWorx giftcards-veniapwa start */
 const giftCardsTargetables = Targetables.using(targets);
 
 const ProductDetails_giftCards = giftCardsTargetables.reactComponent(
     '@magento/venia-ui/lib/components/ProductFullDetail/productFullDetail.js'
 );
-const GiftCardOptions = ProductDetails_giftCards.addImport("{GiftCardDetail} from '../../../../../../@mageworx/GiftCards-veniapwa/src/UI/templates/GiftCardDetail'");
+const GiftCardOptions = ProductDetails_giftCards.addImport("{GiftCardDetail} from '../../../../../@mageworx/giftcards-veniapwa/src/UI/templates/GiftCardDetail'");
 ProductDetails_giftCards.insertAfterJSX(
     '<section className={classes.imageCarousel} />',
     `<${GiftCardOptions} className={classes.giftCardOptions} classes={ defaultClasses } giftCardAttributes={productDetails.giftCardAttributes} giftCardFormData={productDetails.giftCardFormData} />`
@@ -37,7 +35,7 @@ Product_giftCards.replaceJSX(
 const PriceSummary_giftCards = giftCardsTargetables.reactComponent(
     '@magento/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js'
 );
-const GiftCardSummaryMW = PriceSummary_giftCards.addImport("{GiftCardSummaryMW} from '../../../../../../../@mageworx/GiftCards-veniapwa/src/UI/molecules/GiftCardSummary'");
+const GiftCardSummaryMW = PriceSummary_giftCards.addImport("{GiftCardSummaryMW} from '../../../../../../@mageworx/giftcards-veniapwa/src/UI/molecules/GiftCardSummary'");
 PriceSummary_giftCards.replaceJSX(
     '<GiftCardSummary/>',
     `<${GiftCardSummaryMW} classes={{lineItemLabel: classes.lineItemLabel, price: priceClass}} data={giftCards}/>`
@@ -46,7 +44,7 @@ PriceSummary_giftCards.replaceJSX(
 const CartPriceAdjustments_giftCards = giftCardsTargetables.reactComponent(
     '@magento/venia-ui/lib/components/CartPage/PriceAdjustments/priceAdjustments.js'
 );
-const CartGiftCardSectionMW = CartPriceAdjustments_giftCards.addImport("{GiftCardSectionMW} from '../../../../../../../@mageworx/GiftCards-veniapwa/src/UI/templates/GiftCardSection'");
+const CartGiftCardSectionMW = CartPriceAdjustments_giftCards.addImport("{GiftCardSectionMW} from '../../../../../../@mageworx/giftcards-veniapwa/src/UI/templates/GiftCardSection'");
 CartPriceAdjustments_giftCards.replaceJSX(
     '<GiftCardSection/>',
     `<${CartGiftCardSectionMW} setIsCartUpdating={setIsCartUpdating}/>`
@@ -55,7 +53,7 @@ CartPriceAdjustments_giftCards.replaceJSX(
 const CheckoutPriceAdjustments_giftCards = giftCardsTargetables.reactComponent(
     '@magento/venia-ui/lib/components/CheckoutPage/PriceAdjustments/priceAdjustments.js'
 );
-const CheckoutGiftCardSectionMW = CheckoutPriceAdjustments_giftCards.addImport("{GiftCardSectionMW} from '../../../../../../../@mageworx/GiftCards-veniapwa/src/UI/templates/GiftCardSection'");
+const CheckoutGiftCardSectionMW = CheckoutPriceAdjustments_giftCards.addImport("{GiftCardSectionMW} from '../../../../../../@mageworx/giftcards-veniapwa/src/UI/templates/GiftCardSection'");
 CheckoutPriceAdjustments_giftCards.replaceJSX(
     '<GiftCardSection setIsCartUpdating={setPageIsUpdating} />',
     `<${CheckoutGiftCardSectionMW} setIsCartUpdating={setPageIsUpdating} />`
@@ -64,7 +62,7 @@ CheckoutPriceAdjustments_giftCards.replaceJSX(
 const MiniCartListingProduct_giftCards = giftCardsTargetables.reactComponent(
     '@magento/venia-ui/lib/components/MiniCart/ProductList/item.js'
 );
-const GiftCardOptionsMW_MiniCartListing = MiniCartListingProduct_giftCards.addImport("{GiftCardOptionsMW} from '../../../../../../../@mageworx/GiftCards-veniapwa/src/UI/molecules/GiftCardOptions'");
+const GiftCardOptionsMW_MiniCartListing = MiniCartListingProduct_giftCards.addImport("{GiftCardOptionsMW} from '../../../../../../@mageworx/giftcards-veniapwa/src/UI/molecules/GiftCardOptions'");
 MiniCartListingProduct_giftCards.insertAfterJSX(
     '<ProductOptions/>',
     `<${GiftCardOptionsMW_MiniCartListing} mail_to={props.mail_to} mail_from={props.mail_from} mail_to_email={props.mail_to_email} mail_message={props.mail_message} mail_delivery_date={props.mail_delivery_date} classes={{options: classes.options}} />`
@@ -73,7 +71,7 @@ MiniCartListingProduct_giftCards.insertAfterJSX(
 const ProductListingProduct_giftCards = giftCardsTargetables.reactComponent(
     '@magento/venia-ui/lib/components/CartPage/ProductListing/product.js'
 );
-const GiftCardOptionsMW_ProductListing = ProductListingProduct_giftCards.addImport("{GiftCardOptionsMW} from '../../../../../../../@mageworx/GiftCards-veniapwa/src/UI/molecules/GiftCardOptions'");
+const GiftCardOptionsMW_ProductListing = ProductListingProduct_giftCards.addImport("{GiftCardOptionsMW} from '../../../../../../@mageworx/giftcards-veniapwa/src/UI/molecules/GiftCardOptions'");
 ProductListingProduct_giftCards.insertAfterJSX(
     '<ProductOptions/>',
     `<${GiftCardOptionsMW_ProductListing} mail_to={item.mail_to} mail_from={item.mail_from} mail_to_email={item.mail_to_email} mail_message={item.mail_message} mail_delivery_date={item.mail_delivery_date} classes={{options: classes.options, optionLabel: classes.optionLabel}} />`
@@ -82,7 +80,7 @@ ProductListingProduct_giftCards.insertAfterJSX(
 const ItemsReviewItem_giftCards = giftCardsTargetables.reactComponent(
     '@magento/venia-ui/lib/components/CheckoutPage/ItemsReview/item.js'
 );
-const GiftCardOptionsMW_ItemsReview = ItemsReviewItem_giftCards.addImport("{GiftCardOptionsMW} from '../../../../../../../@mageworx/GiftCards-veniapwa/src/UI/molecules/GiftCardOptions'");
+const GiftCardOptionsMW_ItemsReview = ItemsReviewItem_giftCards.addImport("{GiftCardOptionsMW} from '../../../../../../@mageworx/giftcards-veniapwa/src/UI/molecules/GiftCardOptions'");
 ItemsReviewItem_giftCards.insertAfterJSX(
     '<ProductOptions/>',
     `<${GiftCardOptionsMW_ItemsReview} mail_to={props.mail_to} mail_from={props.mail_from} mail_to_email={props.mail_to_email} mail_message={props.mail_message} mail_delivery_date={props.mail_delivery_date} classes={{options: classes.options}} />`
@@ -119,39 +117,20 @@ ItemsReviewFragmentsGql_GiftCard.insertAfterSource(
     'items {\n',
     graphqlItemsFragmentForGiftCards
 );
-
-const PriceSummaryGql_GiftCard = giftCardsTargetables.module(
-    '@magento/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql.js'
-);
-PriceSummaryGql_GiftCard.insertAfterSource(
-    'fragment PriceSummaryFragment on Cart {\n',
-    '\tapplied_mw_gift_cards {\n' +
-    '\tcode\n' +
-    '\tremaining {\n' +
-    '\tvalue\n' +
-    '\tcurrency_code\n' +
-    '\tlabel\n' +
-    '\t}\n' +
-    '\tapplied {\n' +
-    '\tvalue\n' +
-    '\tcurrency_code\n' +
-    '\tlabel\n' +
-    '\t}\n' +
-    '\t}\n'
-);
-/* MageWorx GiftCards-veniapwa end */
+/* MageWorx giftcards-veniapwa end */
 ```
-5. Check that your `local-intercept` has this code before `module.exports`, if don't have you should add them (you can see example of `local-intercept.js` in `@mageworx/GiftCards-veniapwa/documentation`)
+3. Check that your `local-intercept` has this code before `module.exports`, if don't have you should add them (you can see example of `local-intercept.js` in `@mageworx/giftcards-veniapwa/documentation`)
 ```
 const { Targetables } = require('@magento/pwa-buildpack');
 ```
-6. Let's run your project
+4. Create folder `mageworx/configs/GiftCards` in the root of your project. Copy config `@mageworx/giftcards-veniapwa/documentation/date.locale.js` from the package to created folder `mageworx/configs/GiftCards`.
+5. Let's run your project.
 ```
 yarn watch
 ```
 
 ## Localization of datepicker
-You can add localizations that you need in `@mageworx/GiftCards-veniapwa/src/date.locale.js`, for example:
+You can add localizations that you need in `mageworx/configs/GiftCards/date.locale.js`, for example:
 ```
 import { 
     enGB, 

package.json

@@ -1,52 +1,29 @@
 {
-  "name": "@mageworx/GiftCards-veniapwa",
-  "author": "MageWorx",
+  "name": "@mageworx/giftcards-veniapwa",
+  "author": "mageworx",
   "version": "1.0.0",
+  "homepage": "https://www.mageworx.com/magento-2-gift-cards.html",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mageworx/mageworx-gift-cards-veniapwa"
+  },
+  "license": "GPL-3.0",
+  "keywords": [
+    "magento2-extension",
+    "magento2-module",
+    "magento2-gift-card",
+    "magento2-pwa"
+  ],
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {
       "intercept": "src/intercept.js"
     }
   },
-  "scripts": {
-    "format": "prettier --ignore-path .gitignore \"src/**/*.+(ts|js|tsx)\" --write",
-    "lint": "eslint --ignore-path .gitignore 'src/**/{*.js,package.json}'",
-    "prepare": "install-peers"
-  },
-  "lint-staged": {
-    "./src/**/*.{ts,js,jsx,tsx}": [
-      "yarn lint --fix",
-      "yarn format"
-    ]
-  },
   "peerDependencies": {
-    "@apollo/client": "~3.1.2",
-    "@magento/peregrine": "~7.0.0",
-    "@magento/pwa-buildpack": ">=6.0.0",
-    "@magento/venia-ui": "~4.0.0",
-    "graphql-tag": "~2.10.1",
-    "react": "~16.9.0",
-    "react-dom": "^16.12.0",
-    "webpack": "~4.38.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-syntax-class-properties": "^7.12.1",
-    "babel-eslint": "~10.0.1",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-package-json": "^0.1.4",
-    "eslint-plugin-react": "^7.9.1",
-    "eslint-plugin-react-hooks": "^1.6.0",
-    "identity-obj-proxy": "^3.0.0",
-    "install-peers-cli": "^2.2.0",
-    "lint-staged": "^10.0.8",
-    "prettier": "^1.9.2",
-    "prettier-check": "^2.0.0"
+    "@magento/peregrine": "^11.0.0",
+    "@magento/pwa-buildpack": ">=10.0.0",
+    "@magento/venia-ui": "^8.0.0"
   },
   "dependencies": {
     "react-datepicker": "^4.2.1"

src/UI/atoms/Message/message.js

@@ -1,7 +1,7 @@
 import React from 'react';
-
-import defaultClasses from './message.css';
 import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './message.module.css';
+
 
 const Message = props => {
     const { message, isError } = props;

src/UI/atoms/TextArea/textArea.js

@@ -1,8 +1,7 @@
 import React from 'react';
-
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import Message from "../Message/message";
-import defaultClasses from './textArea.css';
+import defaultClasses from './textArea.module.css';
 
 const TextArea = props => {
     const {

src/UI/atoms/TextArea/textArea.css → src/UI/atoms/TextArea/textArea.module.css

@@ -1,5 +1,5 @@
 .input {
-    composes: input from '../../molecules/Field/field.css';
+    composes: input from '../../molecules/Field/field.module.css';
     height: auto;
     max-width: 100%;
     min-width: 100%;

src/UI/atoms/TextInput/textInput.js

@@ -1,7 +1,6 @@
 import React from 'react';
-
 import { useStyle } from '@magento/venia-ui/lib/classify';
-import defaultClasses from './textInput.css';
+import defaultClasses from './textInput.module.css';
 
 const TextInput = props => {
     const {

src/UI/atoms/TextInput/textInput.css → src/UI/atoms/TextInput/textInput.module.css

@@ -1,12 +1,12 @@
 .input {
-    composes: input from '../../molecules/Field/field.css';
+    composes: input from '../../molecules/Field/field.module.css';
 }
 
 .input:disabled {
     color: rgb(var(--venia-global-color-gray-darker));
 }
 
 .input_error {
-    composes: input from '../../molecules/Field/field.css';
+    composes: input from '../../molecules/Field/field.module.css';
     border-color: rgb(var(--venia-global-color-red-400));
 }

src/UI/molecules/Field/field.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useStyle } from '@magento/venia-ui/lib/classify';
-import defaultClasses from './field.css';
+import defaultClasses from './field.module.css';
 import Message from "../../atoms/Message/message";
 
 const Field = props => {

src/UI/molecules/Field/fieldIcons.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useStyle } from '@magento/venia-ui/lib/classify';
-import defaultClasses from './fieldIcons.css';
+import defaultClasses from './fieldIcons.module.css';
 
 const FieldIcons = props => {
     const { after, before, children } = props;

src/UI/molecules/GiftCardOptions/giftCardOptions.js

@@ -24,23 +24,23 @@ const GiftCardOptions = props => {
 
     const messages = {
         "to_email": formatMessage({
-            id: 'MageWorx.giftCardSection.to_email',
+            id: 'mageworx.giftCardSection.to_email',
             defaultMessage: 'To email'
         }),
         "to_name": formatMessage({
-            id: 'MageWorx.giftCardSection.to_name',
+            id: 'mageworxx.giftCardSection.to_name',
             defaultMessage: 'To name'
         }),
         "from_name": formatMessage({
-            id: 'MageWorx.giftCardSection.from_name',
+            id: 'mageworx.giftCardSection.from_name',
             defaultMessage: 'From name'
         }),
         "your_message": formatMessage({
-            id: 'MageWorx.giftCardSection.your_message',
+            id: 'mageworx.giftCardSection.your_message',
             defaultMessage: 'Message'
         }),
         "delivery_date": formatMessage({
-            id: 'MageWorx.giftCardSection.delivery_date',
+            id: 'mageworx.giftCardSection.delivery_date',
             defaultMessage: 'Delivery date'
         }),
     }

src/UI/molecules/GiftCardSummary/giftCardSummary.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import { useStyle } from '@magento/venia-ui/lib/classify';
-import getFormattedPrice from "../../../features/Common/getFormattedPrice/getFormattedPrice";
+import getFormattedPrice from "../../../features/common/getFormattedPrice/getFormattedPrice";
 
 const MINUS_SYMBOL = '-';
 
@@ -23,7 +23,7 @@ export default props => {
         <Fragment>
             <span className={classes.lineItemLabel}>
                 <FormattedMessage
-                    id={'MageWorx.giftCardSummary.lineItemLabel'}
+                    id={'mageworx.giftCardSummary.lineItemLabel'}
                     defaultMessage={'Gift Card(s) applied'}
                 />
             </span>

src/UI/molecules/Selection/select.js

@@ -2,9 +2,9 @@ import React from 'react';
 import { ChevronDown as ChevronDownIcon } from 'react-feather';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import Icon from "@magento/venia-ui/lib/components/Icon";
-import getFormattedPrice from "../../../features/Common/getFormattedPrice/getFormattedPrice";
+import getFormattedPrice from "../../../features/common/getFormattedPrice/getFormattedPrice";
 import FieldIcons from "../Field/fieldIcons";
-import defaultClasses from './select.css';
+import defaultClasses from './select.module.css';
 
 const arrow = <Icon src={ChevronDownIcon} size={24} />;
 

src/UI/molecules/Selection/select.css → src/UI/molecules/Selection/select.module.css

@@ -8,7 +8,7 @@
 
 .input,
 .input_error {
-    composes: input from '../Field/field.css';
+    composes: input from '../Field/field.module.css';
     grid-area: input-start / input-start / input-end / icon-end;
     padding-right: calc(2.25rem - 1px);
 }