Skip to content

Commit

Permalink
Release braintree-web 3.85.2 source
Browse files Browse the repository at this point in the history
  • Loading branch information
braintreeps committed Jan 21, 2022
1 parent 9831fac commit df38a9b
Show file tree
Hide file tree
Showing 14 changed files with 101 additions and 38 deletions.
8 changes: 8 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
# CHANGELOG

# 3.85.2

- Venmo
- Fix issue where iOS Chrome was reporting as a supported browser when Venmo was configured for desktop
- Improve Venmo modal UX in desktop flow
- UnionPay
- Fix typo in our GraphQL Tokenization CREDIT_CARD_BRAND_MAP

# 3.85.1

- Venmo
Expand Down
2 changes: 1 addition & 1 deletion jsdoc/conf.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@
},
"plugins": ["version-interpolator-plugin", "plugins/markdown"],
"source": {
"excludePattern": "(beta-component-here|preferred-payment-methods)"
"excludePattern": "(beta-component-here|preferred-payment-methods|unionpay)"
}
}
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "braintree-web",
"version": "3.85.1",
"version": "3.85.2",
"license": "MIT",
"main": "src/index.js",
"private": true,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ var CARD_BRAND_MAP = {
JCB: 'JCB',
MASTERCARD: 'MasterCard',
UK_MAESTRO: 'Maestro',
UNION_PAY: 'Union Pay',
UNION_PAY: 'UnionPay',
VISA: 'Visa'
/* eslint-enable camelcase */
};
Expand Down
11 changes: 9 additions & 2 deletions src/venmo/internal/ui-elements/back-view.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
};
Object.defineProperty(exports, "__esModule", { value: true });
var base_1 = __importDefault(require("./base"));
var card_container_1 = __importDefault(require("./card-container"));
var DEFAULT_AUTHORIZE_MESSAGE = "Authorize on your Venmo app";
var V_LOGO_SVG = "\n<svg width=\"98\" height=\"102\" viewBox=\"0 0 98 102\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M92.1214 0.235107C95.8867 6.33106 97.5862 12.608 97.5862 20.5402C97.5862 45.8333 75.5507 78.6923 57.6645 101.765H16.8159L0.434998 5.77487L36.2029 2.4466L44.8635 70.7513C52.959 57.831 62.9439 37.5259 62.9439 23.6831C62.9439 16.1084 61.6196 10.9438 59.5494 6.69743L92.1214 0.235107Z\" fill=\"white\"/>\n</svg>\n";
var CHECKMARK_SVG = "\n<svg width=\"59\" height=\"59\" viewBox=\"0 0 59 59\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"1\" y=\"1\" width=\"57\" height=\"57\" rx=\"28.5\" fill=\"#148572\" stroke=\"#888C94\"/>\n <g clip-path=\"url(#clip0)\">\n <path d=\"M24.0067 40.8397C22.9209 39.7538 22.9209 37.9933 24.0067 36.9075L39.2931 21.621C40.379 20.5352 42.1395 20.5352 43.2254 21.621C44.3112 22.7069 44.3112 24.4674 43.2254 25.5532L27.9389 40.8397C26.8531 41.9255 25.0926 41.9255 24.0067 40.8397Z\" fill=\"white\"/>\n <path d=\"M27.9762 40.8397C26.8904 41.9255 25.1299 41.9255 24.044 40.8397L17.1627 33.9583C16.0768 32.8725 16.0768 31.112 17.1627 30.0261C18.2485 28.9403 20.009 28.9403 21.0949 30.0261L27.9762 36.9075C29.0621 37.9933 29.0621 39.7538 27.9762 40.8397Z\" fill=\"white\"/>\n </g>\n <defs>\n <clipPath id=\"clip0\">\n <rect width=\"27.8049\" height=\"27.8049\" fill=\"white\" transform=\"translate(16.2927 16.2925)\"/>\n </clipPath>\n </defs>\n</svg>\n";
Expand All @@ -42,11 +43,17 @@ var BackView = /** @class */ (function (_super) {
var container = document.createElement("div");
container.className = "view-box";
container.id = "back-view";
container.innerHTML = "\n <div id=\"venmo-authorization\">\n <div id=\"venmo-logo\">\n " + V_LOGO_SVG + "\n\n <div id=\"venmo-checkmark\">\n " + CHECKMARK_SVG + "\n </div>\n </div>\n\n <div id=\"venmo-authorization_message\">" + DEFAULT_AUTHORIZE_MESSAGE + "</div>\n </div>\n ";
var venmoContainer = document.createElement("div");
venmoContainer.id = "venmo-authorization";
venmoContainer.innerHTML = "\n <div id=\"venmo-logo\">\n " + V_LOGO_SVG + "\n\n <div id=\"venmo-checkmark\">\n " + CHECKMARK_SVG + "\n </div>\n </div>\n\n <div id=\"venmo-authorization_message\">" + DEFAULT_AUTHORIZE_MESSAGE + "</div>\n ";
card_container_1.default.create({
container: container,
children: [venmoContainer],
});
return container;
};
BackView.prototype.getStyleConfig = function () {
return "\n #back-view {\n transform: rotateY(-180deg);\n position: absolute;\n }\n\n #view-boxes.is-flipped #back-view {\n transform: rotateY(0deg);\n position: relative;\n }\n\n #venmo-authorization {\n display: flex;\n width: 100%;\n border-radius: 8px;\n background: #0074DE;\n align-items: center;\n justify-content: center;\n position: relative;\n box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.14);\n }\n\n #venmo-logo {\n position: relative;\n height: 102px;\n width: 98px;\n }\n\n #venmo-checkmark {\n position: absolute;\n right: 0;\n bottom: -30px;\n display: none;\n animation: 0.5s appear, 0.5s checkmark-drop;\n }\n\n #venmo-checkmark.active {\n display: block;\n }\n\n #venmo-authorization_message {\n font-size: 18px;\n line-height: 16px;\n text-align: center;\n color: #FFFFFF;\n position: absolute;\n left: 0;\n width: 100%;\n bottom: -30px;\n }\n\n @keyframes checkmark-drop {\n from {\n bottom: 0;\n }\n }\n ";
return "\n #back-view {\n transform: rotateY(-180deg);\n position: absolute;\n visibility: hidden;\n }\n\n #view-boxes.is-flipped #back-view {\n transform: rotateY(0deg);\n position: relative;\n visibility: visible;\n }\n\n #venmo-authorization {\n height: 100%;\n width: 100%;\n position: relative;\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: center;\n }\n\n #venmo-logo {\n position: relative;\n border-radius: 8px;\n display: flex;\n height: 70%;\n width: 70%;\n margin: 10% auto 0;\n background: #008CFF;\n box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.14);\n align-items: center;\n justify-content: center;\n }\n\n #venmo-checkmark {\n position: absolute;\n right: 50px;\n bottom: 20px;\n display: none;\n animation: 0.5s appear, 0.5s checkmark-drop;\n }\n\n #venmo-checkmark.active {\n display: block;\n }\n\n #venmo-authorization_message {\n font-size: 18px;\n line-height: 16px;\n text-align: center;\n color: #2F3033;\n width: 100%;\n height: 20%;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n @keyframes checkmark-drop {\n from {\n bottom: 0;\n }\n }\n ";
};
return BackView;
}(base_1.default));
Expand Down
6 changes: 6 additions & 0 deletions src/venmo/internal/ui-elements/base.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
var add_styles_1 = __importDefault(require("./add-styles"));
var UIElement = /** @class */ (function () {
function UIElement(options) {
var _this = this;
add_styles_1.default(this.getStyleConfig());
this.element = this.constructElement();
if (options.onClick) {
Expand All @@ -14,6 +15,11 @@ var UIElement = /** @class */ (function () {
if (options.onClose) {
this.onClose = options.onClose;
}
if (options.children) {
options.children.forEach(function (child) {
_this.element.appendChild(child);
});
}
options.container.appendChild(this.element);
}
UIElement.create = function (options) {
Expand Down
44 changes: 44 additions & 0 deletions src/venmo/internal/ui-elements/card-container.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var base_1 = __importDefault(require("./base"));
var close_icon_1 = __importDefault(require("./close-icon"));
var CardContainer = /** @class */ (function (_super) {
__extends(CardContainer, _super);
function CardContainer(options) {
var _this = _super.call(this, options) || this;
_this.closeIconContainerElement = _this.$(".close-icon-container");
close_icon_1.default.create({
container: _this.$(".close-icon-container"),
});
return _this;
}
CardContainer.prototype.constructElement = function () {
var container = document.createElement("div");
container.className = "card-container";
container.innerHTML = "\n <div class=\"close-icon-container\"></div>\n ";
return container;
};
CardContainer.prototype.getStyleConfig = function () {
return "\n .card-container {\n display: flex;\n border-radius: 8px;\n background: #FFFFFF;\n border: 1px solid #888C94;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.14);\n animation: 0.5s appear;\n width: 100%;\n }\n ";
};
return CardContainer;
}(base_1.default));
exports.default = CardContainer;
6 changes: 3 additions & 3 deletions src/venmo/internal/ui-elements/close-icon.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,13 @@ var CloseIcon = /** @class */ (function (_super) {
}
CloseIcon.prototype.constructElement = function () {
var container = document.createElement("button");
container.id = "close-icon";
container.className = "close-icon";
container.setAttribute("aria-label", "Close Venmo QR code modal");
container.innerHTML = "\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0.949007 16.2225C0.167958 17.0036 0.167958 18.2699 0.949007 19.051C1.73006 19.832 2.99639 19.832 3.77744 19.051L9.99997 12.8284L16.2225 19.051C17.0036 19.832 18.2699 19.832 19.051 19.051C19.832 18.2699 19.832 17.0036 19.051 16.2225L12.8284 10L19.051 3.7775C19.832 2.99645 19.832 1.73012 19.051 0.949067C18.2699 0.168018 17.0036 0.16802 16.2225 0.949068L9.99997 7.17161L3.77743 0.949068C2.99639 0.16802 1.73006 0.16802 0.949007 0.949068C0.167958 1.73012 0.167959 2.99645 0.949008 3.7775L7.17155 10L0.949007 16.2225Z\" fill=\"#2F3033\"/>\n <mask id=\"mask0\" mask-type=\"alpha\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"20\" height=\"20\">\n <path d=\"M0.949007 16.2225C0.167958 17.0036 0.167958 18.2699 0.949007 19.051C1.73006 19.832 2.99639 19.832 3.77744 19.051L9.99997 12.8284L16.2225 19.051C17.0036 19.832 18.2699 19.832 19.051 19.051C19.832 18.2699 19.832 17.0036 19.051 16.2225L12.8284 10L19.051 3.7775C19.832 2.99645 19.832 1.73012 19.051 0.949067C18.2699 0.168018 17.0036 0.16802 16.2225 0.949068L9.99997 7.17161L3.77743 0.949068C2.99639 0.16802 1.73006 0.16802 0.949007 0.949068C0.167958 1.73012 0.167959 2.99645 0.949008 3.7775L7.17155 10L0.949007 16.2225Z\" fill=\"white\"/>\n </mask>\n <g mask=\"url(#mask0)\">\n <rect width=\"20\" height=\"20\" fill=\"white\"/>\n </g>\n </svg>\n ";
container.innerHTML = "\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0.949068 16.2226C0.168019 17.0036 0.168019 18.27 0.949068 19.051C1.73012 19.8321 2.99645 19.832 3.7775 19.051L10 12.8285L16.2226 19.051C17.0036 19.8321 18.27 19.8321 19.051 19.051C19.8321 18.27 19.832 17.0036 19.051 16.2226L12.8285 10L19.051 3.77749C19.8321 2.99645 19.8321 1.73012 19.051 0.949067C18.27 0.168019 17.0036 0.16802 16.2226 0.949068L10 7.17161L3.77749 0.949068C2.99645 0.16802 1.73012 0.16802 0.949067 0.949068C0.168019 1.73012 0.16802 2.99645 0.949068 3.7775L7.17161 10L0.949068 16.2226Z\" fill=\"#6B6E76\"/>\n </svg>\n\n ";
return container;
};
CloseIcon.prototype.getStyleConfig = function () {
return "\n #close-icon {\n cursor: pointer;\n position: absolute;\n top: 20px;\n right: 20px;\n z-index: 9999;\n background: #2F3033;\n box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);\n border-radius: 100%;\n padding: 10px;\n }\n\n #close-icon svg {\n top: 1px;\n position: relative;\n }\n ";
return "\n .close-icon {\n cursor: pointer;\n position: absolute;\n top: 15px;\n right: 15px;\n z-index: 9999;\n }\n\n .close-icon svg {\n top: 1px;\n position: relative;\n }\n ";
};
return CloseIcon;
}(base_1.default));
Expand Down
7 changes: 0 additions & 7 deletions src/venmo/internal/ui-elements/modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ var base_1 = __importDefault(require("./base"));
var modal_backdrop_1 = __importDefault(require("./modal-backdrop"));
var front_view_1 = __importDefault(require("./front-view"));
var back_view_1 = __importDefault(require("./back-view"));
var close_icon_1 = __importDefault(require("./close-icon"));
var Modal = /** @class */ (function (_super) {
__extends(Modal, _super);
function Modal(options) {
Expand All @@ -37,10 +36,6 @@ var Modal = /** @class */ (function (_super) {
_this.backView = back_view_1.default.create({
container: viewBoxesContainerElement,
});
_this.closeIconContainerElement = _this.$("#close-icon-container");
close_icon_1.default.create({
container: _this.$("#close-icon-container"),
});
return _this;
}
Modal.prototype.close = function () {
Expand Down Expand Up @@ -74,7 +69,6 @@ var Modal = /** @class */ (function (_super) {
};
Modal.prototype.authorize = function () {
this.authorized = true;
this.closeIconContainerElement.classList.add("hidden");
this.showBackFace();
this.backView.authorize();
};
Expand All @@ -86,7 +80,6 @@ var Modal = /** @class */ (function (_super) {
this.authorized = false;
this.hide();
this.showFrontFace();
this.closeIconContainerElement.classList.remove("hidden");
};
Modal.prototype.show = function () {
this.$("#outer-container").classList.remove("hidden");
Expand Down
Loading

0 comments on commit df38a9b

Please sign in to comment.