How to create a special instruction section in the order approval section or purchase history and make it editable in the respective sales order

We can use this solution to add or edit the special instructions to a sales order from the website when the order is still in pending.

JavaScript:

View File:

Events:
events: {
            'click [data-action="submit-special-instruction"]': 'updateSpecialInstructions',
            'click [data-action="edit-special-instruction"]': 'editSpecialInstruction'
        },
//editSpecialInstruction function is used to make editable the textare section.
        editSpecialInstruction: function () {
            this.isSpecialInsEditable = true;
            this.render();
        },
				//updateSpecialInstructions functiom is used to update the special instuction field which is in sales order. 
				updateSpecialInstructions: function (e) {
					try {
						let self = this;
						let profile = ProfileModel.ProfileModel ? ProfileModel.ProfileModel.getInstance() : ProfileModel.getInstance();
						let customFields = profile.attributes.customfields;
						let checkApprover = _.findWhere(customFields, {
							name: "custentity_jj_approver"
						})
						if (self.model.get('options').custbody_jj_approval_status === '1' && checkApprover.value) {
                            // Get the transactionID
                            $('#special-instructions-submit').prop('disabled', true);
							let transid = self.id;
							let custbody_nssca_additional_instructions = $('#special-instructions').val(); 
							let object = {
								Action: 'Update',
								SO_Id: transid,
								isInstructions : true,
								custbody_nssca_additional_instructions: custbody_nssca_additional_instructions
							}
							let $alert_placeholder = $('div[data-type=alert-placeholder-instruction]')
							this.ApprovalModel.save(object, {
								type: 'POST'
							}).fail(function (error) {
								let messageOut = Utils.translate('Sorry! There is issue while updating the special instructions');
								let alert = new GlobalViewsMessageView({
									message: messageOut,
									type: 'error',
								});
                                alert.show($alert_placeholder, 2000);
                                self.isSpecialInsEditable = false;
                                self.rendered = true;
                                _.delay(() => { self.render() }, 1000);
							}).done(function (result) {
								if (result.success) {
									let messageOut = Utils.translate('Special Instructions updated successfully.');
									let alert = new GlobalViewsMessageView({
										message: result.successMessage ? result.successMessage : messageOut ,
										type: 'success',
									});
                                    self.isSpecialInsEditable = false;
                                    self.rendered = true;
                                    alert.show($alert_placeholder, 2000);
                                    _.delay(() => { self.render() }, 1000);
								} else {
									let messageOut = Utils.translate('Sorry! There is issue while updating the special instructions');
									let alert = new GlobalViewsMessageView({
										message: result.successMessage ? result.successMessage : messageOut,
										type: 'error',
									});
                                    self.isSpecialInsEditable = false;
                                    self.rendered = true;
                                    alert.show($alert_placeholder, 2000);
                                    _.delay(() => { self.render() }, 1000);
								}
							});
						}
					} catch (ex) {
						console.error('Update Special instructions Error', ex);
					}
				},

GetContext:
let specialInstructions = this.ApprovalModel.get('custbody_nssca_additional_instructions') || this.ApprovalModel.get('custbody_nssca_additional_instructions') === '' ? this.ApprovalModel.get('custbody_nssca_additional_instructions') : this.model.get('options') && this.model.get('options').custbody_nssca_additional_instructions ? this.model.get('options').custbody_nssca_additional_instructions : undefined;

Template:

{{#if approverCheck}}
			<div class="order-history-details-accordion-divider">
				<div class="order-history-details-accordion-head">
					<a class="order-history-details-accordion-head-toggle-secondary  {{initiallyCollapsedArrow}}"
					data-toggle="collapse" data-target="#order-special-instructions" aria-expanded="true"
					aria-controls="order-special-instructions">{{translate 'Special Instructions'}}
					<i class="order-history-details-accordion-toggle-icon-secondary"></i>
					</a>
				</div>
				<div class="order-history-details-accordion-body collapse {{initiallyCollapsed}}"
				id="order-special-instructions" role="tabpanel" data-target="#order-special-instructions">
				<div class="order-history-details-accordion-container" data-content="order-items-body">
					<div class="order-history-details-special-instruction-container">
						<div class="form-group-special-instructions">
							<label for="special-instructions" class="special-instructions-label"></label>
							{{#if isSpecialInsEditable}}
							<textarea name="special-instructions" id="special-instructions" cols="30" rows="10">{{specialInstructions}}</textarea>
							{{else}}
							<div id="special-instructions">{{{specialInstructionsHTML}}}</div>
							{{/if}}
						</div>
						<div data-type="alert-placeholder-instruction"></div>
						{{#if showApprove}}
							<div class="special-instruction-buttons">
								<div class="special-instructions-edit-button">
									<button id="special-instructions-edit" data-action="edit-special-instruction">Edit</button>
								</div>
								<div class="special-instructions-submit-button">
									<button id="special-instructions-submit" type="submit" data-action="submit-special-instruction" {{#unless isSpecialInsEditable}} disabled {{/unless}}>Submit</button>
								</div>
							</div>
						{{/if}}
					</div>
				</div>
				</div>
			</div>
			{{/if}}

SCSS:

.order-history-details-special-instruction-container {
  display: flex;
	flex-direction: column;
}
#special-instructions {
  max-width: 100%;
	width: 100%;
}
.special-instruction-buttons {
  display: flex;
  gap: 15px;
}
#special-instructions-edit {
  width: 150px;
  padding: 10px;
  color: #333;
  background-color: #fff;
  margin-top: 10px;
  border: 1px solid #333;
  text-transform: uppercase;
}
#special-instructions-submit {
  width: 150px;
  padding: 10px;
  color: #fff;
  background-color: #333;
  margin-top: 10px;
  border: 1px solid #333;
  text-transform: uppercase;
}