bnbservice-checkout-embed
Version:
Embeddable app to facilitate the request of a service instance
479 lines (433 loc) • 19.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require("babel-runtime/helpers/extends");
var _extends3 = _interopRequireDefault(_extends2);
var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require("babel-runtime/helpers/createClass");
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require("babel-runtime/helpers/inherits");
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _requestForm = require("./forms/request-form.js");
var _requestForm2 = _interopRequireDefault(_requestForm);
var _bnbserviceBaseForm = require("bnbservice-base-form");
var _price = require("./utilities/price.js");
var _reactRedux = require("react-redux");
var _reduxForm = require("redux-form");
var _currencySymbolMap = require("currency-symbol-map");
var _currencySymbolMap2 = _interopRequireDefault(_currencySymbolMap);
var _client = require("./core-input-types/client");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var REQUEST_FORM_NAME = "serviceInstanceRequestForm";
var selector = (0, _reduxForm.formValueSelector)(REQUEST_FORM_NAME); // <-- same as form name
function Summary(props) {
var self = this;
var pricingPlan = props.pricingPlan,
filteredAdjustments = props.filteredAdjustments,
rightHeading = props.rightHeading,
prefix = props.prefix,
total = props.total;
return _react2.default.createElement(
"div",
{ className: "rf--summary-wrapper" },
_react2.default.createElement(
"div",
{ className: "rf--summary" },
_react2.default.createElement(
"div",
{ className: "rf--summary-heading" },
_react2.default.createElement(
"h4",
null,
rightHeading
)
),
_react2.default.createElement(
"div",
{ className: "rf--summary-content" },
pricingPlan.trial_period_days > 0 ? _react2.default.createElement(
"div",
{ className: "rf--free-trial-content" },
pricingPlan.trial_period_days,
" Day Free Trial"
) : null,
pricingPlan.type === "subscription" || pricingPlan.type === "one_time" ? _react2.default.createElement(
"div",
{ className: "rf--pricing-content" },
_react2.default.createElement(
"div",
{ className: "fe--pricing-breakdown-wrapper" },
_react2.default.createElement(
"div",
{ className: "subscription-pricing" },
pricingPlan.type === "subscription" ? _react2.default.createElement(
"div",
{ className: "fe--recurring-fee" },
_react2.default.createElement(
"h5",
null,
"Recurring Fee"
)
) : null,
pricingPlan.type === "one_time" ? _react2.default.createElement(
"div",
{ className: "fe--base-price" },
_react2.default.createElement(
"h5",
null,
"Base Cost"
)
) : null,
_react2.default.createElement(
"div",
{ className: "fe--base-price-value" },
(0, _price.getPrice)(pricingPlan)
)
)
),
filteredAdjustments,
_react2.default.createElement(
"div",
{ className: "fe--total-price-wrapper" },
_react2.default.createElement(
"div",
{ className: "fe--total-price-label" },
_react2.default.createElement(
"h5",
null,
"Total:"
)
),
_react2.default.createElement(
"div",
{ className: "fe--total-price-value" },
_react2.default.createElement(_price.Price, { value: total, prefix: prefix })
)
)
) : null,
pricingPlan.type === "custom" ? _react2.default.createElement(
"div",
{ className: "rf--quote-content" },
"Contact"
) : null
)
)
);
}
var ServiceRequest = function (_React$Component) {
(0, _inherits3.default)(ServiceRequest, _React$Component);
function ServiceRequest(props) {
(0, _classCallCheck3.default)(this, ServiceRequest);
var _this = (0, _possibleConstructorReturn3.default)(this, (ServiceRequest.__proto__ || Object.getPrototypeOf(ServiceRequest)).call(this, props));
_this.state = {
loading: true,
id: _this.props.templateId,
service: null,
image: null,
icon: null,
editingMode: false,
editingGear: false,
error: null,
step: 0
};
_this.getCoverImage = _this.getCoverImage.bind(_this);
_this.getIcon = _this.getIcon.bind(_this);
_this.toggleEditingMode = _this.toggleEditingMode.bind(_this);
_this.toggleOnEditingGear = _this.toggleOnEditingGear.bind(_this);
_this.toggleOffEditingGear = _this.toggleOffEditingGear.bind(_this);
_this.getService = _this.getService.bind(_this);
_this.stepForward = _this.stepForward.bind(_this);
_this.stepBack = _this.stepBack.bind(_this);
return _this;
}
(0, _createClass3.default)(ServiceRequest, [{
key: "componentDidMount",
value: function componentDidMount() {
this.getService();
//this.getCoverImage();
this.getIcon();
}
}, {
key: "getCoverImage",
value: function getCoverImage() {
var self = this;
var imageURL = this.props.url + "/api/v1/service-templates/" + this.state.id + "/image";
fetch(imageURL).then(function (response) {
if (response.ok) {
return response.blob();
}
throw new Error('Network response was not ok.', response);
}).then(function (myBlob) {
var objectURL = URL.createObjectURL(myBlob);
self.setState({ image: objectURL });
}).catch(function (error) {});
}
}, {
key: "stepForward",
value: function stepForward(e) {
this.setState({ step: 1 });
}
}, {
key: "stepBack",
value: function stepBack(e) {
e.preventDefault();
this.setState({ step: 0 });
}
}, {
key: "getIcon",
value: function getIcon() {
var self = this;
fetch("/api/v1/service-templates/" + this.state.id + "/icon").then(function (response) {
if (response.ok) {
return response.blob();
}
throw new Error('Network response was not ok.');
}).then(function (myBlob) {
var objectURL = URL.createObjectURL(myBlob);
self.setState({ icon: objectURL });
}).catch(function (error) {});
}
}, {
key: "toggleEditingMode",
value: function toggleEditingMode() {
if (this.state.editingMode) {
this.setState({ editingMode: false });
} else {
this.setState({ editingMode: true });
}
}
}, {
key: "toggleOnEditingGear",
value: function toggleOnEditingGear() {
this.setState({ editingGear: true });
}
}, {
key: "toggleOffEditingGear",
value: function toggleOffEditingGear() {
this.setState({ editingGear: false });
}
}, {
key: "getService",
value: function getService() {
var self = this;
var headers = new Headers({
"Content-Type": "application/json"
});
var req = {
method: "GET",
headers: headers
};
(0, _bnbserviceBaseForm.Fetcher)(self.props.url + "/api/v1/service-templates/" + this.state.id + "/request", "GET", null, req).then(function (response) {
if (!response.error) {
var propertyOverrides = self.props.propertyOverrides;
response.payment_structure_template_id = self.props.paymentStructureTemplateId;
if (propertyOverrides) {
response.references.service_template_properties = response.references.service_template_properties.map(function (prop) {
if (propertyOverrides[prop.name]) {
prop.prompt_user = false;
prop.private = true;
prop.data = { value: propertyOverrides[prop.name] };
}
return prop;
});
}
self.setState({ service: response });
} else {
if (response.error === "Unauthenticated") {
self.setState({ error: "Error: Trying to request unpublished template" });
}
console.error("Error getting template request data", response);
}
self.setState({ loading: false });
});
}
}, {
key: "getAdjustmentSign",
value: function getAdjustmentSign(adjustment, prefix) {
switch (adjustment.operation) {
case "subtract":
return _react2.default.createElement(
"span",
null,
"- ",
_react2.default.createElement(_price.Price, { value: adjustment.value, prefix: prefix })
);
break;
case "multiply":
return _react2.default.createElement(
"span",
null,
"+ %",
adjustment.value
);
break;
case "divide":
return _react2.default.createElement(
"span",
null,
"- %",
adjustment.value
);
break;
default:
return _react2.default.createElement(
"span",
null,
"+ ",
_react2.default.createElement(_price.Price, { value: adjustment.value, prefix: prefix })
);
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
if (this.state.loading) {
return _react2.default.createElement("span", null);
} else {
var _props = this.props,
formJSON = _props.formJSON,
options = _props.options,
paymentStructureTemplateId = _props.paymentStructureTemplateId;
var _state = this.state,
service = _state.service,
error = _state.error;
var pricingPlan = service.references.tiers.reduce(function (acc, tier) {
var plan = tier.references.payment_structure_templates.find(function (p) {
return p.id == paymentStructureTemplateId;
});
if (plan) {
acc = plan;
}
return acc;
}, null);
if (this.state.error) {
return _react2.default.createElement(
"span",
null,
error
);
}
var prefix = (0, _currencySymbolMap2.default)(service.currency);
var _getPriceData = (0, _client.getPriceData)(pricingPlan && pricingPlan.amount, formJSON && formJSON.references.service_template_properties),
total = _getPriceData.total,
adjustments = _getPriceData.adjustments;
var filteredAdjustments = adjustments.filter(function (adjustment) {
return adjustment.value > 0;
}).map(function (lineItem, index) {
return _react2.default.createElement(
"div",
{ key: "line-" + index, className: "fe--line-item-pricing-wrapper" },
_react2.default.createElement(
"div",
{ className: "subscription-pricing" },
_react2.default.createElement(
"div",
{
className: "fe--line-item" },
lineItem.prop_label
),
_react2.default.createElement(
"div",
{ className: "fe--line-item-price-value" },
_this2.getAdjustmentSign(lineItem, prefix)
)
)
);
});
var splitPricing = service.split_configuration;
var splitTotal = 0;
var rightHeading = "Items";
switch (service.type) {
case 'one_time':
rightHeading = "Payment Summary";
break;
case 'custom':
rightHeading = "Contact";
break;
case 'split':
rightHeading = "Scheduled Payments";
if (splitPricing) {
splitPricing.splits.map(function (split) {
splitTotal += split.amount;
});
}
break;
default:
rightHeading = "Items";
}
var requestClasses = this.props.hideSummary ? "summary-hidden" : "summary-shown";
var summaryProps = {
rightHeading: rightHeading,
pricingPlan: pricingPlan,
filteredAdjustments: filteredAdjustments,
prefix: prefix,
total: total
};
return _react2.default.createElement(
"div",
{ className: "bnbservice--embeddable bnbservice--rf-embeddable bnbservice--request-user-form-wrapper custom" },
_react2.default.createElement(
"div",
{ className: "rf--form-wrapper " + requestClasses },
_react2.default.createElement(
"div",
{ className: "rf--form" },
!this.props.hideHeaders && _react2.default.createElement(
"div",
{ className: "rf--form-heading" },
_react2.default.createElement(
"h4",
null,
service.name
)
),
_react2.default.createElement(
"div",
{ className: "rf--form-content" },
_react2.default.createElement(
"div",
{ className: "rf--basic-info" },
!this.props.hideHeaders && _react2.default.createElement(
"div",
{ className: "rf--details" },
_react2.default.createElement("div", { dangerouslySetInnerHTML: { __html: service.details } })
)
),
_react2.default.createElement(_requestForm2.default, (0, _extends3.default)({ summary: _react2.default.createElement(Summary, summaryProps), plan: pricingPlan }, this.props, { step: this.state.step, stepForward: this.stepForward, stepBack: this.stepBack, service: service }))
)
)
),
_react2.default.createElement(
"div",
{ className: "bnbservice-logo-footer" },
_react2.default.createElement(
"span",
{ className: "_text" },
"Checkout generated by BnbService ",
_react2.default.createElement("img", { src: "" })
)
)
);
}
}
}]);
return ServiceRequest;
}(_react2.default.Component);
function mapStateToProps(state) {
return {
options: {},
formJSON: (0, _reduxForm.getFormValues)(REQUEST_FORM_NAME)(state)
};
}
ServiceRequest = (0, _reactRedux.connect)(mapStateToProps)(ServiceRequest);
var Wrapper = function Wrapper(props) {
return _react2.default.createElement(Provider, { store: store });
};
exports.default = ServiceRequest;