-
Notifications
You must be signed in to change notification settings - Fork 56
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: custom validation refactor #11
Changes from 3 commits
f4d3340
c83de86
3e66757
001d0b9
6fe990f
e0bab9e
9dd6a42
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,280 @@ | ||
<!-- | ||
{"foo":"bar","style":{"ratio":"2x1"}} | ||
--> | ||
<style> | ||
* { | ||
box-sizing: border-box; | ||
margin: 0; | ||
padding: 0; | ||
} | ||
html { | ||
color: #2d2d2d; | ||
font-family: PayPal-Sans, Helvetica, Arial, sans-serif; | ||
font-size: 14px; | ||
font-weight: 400; | ||
overflow: hidden; | ||
} | ||
img { | ||
display: block; | ||
width: 100%; | ||
height: auto; | ||
} | ||
.message__logo--svg { | ||
position: relative; | ||
} | ||
.message__logo--svg img { | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
width: 100%; | ||
} | ||
.message__logo--svg canvas { | ||
display: block; | ||
width: 100%; | ||
visibility: hidden; | ||
} | ||
@font-face { | ||
font-family: PayPal-Sans; | ||
font-style: normal; | ||
font-weight: 300; | ||
src: url(https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Light.eot); | ||
src: url(https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Light.woff2) | ||
format('woff2'), | ||
url(https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Light.woff) format('woff'), | ||
url(https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Light.svg#69ac2c9fc1e0803e59e06e93859bed03) | ||
format('svg'); | ||
} | ||
@font-face { | ||
font-family: PayPal-Sans; | ||
font-style: normal; | ||
font-weight: 400; | ||
src: url(https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Regular.eot); | ||
src: url(https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Regular.woff2) | ||
format('woff2'), | ||
url(https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Regular.woff) | ||
format('woff'), | ||
url(https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Regular.svg#69ac2c9fc1e0803e59e06e93859bed03) | ||
format('svg'); | ||
} | ||
@font-face { | ||
font-family: PayPal-Sans; | ||
font-style: normal; | ||
font-weight: 500; | ||
src: url(https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Medium.eot); | ||
src: url(https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Medium.woff2) | ||
format('woff2'), | ||
url(https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Medium.woff) format('woff'), | ||
url(https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Medium.svg#69ac2c9fc1e0803e59e06e93859bed03) | ||
format('svg'); | ||
} | ||
@font-face { | ||
font-family: PayPal-Sans; | ||
font-style: normal; | ||
font-weight: 700; | ||
src: url(https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Bold.eot); | ||
src: url(https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Bold.woff2) | ||
format('woff2'), | ||
url(https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Bold.woff) format('woff'), | ||
url(https://www.paypalobjects.com/ui-web/paypal-sans-small/1-0-0/PayPalSansSmall-Bold.svg#69ac2c9fc1e0803e59e06e93859bed03) | ||
format('svg'); | ||
} | ||
@font-face { | ||
font-family: PayPal-Sans-Big; | ||
font-style: normal; | ||
font-weight: 200; | ||
src: url(https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Thin.eot); | ||
src: url(https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Thin.woff2) format('woff2'), | ||
url(https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Thin.woff) format('woff'), | ||
url(https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Thin.svg#69ac2c9fc1e0803e59e06e93859bed03) | ||
format('svg'); | ||
} | ||
@font-face { | ||
font-family: PayPal-Sans-Big; | ||
font-style: normal; | ||
font-weight: 300; | ||
src: url(https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Light.eot); | ||
src: url(https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Light.woff2) format('woff2'), | ||
url(https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Light.woff) format('woff'), | ||
url(https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Light.svg#69ac2c9fc1e0803e59e06e93859bed03) | ||
format('svg'); | ||
} | ||
@font-face { | ||
font-family: PayPal-Sans-Big; | ||
font-style: normal; | ||
font-weight: 400; | ||
src: url(https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Regular.eot); | ||
src: url(https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Regular.woff2) format('woff2'), | ||
url(https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Regular.woff) format('woff'), | ||
url(https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Regular.svg#69ac2c9fc1e0803e59e06e93859bed03) | ||
format('svg'); | ||
} | ||
@font-face { | ||
font-family: PayPal-Sans-Big; | ||
font-style: normal; | ||
font-weight: 500; | ||
src: url(https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Medium.eot); | ||
src: url(https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Medium.woff2) format('woff2'), | ||
url(https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Medium.woff) format('woff'), | ||
url(https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Medium.svg#69ac2c9fc1e0803e59e06e93859bed03) | ||
format('svg'); | ||
} | ||
@font-face { | ||
font-family: PayPal-Sans-Big; | ||
font-style: normal; | ||
font-weight: 700; | ||
src: url(https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Bold.eot); | ||
src: url(https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Bold.woff2) format('woff2'), | ||
url(https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Bold.woff) format('woff'), | ||
url(https://www.paypalobjects.com/ui-web/paypal-sans-big/1-0-0/PayPalSansBig-Bold.svg#69ac2c9fc1e0803e59e06e93859bed03) | ||
format('svg'); | ||
} | ||
.message { | ||
display: block; | ||
width: 100%; | ||
color: #2c2e2f; | ||
cursor: pointer; | ||
} | ||
.message__container { | ||
min-width: 100%; | ||
} | ||
.message__content { | ||
align-items: center; | ||
display: -webkit-inline-box; | ||
display: -webkit-inline-flex; | ||
display: inline-flex; | ||
-webkit-box-align: center; | ||
-webkit-align-items: center; | ||
margin: auto; | ||
} | ||
.message__content-container { | ||
align-items: center; | ||
width: 100%; | ||
background: #00b289; | ||
background: -moz-linear-gradient(90deg, rgba(0, 178, 137, 1) 0, rgba(0, 155, 223, 1) 100%); | ||
background: -webkit-linear-gradient(90deg, rgba(0, 178, 137, 1) 0, rgba(0, 155, 223, 1) 100%); | ||
background: linear-gradient(90deg, rgba(0, 178, 137, 1) 0, rgba(0, 155, 223, 1) 100%); | ||
text-align: center; | ||
padding: 0 14px; | ||
display: flex; | ||
height: 70px; | ||
} | ||
.message__logo-container { | ||
-webkit-box-flex: 0; | ||
-webkit-flex: 0 0 auto; | ||
flex: 0 0 auto; | ||
width: 70px; | ||
margin-right: 0.8rem; | ||
} | ||
.message__messaging { | ||
line-height: 1.3; | ||
white-space: normal; | ||
margin-right: 0.8rem; | ||
} | ||
.message__messaging span.br { | ||
white-space: nowrap; | ||
} | ||
.message__promo-container { | ||
display: inline; | ||
} | ||
.message__headline { | ||
display: inline; | ||
font-weight: 400; | ||
font-size: 12px; | ||
} | ||
.message__sub-headline { | ||
display: none; | ||
} | ||
.message__disclaimer { | ||
display: inline; | ||
white-space: nowrap; | ||
font-size: 12px; | ||
font-weight: 100; | ||
line-height: 16px; | ||
} | ||
.message__disclaimer > span { | ||
color: #0076ff; | ||
text-decoration: underline; | ||
} | ||
.message__disclaimer > span.multi:first-of-type { | ||
color: #fff; | ||
text-decoration: none; | ||
} | ||
.message__logo-container { | ||
width: 120px; | ||
} | ||
.message__headline span:only-child { | ||
white-space: nowrap; | ||
} | ||
.message, | ||
.message__disclaimer span, | ||
.message__headline { | ||
color: #fff; | ||
} | ||
.message__headline span.multi:nth-child(2) { | ||
display: none; | ||
} | ||
.mobile { | ||
display: none; | ||
} | ||
@media (max-width: 700px) { | ||
.message__messaging { | ||
width: 100%; | ||
text-align: left; | ||
} | ||
.desktop { | ||
display: none; | ||
} | ||
.mobile { | ||
display: block; | ||
} | ||
.message__logo-container { | ||
width: 85px; | ||
} | ||
.message__headline { | ||
display: block; | ||
} | ||
} | ||
@media (min-width: 700px) { | ||
.message__headline span.multi:first-child { | ||
display: none; | ||
} | ||
.message__headline span.multi:nth-child(2) { | ||
display: inline; | ||
} | ||
} | ||
@media (max-width: 375px) { | ||
.message__disclaimer { | ||
font-size: 10px; | ||
} | ||
.message__logo-container { | ||
width: 70px; | ||
} | ||
} | ||
</style> | ||
<div class="message__container"> | ||
<div class="message__foreground"></div> | ||
<div class="message__content-container"> | ||
<div class="message__content"> | ||
<div class="message__logo-container" data-pp-tag="alternative.white"> | ||
<img class=desktop | ||
src=https://www.paypalobjects.com/digitalassets/c/website/marketing/na/us/campaign-studio/PPC_Credit_Logo_White_Alternative.png> | ||
<img class=mobile | ||
src=https://www.paypalobjects.com/digitalassets/c/website/marketing/na/us/campaign-studio/PPC_Credit_Logo_White.png> | ||
</div> | ||
<div class="message__messaging"> | ||
<div class="message__promo-container"> | ||
<h5 class="message__headline"> | ||
<span class="multi tag--xsmall" data-pp-tag="xsmall">{{ headline.medium }}</span> | ||
<span class="multi tag--medium" data-pp-tag="medium">{{ headline.medium }}</span> | ||
</h5> | ||
<h6 class="message__sub-headline"></h6> | ||
</div> | ||
<p class="message__disclaimer"> | ||
<span class="multi tag--extra" data-pp-tag="extra">Subject to credit approval.</span> | ||
<span class="multi tag--xsmall" data-pp-tag="xsmall">{{ disclaimer.xsmall }}</span> | ||
</p> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="message__background"></div> | ||
</div> |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,20 +4,21 @@ | |
<title>Messaging.js Dev Sandbox</title> | ||
<meta charset="UTF-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> | ||
<script src="./messaging.js" data-pp-account="DEV000NINONUS"></script> | ||
<script src="./messaging.js"></script> | ||
</head> | ||
<body> | ||
<div class="messages" data-pp-message></div> | ||
<script> | ||
// paypal | ||
// .Messages({ | ||
// style: { | ||
// layout: 'flex', | ||
// ratio: '20x1', | ||
// color: 'white-no-border' | ||
// } | ||
// }) | ||
// .render('.messages'); | ||
paypal | ||
.Messages({ | ||
account: 'TMW5TEF2KZESG', | ||
amount: '500', | ||
style: { | ||
layout: 'custom', | ||
markup: 'https://localhost.paypal.com:8080/custom.html' | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We should probably refrain from committing changes to the demo pages, especially with for non-general use-cases. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah I'm gonna revert this back. For now though I wanted Ryan to have an easily accessible demo page to test the story. |
||
} | ||
}) | ||
.render('.messages'); | ||
</script> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -56,16 +56,13 @@ const Banner = { | |||||
|
||||||
function render(totalOptions) { | ||||||
const options = validateOptions(totalOptions); | ||||||
const renderProm = getBannerMarkup(options) // Promise<Object(markup)> | ||||||
const renderProm = getBannerMarkup(options) // Promise<Object({ markup, options })> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Done. |
||||||
.then( | ||||||
pipe( | ||||||
partial(objectAssign, { options }), // Object(markup, options) | ||||||
insertMarkup // Promise<Object(meta)> | ||||||
) | ||||||
insertMarkup // Promise<Object(meta)> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Done. |
||||||
) | ||||||
.then( | ||||||
pipe( | ||||||
partial(objectAssign, { wrapper, options, events }), // Object(meta, wrapper, options, events) | ||||||
partial(objectAssign, { wrapper, events }), // Object(meta, wrapper, options, events) | ||||||
concatTracker, // Object(meta, wrapper, options, events, track) | ||||||
passThrough(Modal.init), // Object(meta, wrapper, options, events, track) | ||||||
passThrough(setSize), // Object(meta, wrapper, options, events, track) | ||||||
|
@@ -76,7 +73,6 @@ const Banner = { | |||||
.catch(err => logger.error({ error: `${err}` })); | ||||||
|
||||||
logger.waitFor(renderProm); | ||||||
|
||||||
updateOptions(options); | ||||||
} | ||||||
|
||||||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we want an example of this in our repo?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this can get reverted back along with the demo page.