How to make PO field Mandatory for specefic subsidiary orders

Here we learn how to make a PO field Mandatory for specefic subsidiary orders based on if the PO number field is empty or not.

Example:
Template:
<div class="order-wizard-paymentmethod-purchasenumber-module">
	<h3 class="order-wizard-paymentmethod-purchasenumber-module-title">
		{{translate 'Purchase Order Number'}}
	</h3>
	<div class="order-wizard-paymentmethod-purchasenumber-module-row">
		<label for="purchase-order-number"
			class="order-wizard-paymentmethod-purchasenumber-module-purchase-order-label">
			{{translate 'Enter Purchase Order Number'}}
			{{#if isSubsidiaryUK}}
			<span class="order-wizard-paymentmethod-purchasenumber-module-purchase-order-optional"
				style="color: rgba(255, 0, 0,1);"> {{ translate '*' }}
			</span>
			{{else}}
			<span class="order-wizard-paymentmethod-purchasenumber-module-purchase-order-optional"> 
				{{ translate '(Optional)' }}
			</span>
			{{/if}}
		</label>
		<input type="text" name="purchase-order-number" id="purchase-order-number"
			class="order-wizard-paymentmethod-purchasenumber-module-purchase-order-value" value="{{purchaseNumber}}">
		<div id="po-error-message" class="error-message" style="display: none; color: rgba(255, 0, 0,1);"></div>
	</div>
</div>


JavaScript:
Find and extend the correct view and use the below code,

_.extend(OrderWizardModulePaymentMethodPurchaseNumber.prototype, {
	template: jj_CheckoutPagePurchaseOrderField_CheckoutPagePurchaseOrderField_tpl,

getContext: _.wrap(OrderWizardModulePaymentMethodPurchaseNumber.prototype.getContext, function (fn) {
	let original_Ret = fn.apply(this, _.toArray(arguments).slice(1));
	var profile = ProfileModel.getInstance();
	var subsidiary = profile.get('subsidiary');
	var isSubsidiaryUK = false;
	if(subsidiary === '12'){
		isSubsidiaryUK = true;
	}

	original_Ret.isSubsidiaryUK = isSubsidiaryUK;

	return original_Ret;
}),

submit: _.wrap(OrderWizardModulePaymentMethodPurchaseNumber.prototype.submit, function (originalSubmit, e) {
	var currentStep = this.wizard.currentStep;
	var profile = ProfileModel.getInstance();
	var subsidiary = profile.get('subsidiary');
	var errorMessage = document.getElementById('po-error-message');
	var purchase_order_number = this.$('[name=purchase-order-number]').val() || '';
	var poNumber = purchase_order_number.trim(' ');

	if (currentStep == 'billing') {
	if (subsidiary === '12' && (poNumber === null || poNumber === '')) {
	errorMessage.textContent = 'Please enter the Purchase Order Number.';
	errorMessage.style.display = 'block';
	$('[data-type="alert-placeholder-step"]').css('display', 'none');
	setTimeout(() => {
		$("html, body").animate({
			scrollTop: $('.order-wizard-paymentmethod-purchasenumber-module-title').offset().top - 70
			}, 10);
		}, 10);
	return jQuery.Deferred().reject();
	}
	else {
		errorMessage.textContent = '';
		errorMessage.style.display = 'none';
	}
}
	originalSubmit.call(this, e);
})
})

Leave a comment

Your email address will not be published. Required fields are marked *