From 718df45601aac2d84dd6f94943d4e88b6ff83f4a Mon Sep 17 00:00:00 2001 From: Pedro Soares Date: Wed, 5 Feb 2020 16:37:16 -0300 Subject: [PATCH 1/7] Initial setup and comunication with iframe --- manifest.json | 6 +- react/.eslintrc | 5 +- react/Example.tsx | 49 ------------- react/Payment.tsx | 58 ++++++++++++++++ react/package.json | 5 +- react/tsconfig.json | 2 +- react/typings/post-robot.d.ts | 1 + react/yarn.lock | 125 ++++++++++++++++++++++++++++++++-- store/interfaces.json | 8 ++- store/routes.json | 5 ++ 10 files changed, 200 insertions(+), 64 deletions(-) delete mode 100644 react/Example.tsx create mode 100644 react/Payment.tsx create mode 100644 react/typings/post-robot.d.ts create mode 100644 store/routes.json diff --git a/manifest.json b/manifest.json index 0b1f193..ab25998 100644 --- a/manifest.json +++ b/manifest.json @@ -1,15 +1,15 @@ { "vendor": "vtex", - "name": "base-store-component", + "name": "payment", "version": "0.2.2", "title": "IO Base Component", "description": "IO Base component", "defaultLocale": "pt-BR", "builders": { "messages": "1.x", - "store": "0.x", "react": "3.x", - "docs": "0.x" + "docs": "0.x", + "store": "0.x" }, "mustUpdateAt": "2019-04-02", "scripts": { diff --git a/react/.eslintrc b/react/.eslintrc index f063929..0950943 100644 --- a/react/.eslintrc +++ b/react/.eslintrc @@ -4,5 +4,8 @@ "browser": true, "es6": true, "jest": true + }, + "rules": { + "@typescript-eslint/no-non-null-assertion": "off" } -} +} \ No newline at end of file diff --git a/react/Example.tsx b/react/Example.tsx deleted file mode 100644 index 196f5a9..0000000 --- a/react/Example.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React, { useState } from 'react' -import { Input } from 'vtex.styleguide' -import { FormattedMessage } from 'react-intl' - -import TranslatedTitle from './components/TranslatedTitle' - -import styles from './styles.css' - -const Example: StorefrontFunctionComponent = ({ title }) => { - const [inputValue, setValue] = useState(null) - - return ( -
- -
- -
- ) => - setValue(e.target.value) - } - /> -
- ) -} - -interface ExampleProps { - title?: string -} - -Example.schema = { - title: 'editor.base-store-component.title', - description: 'editor.base-store-component.description', - type: 'object', - properties: { - title: { - title: 'editor.base-store-component.title.title', - description: 'editor.base-store-component.title.description', - type: 'string', - default: null, - }, - }, -} - -export default Example diff --git a/react/Payment.tsx b/react/Payment.tsx new file mode 100644 index 0000000..10e5220 --- /dev/null +++ b/react/Payment.tsx @@ -0,0 +1,58 @@ +import React, { useState, useRef, useEffect } from 'react' + +if (window && window.document) { + // eslint-disable-next-line @typescript-eslint/no-var-requires + var postRobot = require('post-robot') +} + +interface Card { + cardNumber: string + cardName: string + cardDate: string + cardCvv: string +} + +const Payment: React.FC = () => { + const [iframeData, setIframeData] = useState(null) + const iframeRef = useRef(null) + + const setupIframe = () => { + const stylesheetsUrls = Array.from( + document.head.querySelectorAll('link[rel=stylesheet]') + ).map(link => link.href) + + postRobot.send(iframeRef.current!.contentWindow, 'setup', { + stylesheetsUrls, + }) + } + + const handleLoad = () => { + setupIframe() + } + + useEffect(() => { + const listener = postRobot.on('card', ({ data }: { data: Card }) => { + setIframeData(data) + return { + status: 'ok', + } + }) + return () => listener.cancel() + }) + + return ( +
+