@php
$templateComponents = $whatsAppTemplateData['components'];
$templateButtons = Arr::first($templateComponents, function ($value, $key) {
return $value['type'] == 'BUTTONS';
});
@endphp
index + 1 }}' : {
buttonType : '{{ $templateComponentButton['type'] }}',
buttonIndex : {{ $loop->index + 1 }}
},
@endforeach
@endif
},
},
goToStep(stepIndex) {
this.currentStep = stepIndex;
this.updateProgress();
},
nextStep() {
let maxStep = this.templateType === 'header' ? 3 : 2;
if (this.currentStep < maxStep) {
this.currentStep++;
this.updateProgress();
}
},
prevStep() {
if (this.currentStep > 0) {
this.currentStep--;
this.updateProgress();
}
},
updateProgress() {
const progress = document.getElementById('progress');
const allSteps = document.querySelectorAll('.step');
const visibleSteps = Array.from(allSteps).filter(step => step.offsetParent !== null);
const progressPercent = (this.currentStep / (visibleSteps.length - 1)) * 100;
progress.style.width = progressPercent + '%';
visibleSteps.forEach((step, index) => {
step.classList.remove('active', 'completed');
if (index < this.currentStep) {
step.classList.add('completed');
} else if (index === this.currentStep) {
step.classList.add('active');
}
});
},
addWhatsAppButtonOption : function(buttonType) {
{{-- let uniqueBtnId = _.uniqueId(); --}}
let uniqueBtnId = _.size(this.customButtons.data) + 1;
this.customButtons.data[uniqueBtnId] = {
buttonType : buttonType,
buttonIndex : uniqueBtnId
};
this.buttonModels[uniqueBtnId] = {
'text_value': '',
'example_value': '',
};
this.customButtons.totalButtonsUsed++;
if((buttonType == 'URL_BUTTON') || (buttonType == 'DYNAMIC_URL_BUTTON')) {
this.customButtons.buttonUsesByTypes['URL_BUTTON']++;
} else if((buttonType == 'COPY_CODE')) {
this.customButtons.buttonUsesByTypes['COPY_CODE']++;
} else if((buttonType == 'VOICE_CALL')) {
this.customButtons.buttonUsesByTypes['VOICE_CALL']++;
} else if((buttonType == 'PHONE_NUMBER')) {
this.customButtons.buttonUsesByTypes['PHONE_NUMBER']++;
}
}, deleteWhatsAppButtonOption : function(buttonIndex) {
let buttonType = this.customButtons.data[buttonIndex]['buttonType'];
if((buttonType == 'URL_BUTTON') || (buttonType == 'DYNAMIC_URL_BUTTON')) {
this.customButtons.buttonUsesByTypes['URL_BUTTON']--;
} else if((buttonType == 'COPY_CODE')) {
this.customButtons.buttonUsesByTypes['COPY_CODE']-- ;
} else if((buttonType == 'VOICE_CALL')) {
this.customButtons.buttonUsesByTypes['VOICE_CALL']-- ;
} else if((buttonType == 'PHONE_NUMBER')) {
this.customButtons.buttonUsesByTypes['PHONE_NUMBER']-- ;
}
delete this.customButtons.data[buttonIndex];
delete this.buttonModels[buttonIndex];
this.customButtons.totalButtonsUsed--;
}, addNewCard : function() {
if (this.carouselTemplateContainer.length >= this.totalAllowCards) return;
const baseCard = this.carouselTemplateContainer[0];
this.carouselTemplateContainer.push({
headerType: '',
bodyText: '',
bodyTextVariables: [],
cardButtons: JSON.parse(JSON.stringify(baseCard.cardButtons))
});
this.totalUsedCards++;
}, deleteCard: function(index) {
this.carouselTemplateContainer.splice(index, 1);
this.totalUsedCards--;
}, loadPlugin: function() {
window.lwPluginsInit();
}, addNewVariable: function(targetId, templateType) {
addNewPlaceholder(targetId, templateType);
this.$nextTick(() => {
this.$refs.lwCardBodyTextarea.dispatchEvent(new Event('input'));
});
}, addCardButtonOptions: function(index, buttonType) {
var btnData = {};
let uniqueId = _.uniqueId();
if (buttonType == 'QUICK_REPLY') {
btnData = {
buttonType : buttonType,
buttonText: '',
buttonIndex : Number(uniqueId)
};
}
if (buttonType == 'PHONE_NUMBER') {
btnData = {
buttonType : buttonType,
buttonText: '',
phoneNumber: '',
buttonIndex : Number(uniqueId)
};
}
if (buttonType == 'URL') {
btnData = {
buttonType : buttonType,
buttonText: '',
url: '',
example: '',
buttonIndex : Number(uniqueId)
};
}
this.carouselTemplateContainer[index]['cardButtons']['data'].push(btnData);
_.forEach(this.carouselTemplateContainer, function(item, key) {
if (key >= 1) {
item.cardButtons.data.push(btnData);
}
});
this.totalButtonsUsed++;
if (_.has(this.carouselTemplateContainer[index]['cardButtons']['buttonUsesByTypes'], buttonType)) {
this.carouselTemplateContainer[index]['cardButtons']['buttonUsesByTypes'][buttonType]++;
this.carouselTemplateContainer[index]['cardButtons']['totalButtonsUsed']++;
}
}, deleteCardButtonOption: function(index, buttonIndex, buttonType) {
this.carouselTemplateContainer[index]['cardButtons']['data'].splice(buttonIndex, 1);
_.forEach(this.carouselTemplateContainer, function(item, key) {
if (key >= 1) {
item.cardButtons.data.splice(buttonIndex, 1);
}
});
this.carouselTemplateContainer[index]['cardButtons']['buttonUsesByTypes'][buttonType]--;
this.carouselTemplateContainer[index]['cardButtons']['totalButtonsUsed']--;
}
}">
{{-- OTP and flow templates --}}
@if ((($whatsAppTemplateData['sub_category'] ?? null) == 'FORM') or (($whatsAppTemplateData['category'] ?? null) == 'AUTHENTICATION'))
@else