solution.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. /**
  2. * Copyright © Magento, Inc. All rights reserved.
  3. * See COPYING.txt for license details.
  4. */
  5. define([
  6. 'jquery',
  7. 'uiClass',
  8. 'Magento_Paypal/js/rule',
  9. 'mageUtils',
  10. 'underscore'
  11. ], function ($, Class, Rule, utils, _) {
  12. 'use strict';
  13. return Class.extend({
  14. defaults: {
  15. /**
  16. * The event corresponding to the state change
  17. */
  18. systemEvent: 'change',
  19. /**
  20. * The rules applied after the page is loaded
  21. */
  22. afterLoadRules: [],
  23. /**
  24. * An attribute of the element responsible for the activation of the payment method (data attribute)
  25. */
  26. enableButton: '[data-enable="payment"]',
  27. /**
  28. * An attribute of the element responsible for the activation of the Payflow Express (data attribute)
  29. */
  30. enableExpress: '[data-enable="express"]',
  31. /**
  32. * An attribute of the element responsible for the activation of the
  33. * PayPal Express In-Context Checkout Experience (data attribute)
  34. */
  35. enableInContextPayPal: '[data-enable="in-context-api"]',
  36. /**
  37. * An attribute of the element responsible for the activation of the Payflow Bml (data attribute)
  38. */
  39. enableBml: '[data-enable="bml"]',
  40. /**
  41. * An attribute of the element responsible for the activation of the PayPal Bml (data attribute)
  42. */
  43. enableBmlPayPal: '[data-enable="bml-api"]',
  44. /**
  45. * An attribute of the element responsible for the visibility of the PayPal Merchant Id (data attribute)
  46. */
  47. dependsMerchantId: '[data-enable="merchant-id"]',
  48. /**
  49. * An attribute of the element responsible for the visibility of the Payflow Bml Sort Order (data attribute)
  50. */
  51. dependsBmlSortOrder: '[data-enable="bml-sort-order"]',
  52. /**
  53. * An attribute of the element responsible for the visibility of the PayPal Bml Sort Order (data attribute)
  54. */
  55. dependsBmlApiSortOrder: '[data-enable="bml-api-sort-order"]',
  56. /**
  57. * An attribute of the element responsible for the visibility of the
  58. * button Label credit option (data attribute)
  59. */
  60. dependsButtonLabel: '[data-enable="button-label"]',
  61. /**
  62. * An attribute of the element responsible for the visibility of the
  63. * button Label credit option on load (data attribute)
  64. */
  65. dependsDisableFundingOptions: '[data-enable="disable-funding-options"]',
  66. /**
  67. * Templates element selectors
  68. */
  69. templates: {
  70. elementSelector: 'div.section-config tr[id$="${ $.identifier }"]:first'
  71. }
  72. },
  73. /**
  74. * Constructor
  75. *
  76. * @param {Object} config
  77. * @param {String} identifier
  78. * @returns {exports.initialize}
  79. */
  80. initialize: function (config, identifier) {
  81. this.initConfig(config);
  82. this.$self = this.createElement(identifier);
  83. return this;
  84. },
  85. /**
  86. * Initialization events
  87. *
  88. * @returns {exports.initEvents}
  89. */
  90. initEvents: function () {
  91. _.each(this.config.events, function (elementEvents, selector) {
  92. var solution = this,
  93. selectorButton = solution.$self.find(selector),
  94. $self = solution.$self,
  95. events = elementEvents;
  96. selectorButton.on(solution.systemEvent, function () {
  97. _.each(events, function (elementEvent, name) {
  98. var predicate = elementEvent.predicate,
  99. result = true,
  100. /**
  101. * @param {Function} functionPredicate
  102. */
  103. predicateCallback = function (functionPredicate) {
  104. result = functionPredicate(solution, predicate.message, predicate.argument);
  105. if (result) {
  106. $self.trigger(name);
  107. } else {
  108. $self.trigger(predicate.event);
  109. }
  110. };
  111. if (solution.getValue($(this)) === elementEvent.value ||
  112. $(this).prop('multiple') && solution.checkMultiselectValue($(this), elementEvent)
  113. ) {
  114. if (predicate.name) {
  115. require([
  116. 'Magento_Paypal/js/predicate/' + predicate.name
  117. ], predicateCallback);
  118. } else {
  119. $self.trigger(name);
  120. }
  121. }
  122. }, this);
  123. });
  124. }, this);
  125. return this;
  126. },
  127. /**
  128. * @param {Object} $element
  129. * @returns {*}
  130. */
  131. getValue: function ($element) {
  132. if ($element.is(':checkbox')) {
  133. return $element.prop('checked') ? '1' : '0';
  134. }
  135. return $element.val();
  136. },
  137. /**
  138. * Check multiselect value based on include value
  139. *
  140. * @param {Object} $element
  141. * @param {Object} elementEvent
  142. * @returns {Boolean}
  143. */
  144. checkMultiselectValue: function ($element, elementEvent) {
  145. var isValueSelected = $.inArray(elementEvent.value, $element.val()) >= 0;
  146. if (elementEvent.include) {
  147. isValueSelected = (isValueSelected ? 'true' : 'false') === elementEvent.include;
  148. }
  149. return isValueSelected;
  150. },
  151. /**
  152. * Adding event listeners
  153. *
  154. * @returns {exports.addListeners}
  155. */
  156. addListeners: function () {
  157. _.each(this.config.relations, function (rules, targetName) {
  158. var $target = this.createElement(targetName);
  159. _.each(rules, function (instances, instanceName) {
  160. _.each(instances, function (instance) {
  161. var handler = new Rule({
  162. name: instanceName,
  163. $target: $target,
  164. $owner: this.$self,
  165. data: {
  166. buttonConfiguration: this.buttonConfiguration,
  167. enableButton: this.enableButton,
  168. enableExpress: this.enableExpress,
  169. enableInContextPayPal: this.enableInContextPayPal,
  170. enableBml: this.enableBml,
  171. enableBmlPayPal: this.enableBmlPayPal,
  172. dependsMerchantId: this.dependsMerchantId,
  173. dependsBmlSortOrder: this.dependsBmlSortOrder,
  174. dependsBmlApiSortOrder: this.dependsBmlApiSortOrder,
  175. dependsButtonLabel: this.dependsButtonLabel,
  176. dependsDisableFundingOptions: this.dependsDisableFundingOptions,
  177. solutionsElements: this.solutionsElements,
  178. argument: instance.argument
  179. }
  180. });
  181. if (instance.event === ':load') {
  182. this.afterLoadRules.push(handler);
  183. return;
  184. }
  185. this.$self.on(instance.event, _.bind(handler.apply, handler));
  186. }, this);
  187. }, this);
  188. }, this);
  189. return this;
  190. },
  191. /**
  192. * Create a jQuery element according to selector
  193. *
  194. * @param {String} identifier
  195. * @returns {*}
  196. */
  197. createElement: function (identifier) {
  198. if (identifier === ':self') {
  199. return this.$self;
  200. }
  201. return $(utils.template(this.templates.elementSelector, {
  202. 'identifier': identifier
  203. }));
  204. },
  205. /**
  206. * Assign solutions elements
  207. *
  208. * @param {Object} elements
  209. * @returns {exports.setSolutionsElements}
  210. */
  211. setSolutionsElements: function (elements) {
  212. this.solutionsElements = elements;
  213. return this;
  214. }
  215. });
  216. });