chore: Add prettier (#11)

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,7 +1,6 @@
 ---
 name: Bug report
 about: Create a bug report to help us improve
-
 ---
 
 **What is happening?**
@@ -17,5 +16,6 @@ about: Create a bug report to help us improve
 ...
 
 **Extra information**
+
 - Device:
 - Browser:

.github/ISSUE_TEMPLATE/feature_request.md

@@ -5,6 +5,4 @@ about: Suggest an idea for this project
 
 **Problem**
 
-
 **Proposed solution**
-

.github/ISSUE_TEMPLATE/question.md

@@ -2,4 +2,3 @@
 name: Question
 about: Have questions? We are here to help!
 ---
-

.github/workflows/release.yml

@@ -8,7 +8,7 @@ jobs:
     name: Release
     runs-on: ubuntu-latest
     env:
-      AWS_REGION: 'us-west-1'
+      AWS_REGION: "us-west-1"
       S3_BUCKET: ${{ secrets.S3_BUCKET }}
       S3_KEY: ${{ secrets.S3_KEY }}
       S3_SECRET: ${{ secrets.S3_SECRET }}
@@ -24,7 +24,7 @@ jobs:
 
       - uses: oleksiyrudenko/gha-git-credentials@v1
         with:
-          token: '${{ secrets.GITHUB_TOKEN }}'
+          token: "${{ secrets.GITHUB_TOKEN }}"
 
       - run: echo //registry.npmjs.org/:_authToken=${NPM_TOKEN} > .npmrc
 

.github/workflows/web-ci.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Setup nodejs
         uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: "14"
 
       - name: Checkout
         uses: actions/checkout@master

.github/workflows/web-prd.yml

@@ -11,4 +11,4 @@ jobs:
     steps:
       - name: Notify JIRA
         run: >-
-          curl -X POST -H 'Content-type: application/json' https://automation.atlassian.com/pro/hooks/15e1659919a45c78db98c5032169343383a79c79
+          curl -X POST -H 'Content-type: application/json' https://automation.atlassian.com/pro/hooks/15e1659919a45c78db98c5032169343383a79c79

.vscode/settings.json

@@ -2,11 +2,12 @@
 	"editor.codeActionsOnSave": {
 		"source.fixAll.eslint": true,
 		"source.fixAll.stylelint": true,
-		"source.organizeImports": true,
+		"source.organizeImports": true
 	},
 	"eslint.workingDirectories": [
 		"./packages/pci-sdk-iframe",
 		"./packages/pci-sdk-web"
 	],
-	"typescript.tsdk": "./packages/pci-sdk-iframe/node_modules/typescript/lib"
+	"typescript.tsdk": "./packages/pci-sdk-iframe/node_modules/typescript/lib",
+	"editor.formatOnSave": true
 }

README.md

@@ -1,4 +1,5 @@
 # Apto Web PCI SDK
+
 ![https://img.shields.io/npm/v/@apto-payments/pci-sdk-web?label=%40apto-payments%2Fpci-sdk-web&style=flat-square](https://img.shields.io/npm/v/@apto-payments/pci-sdk-web?label=%40apto-payments%2Fpci-sdk-web&style=flat-square)
 ![https://img.shields.io/npm/v/@apto-payments/pci-sdk-iframe?label=%40apto-payments%2Fpci-sdk-iframe&style=flat-square](https://img.shields.io/npm/v/@apto-payments/pci-sdk-iframe?label=%40apto-payments%2Fpci-sdk-iframe&style=flat-square)
 [![](https://data.jsdelivr.com/v1/package/npm/@apto-payments/pci-sdk-web/badge)](https://www.jsdelivr.com/package/npm/@apto-payments/pci-sdk-web)

cypress/integration/pci-sdk-web.spec.js

@@ -1,96 +1,105 @@
 /// <reference types="Cypress" />
 
-
-describe('AptoPCISdk', () => {
+describe("AptoPCISdk", () => {
 	let dummyAuthData;
 	before(() => {
 		dummyAuthData = {
-			cardId: Cypress.env('CARD_ID'),
-			apiKey: Cypress.env('API_KEY'),
-			userToken: Cypress.env('USER_TOKEN'),
-			environment: Cypress.env('ENVIRONMENT'),
-		}
-		cy.visit('http://localhost:8080/test.html');
+			cardId: Cypress.env("CARD_ID"),
+			apiKey: Cypress.env("API_KEY"),
+			userToken: Cypress.env("USER_TOKEN"),
+			environment: Cypress.env("ENVIRONMENT"),
+		};
+		cy.visit("http://localhost:8080/test.html");
 	});
 
 	beforeEach(() => {
 		cy.reload();
 	});
 
-	describe('AptoPCISdk.init', () => {
-		it('should render the card inside the iframe when init is called', () => {
+	describe("AptoPCISdk.init", () => {
+		it("should render the card inside the iframe when init is called", () => {
 			cy.getAptoPCISdk(async function (AptoPCISdk) {
 				await AptoPCISdk.init({
 					auth: dummyAuthData,
-					values: { nameOnCard: 'Matias Calvo' }
+					values: { nameOnCard: "Matias Calvo" },
 				});
-				cy.getAptoIframe().find('#name').should('include.text', 'Matias Calvo');
+				cy.getAptoIframe().find("#name").should("include.text", "Matias Calvo");
 			});
 		});
 
-		it('should set the theme when specified', () => {
+		it("should set the theme when specified", () => {
 			cy.getAptoPCISdk(async function (AptoPCISdk) {
 				await AptoPCISdk.init({
 					auth: dummyAuthData,
-					theme: 'dark'
+					theme: "dark",
 				});
-				cy.getAptoIframe().find('#name').should('have.css', 'color', 'rgb(255, 255, 255)');
+				cy.getAptoIframe()
+					.find("#name")
+					.should("have.css", "color", "rgb(255, 255, 255)");
 			});
 		});
 
-		it('should allow user to specify target element for iframe', () => {
-			cy.document().then(doc => {
+		it("should allow user to specify target element for iframe", () => {
+			cy.document().then((doc) => {
 				cy.getAptoPCISdk(async function (AptoPCISdk) {
 					await AptoPCISdk.init({
 						auth: dummyAuthData,
-						element: doc.querySelector('.custom-selector'),
+						element: doc.querySelector(".custom-selector"),
 					});
-					cy.get('.custom-selector').find('iframe').should('be.visible');
+					cy.get(".custom-selector").find("iframe").should("be.visible");
 				});
 			});
 		});
 	});
 
-	describe('AptoPCISdk.setTheme', () => {
-		it('should set text color to white if theme is dark', () => {
+	describe("AptoPCISdk.setTheme", () => {
+		it("should set text color to white if theme is dark", () => {
 			cy.getAptoPCISdk(async function (AptoPCISdk) {
 				await AptoPCISdk.init({
 					auth: dummyAuthData,
-					theme: 'light',
+					theme: "light",
 				});
-				AptoPCISdk.setTheme('dark');
+				AptoPCISdk.setTheme("dark");
 				cy.wait(250).then(() => {
-					cy.getAptoIframe().find('#name').should('have.css', 'color', 'rgb(255, 255, 255)');
+					cy.getAptoIframe()
+						.find("#name")
+						.should("have.css", "color", "rgb(255, 255, 255)");
 				});
 			});
 		});
 
-		it('should set text color to black if theme is light', () => {
+		it("should set text color to black if theme is light", () => {
 			cy.getAptoPCISdk(async function (AptoPCISdk) {
 				await AptoPCISdk.init({
 					auth: dummyAuthData,
-					theme: 'dark',
+					theme: "dark",
 				});
-				AptoPCISdk.setTheme('light');
+				AptoPCISdk.setTheme("light");
 				cy.wait(250).then(() => {
-					cy.getAptoIframe().find('#name').should('have.css', 'color', 'rgb(0, 0, 0)');
+					cy.getAptoIframe()
+						.find("#name")
+						.should("have.css", "color", "rgb(0, 0, 0)");
 				});
 			});
 		});
 	});
 
-	describe('AptoPCISdk.setStyle', () => {
+	describe("AptoPCISdk.setStyle", () => {
 		it('should set the card to custom styles when "extend" keyword is not present', () => {
 			cy.getAptoPCISdk(async function (AptoPCISdk) {
 				await AptoPCISdk.init({
 					auth: dummyAuthData,
 				});
 				AptoPCISdk.setStyle({
-					pan: { color: 'blue' }
+					pan: { color: "blue" },
 				});
 				cy.wait(250).then(() => {
-					cy.getAptoIframe().find('#pan').should('have.css', 'color', 'rgb(0, 0, 255)');
-					cy.getAptoIframe().find('#container').should('not.have.css', 'display', 'flex');
+					cy.getAptoIframe()
+						.find("#pan")
+						.should("have.css", "color", "rgb(0, 0, 255)");
+					cy.getAptoIframe()
+						.find("#container")
+						.should("not.have.css", "display", "flex");
 				});
 			});
 		});
@@ -99,15 +108,20 @@ describe('AptoPCISdk', () => {
 			cy.getAptoPCISdk(async function (AptoPCISdk) {
 				await AptoPCISdk.init({
 					auth: dummyAuthData,
-					theme: 'light',
+					theme: "light",
 				});
 				AptoPCISdk.setStyle({
-					extends: 'dark',
-					pan: { color: 'blue' }
+					extends: "dark",
+					pan: { color: "blue" },
 				});
 				cy.wait(250).then(() => {
-					cy.getAptoIframe().find('#pan').should('have.css', 'color', 'rgb(0, 0, 255)');
-					cy.getAptoIframe().find('#container').should('have.css', 'display', 'flex').and('have.css', 'color', 'rgb(255, 255, 255)');
+					cy.getAptoIframe()
+						.find("#pan")
+						.should("have.css", "color", "rgb(0, 0, 255)");
+					cy.getAptoIframe()
+						.find("#container")
+						.should("have.css", "display", "flex")
+						.and("have.css", "color", "rgb(255, 255, 255)");
 				});
 			});
 		});

cypress/plugins/index.js

@@ -11,15 +11,15 @@
 
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
-const dotenvPlugin = require('cypress-dotenv');
+const dotenvPlugin = require("cypress-dotenv");
 
 /**
  * @type {Cypress.PluginConfig}
  */
 module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
+	// `on` is used to hook into various events Cypress emits
 	// `config` is the resolved Cypress config
-	config = dotenvPlugin(config)
+	config = dotenvPlugin(config);
 
-  return config
-}
+	return config;
+};

cypress/support/commands.js

@@ -3,31 +3,37 @@
  * https://on.cypress.io/custom-commands
  ************************************************/
 
-Cypress.Commands.add('getAptoIframe', getAptoIframe);
+Cypress.Commands.add("getAptoIframe", getAptoIframe);
 
 function getAptoIframe() {
 	// get the document
-  return _getIframeDocument()
-  // automatically retries until body is loaded
-  .its('body').should('not.be.undefined')
-  // wraps "body" DOM element to allow
-  // chaining more Cypress commands, like ".find(...)"
-  .then(cy.wrap)
+	return (
+		_getIframeDocument()
+			// automatically retries until body is loaded
+			.its("body")
+			.should("not.be.undefined")
+			// wraps "body" DOM element to allow
+			// chaining more Cypress commands, like ".find(...)"
+			.then(cy.wrap)
+	);
 }
 
 function _getIframeDocument() {
-	return cy
-  .get('iframe[data-cy="pci-sdk-web"]')
-  // Cypress yields jQuery element, which has the real
-  // DOM element under property "0".
-  // From the real DOM iframe element we can get
-  // the "document" element, it is stored in "contentDocument" property
-  // Cypress "its" command can access deep properties using dot notation
-  // https://on.cypress.io/its
-  .its('0.contentDocument').should('exist')
+	return (
+		cy
+			.get('iframe[data-cy="pci-sdk-web"]')
+			// Cypress yields jQuery element, which has the real
+			// DOM element under property "0".
+			// From the real DOM iframe element we can get
+			// the "document" element, it is stored in "contentDocument" property
+			// Cypress "its" command can access deep properties using dot notation
+			// https://on.cypress.io/its
+			.its("0.contentDocument")
+			.should("exist")
+	);
 }
 
-Cypress.Commands.add('getAptoPCISdk', getAptoPCISdk);
+Cypress.Commands.add("getAptoPCISdk", getAptoPCISdk);
 
 function getAptoPCISdk(callback) {
 	return cy.window().then(async (win) => {

cypress/support/index.js

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')