added new preorderiframe
This commit is contained in:
Luca Haid
@@ -225,7 +225,7 @@
|
||||
<th>Straße</th>
|
||||
<th>Hausnr.</th>
|
||||
<th>Stiege</th>
|
||||
<th>Wohneinheiten</th>
|
||||
<th>Homes/<wbr>Preorders</th>
|
||||
<th>Rimo-ID</th>
|
||||
<th>Rollout Jahr</th>
|
||||
<th>Rollout Info</th>
|
||||
@@ -247,6 +247,12 @@
|
||||
<td><?=count($address->wohneinheiten)?>
|
||||
<span class="text-secondary" title="<?=($address->tool_building_type == 0) ? "Unbekannt" : (($address->tool_building_type == 1) ? "EFH" : "MPH")?>">
|
||||
<i class="fas fa-fw <?=($address->tool_building_type == 0) ? "fa-question" : (($address->tool_building_type == 1) ? "fa-home" : "fa-building")?>"></i>
|
||||
</span>
|
||||
<!-- add here PreorderModel::count['adb_hausnummer_id'] with a order like icon on the right here to display the amount of Orders-->
|
||||
<span class="text-secondary" title="Preorders">
|
||||
<?=PreorderModel::countActive(['adb_hausnummer_id' => $address->id])?><i class="fas fa-fw fa-shopping-cart"></i>
|
||||
</span>
|
||||
|
||||
</td>
|
||||
<td><span><?=str_replace('_', '_<wbr>', $address->rimo_id)?></span>
|
||||
</td>
|
||||
|
||||
@@ -463,7 +463,7 @@ $pagination_entity_name = "Vorbestellungen";
|
||||
|
||||
<div class="preorder-campaign-header">
|
||||
<h4 class="header-title">Liste aller Vorbestellungen<?= (isset($campaign) && $campaign) ? " - " . $campaign->name : "" ?></h4>
|
||||
<?php if ($filter['preordercampaign_id']): ?>
|
||||
<?php if (isset($filter['preordercampaign_id'])): ?>
|
||||
<div class="float-right">
|
||||
<a class="btn btn-primary mb-2"
|
||||
href="<?= self::getUrl("Preorder", "add", ["preordercampaign_id" => $filter['preordercampaign_id']]) ?>"><i
|
||||
|
||||
@@ -285,6 +285,41 @@
|
||||
<small>Für Begleitschreiben - Status 145</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-lg-2 col-form-label" for="iframe_origins">IFrame Origins</label>
|
||||
<div class="col-lg-10">
|
||||
<div id="iframe-origins-container">
|
||||
<!-- Dynamic inputs will be added here -->
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-success mt-2" id="add-iframe-origin">
|
||||
<i class="fas fa-plus"></i> Origin URL
|
||||
</button>
|
||||
<input type="hidden" name="iframe_origins" id="iframe_origins" value=""/>
|
||||
<small class="form-text text-muted">
|
||||
URL's wo der Bestell-Iframe eingebunden werden darf.<br/>
|
||||
Beispiel: https://partner-a.com, https://partner-b.de<br/>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- IFrame Consents -->
|
||||
<div class="form-group row">
|
||||
<label class="col-lg-2 col-form-label" for="iframe_consents">IFrame Consents</label>
|
||||
<div class="col-lg-10">
|
||||
<div id="iframe-consents-container">
|
||||
<!-- Dynamic inputs will be added here -->
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-success mt-2" id="add-iframe-consent">
|
||||
<i class="fas fa-plus"></i> Zustimmung
|
||||
</button>
|
||||
<input type="hidden" name="iframe_consents" id="iframe_consents" value=""/>
|
||||
<small class="form-text text-muted">
|
||||
Zusätzliche Custom Zustimmungen mit Verlinkung
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -702,4 +737,177 @@
|
||||
}
|
||||
<?php endif; ?>
|
||||
</script>
|
||||
|
||||
<!--IFRAME SCRIPT PARTS-->
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Initialize with existing data
|
||||
let iframeOrigins = <?= $campaign->iframe_origins ?? '[]'; ?>;
|
||||
let iframeConsents = <?= $campaign->iframe_consents ?? '[]'; ?>;
|
||||
|
||||
// IFrame Origins Management
|
||||
function renderIframeOrigins() {
|
||||
const container = $('#iframe-origins-container');
|
||||
container.empty();
|
||||
|
||||
iframeOrigins.forEach((origin, index) => {
|
||||
const row = $(`
|
||||
<div class="input-group mb-2">
|
||||
<input type="text" class="form-control iframe-origin-input"
|
||||
placeholder="https://example.com" value="${origin}" data-index="${index}">
|
||||
<div class="input-group-append">
|
||||
<button type="button" class="btn btn-outline-danger remove-iframe-origin" data-index="${index}">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
container.append(row);
|
||||
});
|
||||
|
||||
updateIframeOriginsInput();
|
||||
}
|
||||
|
||||
function updateIframeOriginsInput() {
|
||||
$('#iframe_origins').val(JSON.stringify(iframeOrigins));
|
||||
}
|
||||
|
||||
// Add new iframe origin
|
||||
$('#add-iframe-origin').click(function() {
|
||||
iframeOrigins.push('');
|
||||
renderIframeOrigins();
|
||||
});
|
||||
|
||||
// Remove iframe origin
|
||||
$(document).on('click', '.remove-iframe-origin', function() {
|
||||
const index = $(this).data('index');
|
||||
iframeOrigins.splice(index, 1);
|
||||
renderIframeOrigins();
|
||||
});
|
||||
|
||||
// Update iframe origin value
|
||||
$(document).on('input', '.iframe-origin-input', function() {
|
||||
const index = $(this).data('index');
|
||||
const value = $(this).val();
|
||||
iframeOrigins[index] = value;
|
||||
updateIframeOriginsInput();
|
||||
});
|
||||
|
||||
// IFrame Consents Management
|
||||
function renderIframeConsents() {
|
||||
const container = $('#iframe-consents-container');
|
||||
container.empty();
|
||||
|
||||
iframeConsents.forEach((consent, index) => {
|
||||
const row = $(`
|
||||
<div class="card mb-2">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">URL</label>
|
||||
<input type="text" class="form-control iframe-consent-url"
|
||||
placeholder="https://partner.com" value="${consent.url || ''}" data-index="${index}">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Text</label>
|
||||
<input type="text" class="form-control iframe-consent-text"
|
||||
placeholder="Text" value="${consent.text || ''}" data-index="${index}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">URL Replacer</label>
|
||||
<input type="text" class="form-control iframe-consent-replace"
|
||||
placeholder="Consent" value="${consent.replace || ''}" data-index="${index}">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-check mt-4">
|
||||
<input type="checkbox" class="form-check-input iframe-consent-required"
|
||||
id="consent-required-${index}" data-index="${index}" ${consent.required ? 'checked' : ''}>
|
||||
<label class="form-check-label" for="consent-required-${index}">
|
||||
Erforderlich?
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button type="button" class="btn btn-outline-danger btn-sm mt-4 remove-iframe-consent" data-index="${index}">
|
||||
<i class="fas fa-trash"></i> Entfernen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
container.append(row);
|
||||
});
|
||||
|
||||
updateIframeConsentsInput();
|
||||
}
|
||||
|
||||
function updateIframeConsentsInput() {
|
||||
$('#iframe_consents').val(JSON.stringify(iframeConsents));
|
||||
}
|
||||
|
||||
// Add new iframe consent
|
||||
$('#add-iframe-consent').click(function() {
|
||||
iframeConsents.push({
|
||||
url: '',
|
||||
text: '',
|
||||
required: false,
|
||||
replace: 'Consent'
|
||||
});
|
||||
renderIframeConsents();
|
||||
});
|
||||
|
||||
// Remove iframe consent
|
||||
$(document).on('click', '.remove-iframe-consent', function() {
|
||||
const index = $(this).data('index');
|
||||
iframeConsents.splice(index, 1);
|
||||
renderIframeConsents();
|
||||
});
|
||||
|
||||
// Update iframe consent values
|
||||
$(document).on('input', '.iframe-consent-url', function() {
|
||||
const index = $(this).data('index');
|
||||
const value = $(this).val();
|
||||
iframeConsents[index].url = value;
|
||||
updateIframeConsentsInput();
|
||||
});
|
||||
|
||||
$(document).on('input', '.iframe-consent-text', function() {
|
||||
const index = $(this).data('index');
|
||||
const value = $(this).val();
|
||||
iframeConsents[index].text = value;
|
||||
updateIframeConsentsInput();
|
||||
});
|
||||
|
||||
$(document).on('input', '.iframe-consent-replace', function() {
|
||||
const index = $(this).data('index');
|
||||
const value = $(this).val();
|
||||
iframeConsents[index].replace = value;
|
||||
updateIframeConsentsInput();
|
||||
});
|
||||
|
||||
$(document).on('change', '.iframe-consent-required', function() {
|
||||
const index = $(this).data('index');
|
||||
const checked = $(this).is(':checked');
|
||||
iframeConsents[index].required = checked;
|
||||
updateIframeConsentsInput();
|
||||
});
|
||||
|
||||
// Initial render
|
||||
renderIframeOrigins();
|
||||
renderIframeConsents();
|
||||
|
||||
// Add at least one empty entry if none exist
|
||||
if (iframeOrigins.length === 0) {
|
||||
$('#add-iframe-origin').click();
|
||||
}
|
||||
|
||||
if (iframeConsents.length === 0) {
|
||||
$('#add-iframe-consent').click();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/footer.php"); ?>
|
||||
620
Layout/default/VueViews/PreorderIFrame.php
Normal file
620
Layout/default/VueViews/PreorderIFrame.php
Normal file
@@ -0,0 +1,620 @@
|
||||
<?php
|
||||
//var_dump($JSGlobals);exit;
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="de" class="h-full">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Bestellformular</title>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.27/dist/vue.global.prod.js"></script>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios@1.7.2/dist/axios.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.mfNotify = <?=isset($mfNotify) ? json_encode($mfNotify) : "null"; ?>;
|
||||
window.TT_CONFIG = {};
|
||||
<?php
|
||||
// var_dump($JSGlobals);exit;
|
||||
?>
|
||||
|
||||
<?php
|
||||
if(isset($JSGlobals) && is_array($JSGlobals) && count($JSGlobals)):
|
||||
foreach($JSGlobals as $key => $value): ?>
|
||||
window.TT_CONFIG.<?=$key?> = <?=is_array($value) ? json_encode($value) : "'$value'"; ?>;
|
||||
<?php endforeach; endif;?>
|
||||
</script>
|
||||
|
||||
<style id="theme-style">
|
||||
/* Color Theme CSS Variables will be populated by Vue */
|
||||
:root {}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.slide-fade-enter-active, .slide-fade-leave-active {
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
.slide-fade-enter-from, .slide-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(15px);
|
||||
}
|
||||
/* Default border for inputs for better visibility */
|
||||
.form-input, .form-textarea, .form-select {
|
||||
border-width: 1px;
|
||||
}
|
||||
.custom-select-button {
|
||||
border-width: 1px;
|
||||
}
|
||||
.form-input:focus, .form-select:focus, .custom-select-button:focus-within, .form-textarea:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-color: var(--color-primary-500);
|
||||
box-shadow: 0 0 0 2px var(--tw-ring-color);
|
||||
border-color: var(--color-primary-500);
|
||||
}
|
||||
.wizard-step-active {
|
||||
border-color: var(--color-primary-500);
|
||||
box-shadow: 0 0 0 1px var(--color-primary-500);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-slate-100 flex items-start justify-center min-h-full p-4 font-sans">
|
||||
|
||||
<div id="app" class="w-full max-w-3xl">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Injected configuration from the PHP Controller
|
||||
window.VUE_APP_CONFIG = window.TT_CONFIG
|
||||
|
||||
const { createApp, ref, reactive, onMounted, onBeforeUnmount, watch, computed, nextTick } = Vue;
|
||||
|
||||
const SearchableSelect = {
|
||||
props: {
|
||||
options: { type: Array, required: true },
|
||||
modelValue: { type: [String, Number], default: '' },
|
||||
placeholder: { type: String, default: 'Bitte wählen...' },
|
||||
disabled: { type: Boolean, default: false },
|
||||
getOptionLabel: { type: Function, default: (opt) => opt },
|
||||
getOptionKey: { type: Function, default: (opt) => opt }
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
setup(props, { emit }) {
|
||||
const isOpen = ref(false);
|
||||
const searchTerm = ref('');
|
||||
const highlightedIndex = ref(-1);
|
||||
const searchInput = ref(null);
|
||||
const rootEl = ref(null);
|
||||
|
||||
const filteredOptions = computed(() => {
|
||||
if (!searchTerm.value) return props.options;
|
||||
return props.options.filter(option =>
|
||||
props.getOptionLabel(option).toLowerCase().includes(searchTerm.value.toLowerCase())
|
||||
);
|
||||
});
|
||||
|
||||
function closeDropdown() {
|
||||
isOpen.value = false;
|
||||
searchTerm.value = '';
|
||||
highlightedIndex.value = -1;
|
||||
}
|
||||
|
||||
const handleClickOutside = (event) => {
|
||||
if (rootEl.value && !rootEl.value.contains(event.target)) {
|
||||
closeDropdown();
|
||||
}
|
||||
};
|
||||
|
||||
watch(isOpen, (val) => {
|
||||
if (val) {
|
||||
nextTick(() => {
|
||||
searchInput.value?.focus();
|
||||
document.addEventListener('click', handleClickOutside, true);
|
||||
});
|
||||
} else {
|
||||
document.removeEventListener('click', handleClickOutside, true);
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('click', handleClickOutside, true);
|
||||
});
|
||||
|
||||
function selectOption(option) {
|
||||
emit('update:modelValue', props.getOptionKey(option));
|
||||
closeDropdown();
|
||||
}
|
||||
|
||||
function onKeyDown(event) {
|
||||
const optionsLength = filteredOptions.value.length;
|
||||
if (!optionsLength) return;
|
||||
switch (event.key) {
|
||||
case 'ArrowDown':
|
||||
event.preventDefault();
|
||||
highlightedIndex.value = (highlightedIndex.value + 1) % optionsLength;
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
event.preventDefault();
|
||||
highlightedIndex.value = (highlightedIndex.value - 1 + optionsLength) % optionsLength;
|
||||
break;
|
||||
case 'Enter':
|
||||
event.preventDefault();
|
||||
if (highlightedIndex.value >= 0) {
|
||||
selectOption(filteredOptions.value[highlightedIndex.value]);
|
||||
}
|
||||
break;
|
||||
case 'Escape':
|
||||
closeDropdown();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const displayValue = computed(() => {
|
||||
const selected = props.options.find(o => props.getOptionKey(o) === props.modelValue);
|
||||
return selected ? props.getOptionLabel(selected) : '';
|
||||
});
|
||||
|
||||
return {
|
||||
isOpen, searchTerm, highlightedIndex, searchInput, filteredOptions,
|
||||
rootEl, closeDropdown, selectOption, onKeyDown, displayValue
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<div class="relative" ref="rootEl">
|
||||
<button type="button" @click="isOpen = !isOpen" :disabled="disabled" class="custom-select-button relative w-full cursor-default rounded-md border border-slate-300 bg-white py-2.5 pl-3 pr-10 text-left shadow-sm focus:outline-none sm:text-sm disabled:bg-slate-100 disabled:cursor-not-allowed">
|
||||
<span class="block truncate" :class="{'text-slate-400': !displayValue}">{{ displayValue || placeholder }}</span>
|
||||
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"><svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a.75.75 0 01.53.22l3.5 3.5a.75.75 0 01-1.06 1.06L10 4.81 7.03 7.78a.75.75 0 01-1.06-1.06l3.5-3.5A.75.75 0 0110 3zm-3.72 9.53a.75.75 0 011.06 0L10 15.19l2.97-2.97a.75.75 0 111.06 1.06l-3.5 3.5a.75.75 0 01-1.06 0l-3.5-3.5a.75.75 0 010-1.06z" clip-rule="evenodd" /></svg></span>
|
||||
</button>
|
||||
<transition leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
|
||||
<div v-if="isOpen" class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
|
||||
<div class="p-2">
|
||||
<input ref="searchInput" type="text" v-model="searchTerm" @keydown="onKeyDown" placeholder="Suchen..." class="form-input w-full px-2 py-1.5 border border-slate-200 rounded-md"/>
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="(option, index) in filteredOptions" :key="getOptionKey(option)" @click="selectOption(option)" :class="{'bg-[var(--color-primary-100)] text-[var(--color-primary-800)]': index === highlightedIndex, 'text-gray-900': index !== highlightedIndex}" class="relative cursor-default select-none py-2 pl-3 pr-9 hover:bg-slate-100">
|
||||
<span class="block truncate">{{ getOptionLabel(option) }}</span>
|
||||
</li>
|
||||
<li v-if="!filteredOptions.length" class="relative cursor-default select-none py-2 px-4 text-gray-500">Keine Ergebnisse</li>
|
||||
</ul>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
|
||||
const app = createApp({
|
||||
setup() {
|
||||
// --- CONFIGURATION & STATE ---
|
||||
const config = window.VUE_APP_CONFIG;
|
||||
const API_BASE_URL = config.baseUrl;
|
||||
|
||||
const currentStep = ref('loading');
|
||||
const clusterId = ref(config.clusterId || null);
|
||||
const clusters = ref([]);
|
||||
const addressStep = ref('zip');
|
||||
const addressForm = reactive({ zip: '', city: '', street: '', housenumber: '', wohneinheit_id: '' });
|
||||
const cities = ref([]);
|
||||
const streets = ref([]);
|
||||
const units = ref([]);
|
||||
const selectedAddress = ref(null);
|
||||
const isLoading = ref(false);
|
||||
const errorMessage = ref('');
|
||||
const orderResponse = ref(null);
|
||||
const form = reactive({
|
||||
customerType: 'Privatkunde', title: '', birthDate: '', firstName: '', lastName: '', phone: '', email: '', isOwner: 'Ja', notes: '',
|
||||
billingAddressChoice: 'Anschlussadresse',
|
||||
connectionType: null,
|
||||
billing: { name: '', street: '', housenumber: '', zip: '', city: '' },
|
||||
acceptAgb: false, acceptMarketing: false, acceptWithdrawal: false, acceptDsgvo: false,
|
||||
});
|
||||
// add header where the iframe is embedded
|
||||
|
||||
const referrer = document.referrer.split('?')[0];
|
||||
const api = axios.create({ baseURL: API_BASE_URL, headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-Frame-Options': 'SAMEORIGIN', 'X-Frame-Referrer': referrer } });
|
||||
config.color = new URLSearchParams(window.location.search).get('color') || config.color || 'blue';
|
||||
|
||||
// --- THEME ---
|
||||
onMounted(() => {
|
||||
const themes = {
|
||||
blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', text: '#ffffff' },
|
||||
green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', text: '#ffffff' },
|
||||
lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', text: '#ffffff' },
|
||||
};
|
||||
const theme = themes[config.color] || themes.blue;
|
||||
const styleSheet = document.getElementById('theme-style');
|
||||
console.log(theme);
|
||||
styleSheet.innerHTML = `:root { --color-primary-50: ${theme[50]}; --color-primary-100: ${theme[100]}; --color-primary-200: ${theme[200]}; --color-primary-500: ${theme[500]}; --color-primary-600: ${theme[600]}; --color-primary-700: ${theme[700]}; --color-primary-800: ${theme[800]}; --color-text-on-primary: ${theme.text}; }`;
|
||||
console.log(styleSheet.innerHTML);
|
||||
|
||||
if (clusterId.value) {
|
||||
currentStep.value = 'addressSearch';
|
||||
} else {
|
||||
fetchClusters();
|
||||
}
|
||||
});
|
||||
|
||||
// --- WIZARD LOGIC ---
|
||||
function clearSubsequentSteps(fromStep) {
|
||||
if (fromStep === 'zip') { addressForm.city = ''; cities.value = []; }
|
||||
if (fromStep === 'zip' || fromStep === 'city') { addressForm.street = ''; streets.value = []; }
|
||||
if (fromStep !== 'unit' && fromStep !== 'housenumber') { addressForm.housenumber = ''; }
|
||||
if (fromStep !== 'unit') { addressForm.wohneinheit_id = ''; units.value = []; }
|
||||
}
|
||||
|
||||
function goBackToStep(step) { addressStep.value = step; clearSubsequentSteps(step); }
|
||||
watch(() => addressForm.zip, (n, o) => { if (n !== o && n?.length >= 4) { addressStep.value = 'city'; clearSubsequentSteps('zip'); fetchCities(n); } });
|
||||
watch(() => addressForm.city, (n, o) => { if (n && n !== o) { addressStep.value = 'street'; clearSubsequentSteps('city'); fetchStreets(addressForm.zip, n); } });
|
||||
watch(() => addressForm.street, (n, o) => { if (n && n !== o) { addressStep.value = 'housenumber'; clearSubsequentSteps('street');} });
|
||||
watch(() => addressForm.wohneinheit_id, (n) => { if (n) { const unit = units.value.find(u => u.wohneinheit_id === n); if (unit) selectAddress(unit); } });
|
||||
|
||||
// --- API CALLS & METHODS ---
|
||||
function handleError(error, message) {
|
||||
console.error(error);
|
||||
errorMessage.value = error.response?.data?.result?.error || message;
|
||||
currentStep.value = 'error';
|
||||
}
|
||||
|
||||
async function fetchClusters() {
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const response = await api.get('/getClusters');
|
||||
clusters.value = response.data?.clusters || [];
|
||||
|
||||
if (clusters.value.length === 1) {
|
||||
clusterId.value = clusters.value[0].id;
|
||||
currentStep.value = 'addressSearch';
|
||||
} else currentStep.value = 'clusterSelect';
|
||||
} catch (e) { handleError(e, 'Cluster-Daten konnten nicht geladen werden.'); }
|
||||
finally { isLoading.value = false; }
|
||||
}
|
||||
|
||||
async function fetchCities(zip) {
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const response = await api.get('/findCity', { params: { zip, cluster_id: clusterId.value } });
|
||||
cities.value = response.data?.cities || [];
|
||||
} catch (e) { handleError(e, 'Orte für diese PLZ konnten nicht geladen werden.'); }
|
||||
finally { isLoading.value = false; }
|
||||
}
|
||||
|
||||
async function fetchStreets(zip, city) {
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const response = await api.get('/findStreet', { params: { zip, city, cluster_id: clusterId.value } });
|
||||
streets.value = response.data?.streets || [];
|
||||
} catch (e) { handleError(e, 'Straßen für diesen Ort konnten nicht geladen werden.'); }
|
||||
finally { isLoading.value = false; }
|
||||
}
|
||||
|
||||
async function findAddress() {
|
||||
if (!addressForm.housenumber) return;
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const params = { ...addressForm, cluster_id: clusterId.value, format: 'flat' };
|
||||
const response = await api.get('/findAddress', { params });
|
||||
const addresses = (response.data?.addresses || []).filter(a => a.preorderTypes?.includes('order'));
|
||||
if (addresses.length === 0) { currentStep.value = 'noOrderPossible'; }
|
||||
else if (addresses.length === 1) { selectAddress(addresses[0]); }
|
||||
else { units.value = addresses; addressStep.value = 'unit'; }
|
||||
} catch (e) { handleError(e, 'Adresse konnte nicht verifiziert werden.'); }
|
||||
finally { isLoading.value = false; }
|
||||
}
|
||||
|
||||
function selectAddress(address) {
|
||||
if (!address) { currentStep.value = 'noOrderPossible'; return; }
|
||||
selectedAddress.value = address;
|
||||
currentStep.value = 'orderForm';
|
||||
}
|
||||
|
||||
function startNewOrder() {
|
||||
Object.assign(form, { customerType: 'Privatkunde', title: '', birthDate: '', firstName: '', lastName: '', phone: '', email: '', isOwner: 'Ja', notes: '', billingAddressChoice: 'Anschlussadresse', billing: { name: '', street: '', housenumber: '', zip: '', city: '' }, acceptAgb: false, acceptMarketing: false, acceptWithdrawal: false, acceptDsgvo: false });
|
||||
Object.assign(addressForm, { zip: '', city: '', street: '', housenumber: '', wohneinheit_id: '' });
|
||||
selectedAddress.value = null; errorMessage.value = ''; addressStep.value = 'zip';
|
||||
currentStep.value = config.clusterId ? 'addressSearch' : 'clusterSelect';
|
||||
}
|
||||
|
||||
async function submitOrder() {
|
||||
if (isFormInvalid.value) return;
|
||||
isLoading.value = true; errorMessage.value = '';
|
||||
const preorderData = {
|
||||
preorderType: 'order',
|
||||
customerType: form.customerType,
|
||||
connectionType: form.connectionType,
|
||||
acceptAgb: form.acceptAgb, acceptMarketing: form.acceptMarketing, acceptDsgvo: form.acceptDsgvo, acceptWithdrawal: form.acceptWithdrawal,
|
||||
address: selectedAddress.value,
|
||||
address_info: form.notes,
|
||||
customer: {
|
||||
type: form.isOwner === 'Ja' ? 'owner' : 'tenant',
|
||||
firstname: form.firstName, lastname: form.lastName, phone: form.phone, email: form.email,
|
||||
company: form.customerType === 'Businesskunde' ? form.firstName + ' ' + form.lastName : '',
|
||||
street: form.billingAddressChoice === 'Andere' ? form.billing.street : selectedAddress.value.street,
|
||||
housenumber: form.billingAddressChoice === 'Andere' ? form.billing.housenumber : selectedAddress.value.housenumber,
|
||||
zip: form.billingAddressChoice === 'Andere' ? form.billing.zip : selectedAddress.value.zip,
|
||||
city: form.billingAddressChoice === 'Andere' ? form.billing.city : selectedAddress.value.city,
|
||||
},
|
||||
additionalData: {
|
||||
birthDate: form.birthDate,
|
||||
title: form.title,
|
||||
clusterId: clusterId.value // CRUCIAL: Add clusterId for backend security check
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await api.post('/submitOrder', preorderData);
|
||||
orderResponse.value = response.data;
|
||||
currentStep.value = 'confirmation';
|
||||
} catch (e) { handleError(e, 'Ihre Bestellung konnte nicht verarbeitet werden. Bitte überprüfen Sie Ihre Eingaben.'); }
|
||||
finally { isLoading.value = false; }
|
||||
}
|
||||
|
||||
const isFormInvalid = computed(() => {
|
||||
const { firstName, lastName, email, billingAddressChoice, billing, acceptAgb, acceptWithdrawal, acceptDsgvo } = form;
|
||||
if (!firstName || !lastName || !email || !acceptAgb || !acceptWithdrawal || !acceptDsgvo) return true;
|
||||
if (billingAddressChoice === 'Andere') {
|
||||
if (!billing.name || !billing.street || !billing.housenumber || !billing.zip || !billing.city) return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
return {
|
||||
currentStep, clusterId, clusters, addressStep, addressForm, goBackToStep,
|
||||
cities, streets, units, isLoading, selectedAddress, isFormInvalid, form,
|
||||
findAddress, submitOrder, startNewOrder, orderResponse, errorMessage,
|
||||
handleClusterSelection: () => { if (clusterId.value) currentStep.value = 'addressSearch'; },
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<div class="bg-white p-6 sm:p-10 rounded-2xl shadow-xl transition-all duration-500 w-full">
|
||||
<header class="text-center mb-8">
|
||||
<h1 class="text-4xl font-extrabold text-slate-800 tracking-tight">Glasfaser Bestellung</h1>
|
||||
<p class="text-slate-500 mt-2 text-lg">In wenigen Schritten zu Ihrem Anschluss.</p>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<transition name="slide-fade" mode="out-in">
|
||||
<div v-if="currentStep === 'loading'" class="text-center p-8">
|
||||
<div class="flex justify-center items-center"><svg class="animate-spin -ml-1 mr-3 h-8 w-8 text-[var(--color-primary-600)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg><span class="text-slate-600 text-lg">Lade...</span></div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="currentStep === 'clusterSelect'" class="space-y-4 max-w-lg mx-auto">
|
||||
<label class="block text-xl font-medium text-slate-700 text-center">Bitte wählen Sie Ihr Ausbaugebiet:</label>
|
||||
<SearchableSelect
|
||||
v-model="clusterId"
|
||||
:options="clusters"
|
||||
:get-option-key="(c) => c.id"
|
||||
:get-option-label="(c) => c.name"
|
||||
placeholder="Gebiet auswählen..."
|
||||
/>
|
||||
<button @click="handleClusterSelection" :disabled="!clusterId" class="w-full bg-[var(--color-primary-600)] text-[var(--color-text-on-primary)] font-bold py-3 px-4 rounded-md hover:bg-[var(--color-primary-700)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--color-primary-500)] disabled:bg-slate-400 disabled:cursor-not-allowed transition-colors">Weiter</button>
|
||||
</div>
|
||||
|
||||
<div v-else-if="currentStep === 'addressSearch'" class="max-w-xl mx-auto">
|
||||
<h3 class="text-xl font-semibold text-slate-800 text-center mb-6">1. Adresse prüfen</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="p-4 rounded-lg border border-slate-300 transition-all" :class="{'wizard-step-active': addressStep === 'zip'}"><div class="flex justify-between items-center"><p class="font-semibold text-slate-700">Postleitzahl</p><button v-if="addressStep !== 'zip'" @click="goBackToStep('zip')" class="text-sm font-semibold text-[var(--color-primary-600)] hover:text-[var(--color-primary-800)]">Ändern</button></div><div v-if="addressStep === 'zip'" class="mt-2"><input v-model.trim="addressForm.zip" type="text" placeholder="PLZ eingeben, z.B. 8010" class="form-input w-full rounded-md border-slate-300 shadow-sm py-2.5 px-3"></div><p v-else class="text-slate-600 mt-1 font-medium">{{ addressForm.zip }}</p></div>
|
||||
<div v-if="addressStep === 'city' || addressForm.city" class="p-4 rounded-lg border border-slate-300 transition-all" :class="{'wizard-step-active': addressStep === 'city'}"><div class="flex justify-between items-center"><p class="font-semibold text-slate-700">Ort</p><button v-if="addressStep !== 'zip' && addressStep !== 'city'" @click="goBackToStep('city')" class="text-sm font-semibold text-[var(--color-primary-600)] hover:text-[var(--color-primary-800)]">Ändern</button></div><div v-if="addressStep === 'city'" class="mt-2"><SearchableSelect v-model="addressForm.city" :options="cities" :disabled="isLoading" placeholder="Ort auswählen..." /></div><p v-else class="text-slate-600 mt-1 font-medium">{{ addressForm.city }}</p></div>
|
||||
<div v-if="addressStep === 'street' || addressForm.street" class="p-4 rounded-lg border border-slate-300 transition-all" :class="{'wizard-step-active': addressStep === 'street'}"><div class="flex justify-between items-center"><p class="font-semibold text-slate-700">Straße</p><button v-if="addressStep !== 'zip' && addressStep !== 'city' && addressStep !== 'street'" @click="goBackToStep('street')" class="text-sm font-semibold text-[var(--color-primary-600)] hover:text-[var(--color-primary-800)]">Ändern</button></div><div v-if="addressStep === 'street'" class="mt-2"><SearchableSelect v-model="addressForm.street" :options="streets" :disabled="isLoading" placeholder="Straße auswählen..." /></div><p v-else class="text-slate-600 mt-1 font-medium">{{ addressForm.street }}</p></div>
|
||||
<div v-if="addressStep === 'housenumber' || addressStep === 'unit'" class="p-4 rounded-lg border border-slate-300 transition-all" :class="{'wizard-step-active': true}"><p class="font-semibold text-slate-700">Hausnummer & Einheit</p>
|
||||
<div v-if="addressStep === 'housenumber'" class="mt-2">
|
||||
<label for="housenumber" class="block text-sm text-slate-500 mb-1">Hausnummer eingeben und prüfen</label>
|
||||
<div class="flex items-center space-x-2"><input id="housenumber" v-model.trim="addressForm.housenumber" @keyup.enter="findAddress" type="text" placeholder="z.B. 12A" class="form-input w-full rounded-md border-slate-300 shadow-sm py-2.5 px-3"><button @click="findAddress" :disabled="!addressForm.housenumber || isLoading" class="py-2.5 px-4 bg-[var(--color-primary-600)] text-[var(--color-text-on-primary)] rounded-md hover:bg-[var(--color-primary-700)] disabled:bg-slate-400 transition-colors flex-shrink-0"><svg v-if="isLoading" class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span v-else>Prüfen</span></button></div>
|
||||
</div>
|
||||
<div v-if="addressStep === 'unit'" class="mt-2"><label class="block text-sm text-slate-500 mb-1">Mehrere Einheiten gefunden, bitte wählen</label><SearchableSelect v-model="addressForm.wohneinheit_id" :options="units" :get-option-key="(u) => u.wohneinheit_id" :get-option-label="(u) => u.showText" placeholder="Einheit auswählen..." /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="currentStep === 'orderForm' && selectedAddress" class="space-y-8">
|
||||
<div class="p-4 bg-[var(--color-primary-50)] border-l-4 border-[var(--color-primary-500)] rounded-r-lg">
|
||||
<h3 class="font-bold text-[var(--color-primary-800)]">Anschlussadresse ausgewählt:</h3>
|
||||
<p class="text-[var(--color-primary-700)]">{{ selectedAddress.street }} {{ selectedAddress.housenumber }}, {{ selectedAddress.zip }} {{ selectedAddress.city }}</p>
|
||||
<button @click="startNewOrder" class="text-sm text-[var(--color-primary-600)] hover:underline mt-1 font-semibold">Neue Adresse suchen</button>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-slate-800 text-center">2. Bestelldaten eingeben</h3>
|
||||
<form @submit.prevent="submitOrder" class="space-y-6">
|
||||
<fieldset>
|
||||
<legend class="text-lg font-semibold text-slate-800 mb-2">Kunde</legend>
|
||||
<div class="flex items-center space-x-6">
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="radio" v-model="form.customerType" value="Privatkunde" class="form-radio h-5 w-5 text-[var(--color-primary-600)]">
|
||||
<span class="text-slate-700">Privatkunde</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="radio" v-model="form.customerType" value="Businesskunde" class="form-radio h-5 w-5 text-[var(--color-primary-600)]">
|
||||
<span class="text-slate-700">Businesskunde</span>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend class="text-lg font-semibold text-slate-800 mb-2">Anschlussart</legend>
|
||||
<div>
|
||||
<label for="connectionType" class="block text-sm font-medium text-slate-600 mb-2">Anschlussart *</label>
|
||||
|
||||
<!-- For building_type = 1 (single option) -->
|
||||
<div v-if="selectedAddress.building_type === 1" class="space-y-2">
|
||||
<div class="p-4 border-2 border-[var(--color-primary-600)] rounded-md bg-[var(--color-primary-50)]">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-medium text-slate-800">Wohnungs-Anschluss</span>
|
||||
<span class="font-bold text-[var(--color-primary-600)]">150€</span>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" v-model="form.connectionType" value="wohnung">
|
||||
</div>
|
||||
|
||||
<!-- For building_type = 2 (multiple options) -->
|
||||
<div v-else-if="selectedAddress.building_type === 2" class="space-y-3">
|
||||
<label class="flex items-center p-4 border-2 rounded-md cursor-pointer hover:bg-slate-50 transition-colors"
|
||||
:class="form.connectionType === 'vorsorge' ? 'border-[var(--color-primary-600)] bg-[var(--color-primary-50)]' : 'border-slate-300'">
|
||||
<input type="radio" v-model="form.connectionType" value="vorsorge" class="form-radio h-5 w-5 text-[var(--color-primary-600)] mr-3">
|
||||
<div class="flex-1 flex items-center justify-between">
|
||||
<span class="font-medium text-slate-800">Vorsorgeanschluss</span>
|
||||
<span class="font-bold text-[var(--color-primary-600)]">600€</span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="flex items-center p-4 border-2 rounded-md cursor-pointer hover:bg-slate-50 transition-colors"
|
||||
:class="form.connectionType === 'voll' ? 'border-[var(--color-primary-600)] bg-[var(--color-primary-50)]' : 'border-slate-300'">
|
||||
<input type="radio" v-model="form.connectionType" value="voll" class="form-radio h-5 w-5 text-[var(--color-primary-600)] mr-3">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="font-medium text-slate-800">Vollanschluss</span>
|
||||
<span class="font-bold text-[var(--color-primary-600)]">300€</span>
|
||||
</div>
|
||||
<p class="text-xs text-slate-600 mt-1">
|
||||
Vollanschluss-Preis nur bei Aktivierung innerhalb von 8 Wochen nach Fertigstellung
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Fallback if building_type is not 1 or 2 -->
|
||||
<div v-else class="p-4 border border-slate-300 rounded-md bg-slate-50">
|
||||
<p class="text-slate-600">Bitte wählen Sie zuerst eine gültige Adresse aus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend class="text-lg font-semibold text-slate-800 mb-2">Persönliche Daten</legend>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="title" class="block text-sm font-medium text-slate-600">Titel</label>
|
||||
<input id="title" v-model="form.title" type="text" placeholder="z.B. Dr." class="form-input mt-1 block w-full rounded-md border-slate-300 shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="birthDate" class="block text-sm font-medium text-slate-600">Geburtsdatum</label>
|
||||
<input id="birthDate" v-model="form.birthDate" type="date" class="form-input mt-1 block w-full rounded-md border-slate-300 shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="firstName" class="block text-sm font-medium text-slate-600">Vorname *</label>
|
||||
<input id="firstName" v-model="form.firstName" required type="text" placeholder="Max" class="form-input mt-1 block w-full rounded-md border-slate-300 shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="lastName" class="block text-sm font-medium text-slate-600">Nachname *</label>
|
||||
<input id="lastName" v-model="form.lastName" required type="text" placeholder="Mustermann" class="form-input mt-1 block w-full rounded-md border-slate-300 shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="phone" class="block text-sm font-medium text-slate-600">Telefon</label>
|
||||
<input id="phone" v-model="form.phone" type="tel" placeholder="+43 664 1234567" class="form-input mt-1 block w-full rounded-md border-slate-300 shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-slate-600">E-Mail *</label>
|
||||
<input id="email" v-model="form.email" required type="email" placeholder="max.mustermann@email.com" class="form-input mt-1 block w-full rounded-md border-slate-300 shadow-sm">
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<p class="block text-sm font-medium text-slate-600">Ich bin Eigentümer der Liegenschaft *</p>
|
||||
<div class="flex items-center space-x-4 mt-1">
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="radio" v-model="form.isOwner" value="Ja" class="form-radio h-4 w-4 text-[var(--color-primary-600)]">
|
||||
<span class="text-slate-700">Ja</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="radio" v-model="form.isOwner" value="Nein" class="form-radio h-4 w-4 text-[var(--color-primary-600)]">
|
||||
<span class="text-slate-700">Nein</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend class="text-lg font-semibold text-slate-800 mb-2">Anmerkungen</legend>
|
||||
<div>
|
||||
<label for="notes" class="block text-sm font-medium text-slate-600">Ihre Anmerkungen zur Anschlussadresse</label>
|
||||
<textarea id="notes" v-model="form.notes" rows="3" placeholder="z.B. Hinterhaus, bei Firma XY läuten" class="form-textarea mt-1 block w-full rounded-md border-slate-300 shadow-sm"></textarea>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend class="text-lg font-semibold text-slate-800 mb-2">Adresse zur Rechnungszusendung</legend>
|
||||
<div class="flex items-center space-x-6 mb-4">
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="radio" v-model="form.billingAddressChoice" value="Anschlussadresse" class="form-radio h-5 w-5 text-[var(--color-primary-600)]">
|
||||
<span class="text-slate-700">Anschlussadresse</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="radio" v-model="form.billingAddressChoice" value="Andere" class="form-radio h-5 w-5 text-[var(--color-primary-600)]">
|
||||
<span class="text-slate-700">Andere Adresse</span>
|
||||
</label>
|
||||
</div>
|
||||
<transition name="slide-fade">
|
||||
<div v-if="form.billingAddressChoice === 'Andere'" class="grid grid-cols-1 sm:grid-cols-2 gap-4 p-4 border rounded-md bg-slate-50">
|
||||
<div class="sm:col-span-2">
|
||||
<label for="billingName" class="block text-sm font-medium text-slate-600">Name/Firma *</label>
|
||||
<input id="billingName" v-model="form.billing.name" required type="text" placeholder="Maxi Mustermann GmbH" class="form-input mt-1 block w-full rounded-md border-slate-300 shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="billingStreet" class="block text-sm font-medium text-slate-600">Straße *</label>
|
||||
<input id="billingStreet" v-model="form.billing.street" required type="text" placeholder="Musterstraße" class="form-input mt-1 block w-full rounded-md border-slate-300 shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="billingHousenumber" class="block text-sm font-medium text-slate-600">Hausnr. *</label>
|
||||
<input id="billingHousenumber" v-model="form.billing.housenumber" required type="text" placeholder="1" class="form-input mt-1 block w-full rounded-md border-slate-300 shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="billingZip" class="block text-sm font-medium text-slate-600">PLZ *</label>
|
||||
<input id="billingZip" v-model="form.billing.zip" required type="text" placeholder="8010" class="form-input mt-1 block w-full rounded-md border-slate-300 shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="billingCity" class="block text-sm font-medium text-slate-600">Ort *</label>
|
||||
<input id="billingCity" v-model="form.billing.city" required type="text" placeholder="Graz" class="form-input mt-1 block w-full rounded-md border-slate-300 shadow-sm">
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend class="text-lg font-semibold text-slate-800 mb-2">Zustimmungen</legend>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-start space-x-3 cursor-pointer">
|
||||
<input type="checkbox" v-model="form.acceptAgb" class="form-checkbox h-5 w-5 text-[var(--color-primary-600)] mt-0.5 flex-shrink-0">
|
||||
<span class="text-slate-600 text-sm">*Ich habe mich über die wesentlichen Vertragsinhalte lt. Vertragsbedingungen Glasfaseranschluss informiert und akzeptiere die Allgemeinen Geschäftsbedingungen.</span>
|
||||
</label>
|
||||
<label class="flex items-start space-x-3 cursor-pointer">
|
||||
<input type="checkbox" v-model="form.acceptMarketing" class="form-checkbox h-5 w-5 text-[var(--color-primary-600)] mt-0.5 flex-shrink-0">
|
||||
<span class="text-slate-600 text-sm">Ich stimme zu, dass meine Daten zur telefonischen Kontaktaufnahme, sowie für die postalische und elektronische Zusendung von Produkt- und Dienstleistungs-Informationen bzw. für Marketingaktivitäten an verbundene Unternehmen der Energie Steiermark Breitband GmbH übermittelt werden. Diese Zustimmungserklärung kann jederzeit widerrufen werden. <a href="#" class="text-[var(--color-primary-600)] hover:underline">Mehr erfahren</a></span>
|
||||
</label>
|
||||
<label class="flex items-start space-x-3 cursor-pointer">
|
||||
<input type="checkbox" v-model="form.acceptWithdrawal" class="form-checkbox h-5 w-5 text-[var(--color-primary-600)] mt-0.5 flex-shrink-0">
|
||||
<span class="text-slate-600 text-sm">*Ich habe die Information über die Rücktrittsrechte für Verbraucher gemäß §3 KSchG und §§ 11 FAGG erhalten, gelesen und zur Kenntnis genommen.</span>
|
||||
</label>
|
||||
<label class="flex items-start space-x-3 cursor-pointer">
|
||||
<input type="checkbox" v-model="form.acceptDsgvo" class="form-checkbox h-5 w-5 text-[var(--color-primary-600)] mt-0.5 flex-shrink-0">
|
||||
<span class="text-slate-600 text-sm">*Ich habe die Information zur Datenschutzgrundverordnung (DSGVO) zur Kenntnis genommen. Diese ist jederzeit im Downloadbereich abrufbar.</span>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="pt-4 border-t">
|
||||
<p class="text-xs text-slate-500 mb-4">* Pflichtfelder</p>
|
||||
<button type="submit" :disabled="isFormInvalid || isLoading" class="w-full bg-[var(--color-primary-600)] text-[var(--color-text-on-primary)] font-bold py-4 px-4 rounded-md hover:bg-[var(--color-primary-700)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--color-primary-500)] disabled:bg-slate-400 disabled:cursor-not-allowed flex items-center justify-center text-lg transition-colors">
|
||||
<svg v-if="isLoading" class="animate-spin -ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<span v-else>Kostenpflichtig bestellen</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div v-else-if="currentStep === 'noOrderPossible'" class="text-center p-8 bg-amber-50 rounded-lg"><svg class="mx-auto h-12 w-12 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg><h2 class="mt-4 text-2xl font-bold text-slate-800">Bestellung nicht möglich</h2><p class="mt-2 text-slate-600">Leider ist an der von Ihnen gewählten Adresse derzeit kein Glasfaseranschluss bestellbar.</p><button @click="startNewOrder" class="mt-6 bg-[var(--color-primary-600)] text-[var(--color-text-on-primary)] font-bold py-2 px-6 rounded-md hover:bg-[var(--color-primary-700)]">Andere Adresse suchen</button></div>
|
||||
<div v-else-if="currentStep === 'confirmation' && orderResponse" class="text-center p-8 bg-green-50 rounded-lg"><svg class="mx-auto h-16 w-16 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg><h2 class="mt-4 text-2xl font-bold text-slate-800">Vielen Dank!</h2><p class="mt-2 text-slate-600">Ihre Bestellung wurde erfolgreich übermittelt.</p><div class="mt-6 p-4 bg-white border border-green-200 rounded-md inline-block"><p class="text-slate-600">Ihre Bestellnummer:</p><p class="text-2xl font-mono font-bold text-green-700 tracking-wider">{{ orderResponse.orderCode }}</p></div><button @click="startNewOrder" class="mt-8 block w-full text-center bg-[var(--color-primary-600)] text-[var(--color-text-on-primary)] font-bold py-3 px-4 rounded-md hover:bg-[var(--color-primary-700)]">Neue Bestellung</button></div>
|
||||
<div v-else-if="currentStep === 'error'" class="text-center p-8 bg-red-50 rounded-lg"><svg class="mx-auto h-12 w-12 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg><h2 class="mt-4 text-2xl font-bold text-slate-800">Ein Fehler ist aufgetreten</h2><p class="mt-2 text-red-700 bg-red-100 p-3 rounded-md">{{ errorMessage }}</p><button @click="startNewOrder" class="mt-6 bg-[var(--color-primary-600)] text-[var(--color-text-on-primary)] font-bold py-2 px-6 rounded-md hover:bg-[var(--color-primary-700)]">Erneut versuchen</button></div>
|
||||
</transition>
|
||||
</main>
|
||||
</div>
|
||||
`
|
||||
});
|
||||
|
||||
app.component('SearchableSelect', SearchableSelect);
|
||||
app.mount('#app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
133
application/PreorderIFrame/PreorderIFrameController.php
Normal file
133
application/PreorderIFrame/PreorderIFrameController.php
Normal file
@@ -0,0 +1,133 @@
|
||||
<?php
|
||||
// in /controllers/PreorderIFrameController.php
|
||||
|
||||
class PreorderIFrameController extends mfBaseController
|
||||
{
|
||||
|
||||
private PreorderIFrameModel $preorderIFrameModel;
|
||||
|
||||
public function init()
|
||||
{
|
||||
// The model is autoloaded or included elsewhere
|
||||
// 'X-Requested-With': 'XMLHttpRequest', 'X-Frame-Options': 'SAMEORIGIN', 'X-Frame-Referrer': document.referrer
|
||||
$this->preorderIFrameModel = new PreorderIFrameModel();
|
||||
}
|
||||
|
||||
/**
|
||||
* Serves the main order form HTML.
|
||||
* This action injects the necessary configuration into the Vue app.
|
||||
*/
|
||||
public function indexAction()
|
||||
{
|
||||
$clusterId = $this->request->get('clusterId', 'NULL');
|
||||
$color = $this->request->get('color', 'blue');
|
||||
|
||||
$vue_config = [
|
||||
'baseUrl' => '/PreorderIFrame', // URL to this controller
|
||||
'clusterId' => $clusterId !== NULL ? intval($clusterId) : null,
|
||||
'color' => htmlspecialchars($color),
|
||||
];
|
||||
|
||||
$this->layout()->set("JSGlobals", $vue_config);
|
||||
$this->layout()->setTemplate("VueViews/PreorderIFrame");
|
||||
}
|
||||
|
||||
// --- API ENDPOINTS ---
|
||||
|
||||
public function getClustersAction() {
|
||||
self::returnJson(['clusters' => $this->preorderIFrameModel->getClusters($_SERVER['HTTP_X_FRAME_REFERRER'])]);
|
||||
}
|
||||
|
||||
public function findCityAction()
|
||||
{
|
||||
$allowedClusters = $this->preorderIFrameModel->getClusters($_SERVER['HTTP_X_FRAME_REFERRER']);
|
||||
|
||||
$zip = $this->request->get('zip');
|
||||
$clusterId = $this->request->get('cluster_id');
|
||||
$cities = $this->preorderIFrameModel->findCities($zip, $clusterId);
|
||||
self::returnJson(['cities' => $cities]);
|
||||
}
|
||||
|
||||
public function findStreetAction()
|
||||
{
|
||||
// $this->checkOriginAndGetCampaign(); // Security check
|
||||
$zip = $this->request->get('zip');
|
||||
$city = $this->request->get('city');
|
||||
$clusterId = $this->request->get('cluster_id');
|
||||
$streets = $this->preorderIFrameModel->findStreets($zip, $city, $clusterId);
|
||||
self::returnJson(['streets' => $streets]);
|
||||
}
|
||||
|
||||
public function findAddressAction()
|
||||
{
|
||||
$addresses = $this->preorderIFrameModel->findAddresses($_GET);
|
||||
self::returnJson(['addresses' => $addresses]);
|
||||
}
|
||||
|
||||
public function submitOrderAction()
|
||||
{
|
||||
$requestBody = file_get_contents('php://input');
|
||||
$preorderData = json_decode($requestBody, true);
|
||||
|
||||
if (json_last_error() !== JSON_ERROR_NONE) self::sendError("Invalid JSON data.");
|
||||
|
||||
$tt_network = NetworkModel::getFirst(['adb_network_id' => $preorderData['additionalData']['clusterId']]);
|
||||
if (!$tt_network) self::sendError("No network found for the given cluster ID.");
|
||||
|
||||
$campaign = PreordercampaignModel::getFirst(['network_id' => $tt_network->id]);
|
||||
if (!$campaign) self::sendError("No campaign found for the given cluster ID.");
|
||||
|
||||
$h = new ADBHausnummer($preorderData['address']['hausnummer_id']);
|
||||
if (!$h->id) self::sendError("Invalid house number ID provided.");
|
||||
|
||||
$w = new ADBWohneinheit($preorderData['address']['wohneinheit_id']);
|
||||
if ($preorderData['address']['wohneinheit_id'] && !$w->id) self::sendError("Invalid unit ID provided.");
|
||||
|
||||
$data = [];
|
||||
$data['preordercampaign_id'] = $campaign->id;
|
||||
$data['adb_hausnummer_id'] = $preorderData['address']['hausnummer_id'];
|
||||
$data['adb_wohneinheit_id'] = $preorderData['address']['wohneinheit_id'];
|
||||
|
||||
|
||||
$new_status = null;
|
||||
if ($data['adb_wohneinheit_id'] && $w->id) {
|
||||
$status_code = max($w->status->code, $w->hausnummer->status->code);
|
||||
$new_status = PreorderstatusModel::getFirst(["code" => $status_code]);
|
||||
} elseif ($data['adb_hausnummer_id'] && $h->id) {
|
||||
$new_status = PreorderstatusModel::getFirst(["code" => $h->status->code]);
|
||||
}
|
||||
$data["status_id"] = $new_status ? $new_status->id : 1;
|
||||
|
||||
$data['type'] = $preorderData['connectionType'] === 'vorsorge' ? 'provision' : 'order';
|
||||
$data['connection_type'] = $preorderData['customerType'] === 'business' ? 'business' : 'single-dwelling';
|
||||
|
||||
$data['accept_agb'] = $preorderData['acceptAgb'] ? 1 : 0;
|
||||
$data['accept_dsgvo'] = $preorderData['acceptDsgvo'] ? 1 : 0;
|
||||
$data['accept_marketing'] = $preorderData['acceptMarketing'] ? 1 : 0;
|
||||
$data['accept_withdrawal'] = $preorderData['acceptWithdrawal'] ? 1 : 0;
|
||||
$data['submit_request'] = json_encode($preorderData);
|
||||
|
||||
$data['firstname'] = trim($preorderData['customer']['firstname']);
|
||||
$data['lastname'] = trim($preorderData['customer']['lastname']);
|
||||
$data['company'] = (trim($preorderData['customer']['company'])) ?: null;
|
||||
$data['street'] = (trim($preorderData['customer']['street'])) ?: null;
|
||||
$data['housenumber'] = (trim($preorderData['customer']['housenumber'])) ?: null;
|
||||
$data['zip'] = (trim($preorderData['customer']['zip'])) ?: null;
|
||||
$data['city'] = (trim($preorderData['customer']['city'])) ?: null;
|
||||
$data['phone'] = (trim($preorderData['customer']['phone'])) ?: null;
|
||||
$data['email'] = (trim($preorderData['customer']['email'])) ?: null;
|
||||
|
||||
$data['edit_by'] = 1;
|
||||
$data['create_by'] = 1;
|
||||
|
||||
$preorder = PreorderModel::create($data);
|
||||
$preorder->createUcode();
|
||||
$new_id = $preorder->save();
|
||||
|
||||
if (!$new_id) {
|
||||
self::sendError("Failed to create preorder record.");
|
||||
}
|
||||
|
||||
self::returnJson(['orderCode' => $preorder->ucode, 'status' => 'success']);
|
||||
}
|
||||
}
|
||||
239
application/PreorderIFrame/PreorderIFrameModel.php
Normal file
239
application/PreorderIFrame/PreorderIFrameModel.php
Normal file
@@ -0,0 +1,239 @@
|
||||
<?php
|
||||
|
||||
class PreorderIFrameModel extends mfBaseModel
|
||||
{
|
||||
// The constructor will use the default FronkDB connection
|
||||
// No need to override __construct if mfBaseModel handles it
|
||||
|
||||
public function init() {
|
||||
// Overwrite the table name if it doesn't match the class name
|
||||
$this->table = 'Preorder'; // Set a primary table if needed, though most methods define their own
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if an origin has rights for a given cluster and returns the campaign.
|
||||
* @param int $clusterId The 'adb_netzgebiet_id' from the thetool.Network table.
|
||||
* @param string|null $origin The requesting origin (e.g., https://www.example.com).
|
||||
* @return array|null The campaign data if valid, otherwise null.
|
||||
*/
|
||||
public function getCampaignByClusterIdAndOrigin(int $clusterId, ?string $origin): ?array
|
||||
{
|
||||
// A null origin is not allowed for security reasons
|
||||
if (!$origin) {
|
||||
return null;
|
||||
}
|
||||
|
||||
$query = "
|
||||
SELECT pc.*
|
||||
FROM thetool.Preordercampaign pc
|
||||
JOIN thetool.Network n ON pc.Network_id = n.id
|
||||
WHERE n.adb_netzgebiet_id = ?
|
||||
";
|
||||
$res = $this->db->query($query, [$clusterId]);
|
||||
$campaign = $this->db->fetch_assoc($res);
|
||||
|
||||
if (!$campaign || empty($campaign['iframe_origins'])) {
|
||||
return null;
|
||||
}
|
||||
|
||||
$allowedOrigins = json_decode($campaign['iframe_origins'], true);
|
||||
if (is_array($allowedOrigins) && in_array($origin, $allowedOrigins)) {
|
||||
return $campaign;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
public function getClusters($frame_referrer): array
|
||||
{
|
||||
$query = "
|
||||
SELECT n.adb_netzgebiet_id as id, ng.name
|
||||
FROM thetool.Preordercampaign pc
|
||||
JOIN thetool.Network n ON pc.Network_id = n.id
|
||||
JOIN addressdb.Netzgebiet ng ON n.adb_netzgebiet_id = ng.id
|
||||
WHERE JSON_SEARCH(pc.iframe_origins, 'one', '" . $this->db->escape($frame_referrer) . "') IS NOT NULL
|
||||
GROUP BY n.adb_netzgebiet_id, ng.name
|
||||
ORDER BY ng.name ASC
|
||||
";
|
||||
|
||||
$res = $this->db->query($query);
|
||||
return $this->db->fetch_all_assoc($res);
|
||||
}
|
||||
|
||||
public function findCities(string $zip, int $adb_network_id): array
|
||||
{
|
||||
$query = "
|
||||
SELECT DISTINCT o.name
|
||||
FROM addressdb.Plz p
|
||||
JOIN addressdb.Ortschaft o ON p.gemeinde_id = o.gemeinde_id
|
||||
JOIN addressdb.Gemeinde g ON o.gemeinde_id = g.id
|
||||
JOIN addressdb.GemeindeNetzgebiet gn ON g.id = gn.gemeinde_id
|
||||
WHERE p.plzstring = " . $this->db->escape($zip) . " AND gn.netzgebiet_id = " . intval($adb_network_id) . "
|
||||
ORDER BY o.name ASC
|
||||
";
|
||||
|
||||
$res = $this->db->query($query);
|
||||
$cities = $this->db->fetch_all_assoc($res);
|
||||
return array_column($cities, 'name');
|
||||
}
|
||||
|
||||
/**
|
||||
* Finds streets for a given ZIP, city, and cluster.
|
||||
* @param string $zip
|
||||
* @param string $city
|
||||
* @param int $clusterId
|
||||
* @return array
|
||||
*/
|
||||
public function findStreets(string $zip, string $city, int $clusterId): array
|
||||
{
|
||||
$query = "
|
||||
SELECT DISTINCT s.name
|
||||
FROM addressdb.Strasse s
|
||||
JOIN addressdb.Gemeinde g ON s.gemeinde_id = g.id
|
||||
JOIN addressdb.Ortschaft o ON o.gemeinde_id = g.id AND o.name = '" . $this->db->escape($city) . "'
|
||||
JOIN addressdb.GemeindeNetzgebiet gn ON g.id = gn.gemeinde_id
|
||||
WHERE gn.netzgebiet_id = " . intval($clusterId) . "
|
||||
AND EXISTS (
|
||||
SELECT 1
|
||||
FROM addressdb.Plz p
|
||||
WHERE p.plzstring = " . $this->db->escape($zip) . "
|
||||
AND p.gemeinde_id = o.gemeinde_id
|
||||
)
|
||||
ORDER BY s.name ASC
|
||||
";
|
||||
$res = $this->db->query($query);
|
||||
$streets = $this->db->fetch_all_assoc($res);
|
||||
return array_column($streets, 'name');
|
||||
}
|
||||
|
||||
public function findAddresses(array $params): array
|
||||
{
|
||||
$query = "
|
||||
SELECT h.oaid, h.hausnummer, s.name as street, p.plzstring as zip, o.name as city, h.id as hausnummer_id, w.id as wohneinheit_id,
|
||||
h.stiege, h.unit_count as building_unit_count, h.tool_building_type as building_type,
|
||||
w.oaid as unit_oaid, w.stock, w.tuer, w.zusatz
|
||||
FROM addressdb.Hausnummer h
|
||||
JOIN addressdb.Strasse s ON h.strasse_id = s.id
|
||||
JOIN addressdb.Plz p ON h.plz_id = p.id
|
||||
JOIN addressdb.Ortschaft o ON s.gemeinde_id = o.gemeinde_id
|
||||
LEFT JOIN addressdb.Wohneinheit w ON w.hausnummer_id = h.id
|
||||
WHERE h.netzgebiet_id = " . intval($params['cluster_id']) . "
|
||||
AND p.plzstring = " . $this->db->escape($params['zip']) . "
|
||||
AND o.name = '" . $this->db->escape($params['city']) . "'
|
||||
AND s.name = '" . $this->db->escape($params['street']) . "'
|
||||
AND h.hausnummer = '" . $this->db->escape($params['housenumber']) . "'
|
||||
";
|
||||
|
||||
$results = $this->db->fetch_all_assoc($this->db->query($query));
|
||||
if (empty($results)) return [];
|
||||
|
||||
$addresses = [];
|
||||
$topCounter = 1;
|
||||
|
||||
if (count($results) > 1) {
|
||||
foreach ($results as $row) {
|
||||
$showText = $this->buildShowText($row, $topCounter++);
|
||||
$addresses[] = [
|
||||
'oaid' => $row['unit_oaid'],
|
||||
'street' => $row['street'],
|
||||
'housenumber' => $row['hausnummer'],
|
||||
'hausnummer_id' => $row['hausnummer_id'],
|
||||
'wohneinheit_id' => $row['wohneinheit_id'],
|
||||
'building_type' => intval($row['building_type']),
|
||||
'zip' => $row['zip'],
|
||||
'city' => $row['city'],
|
||||
'stiege' => $row['stiege'],
|
||||
'stock' => $row['stock'],
|
||||
'tuer' => $row['tuer'],
|
||||
'zusatz' => $row['zusatz'],
|
||||
'building_unit_count' => $row['building_unit_count'],
|
||||
'showText' => $showText,
|
||||
'preorderTypes' => ['order']
|
||||
];
|
||||
}
|
||||
} else {
|
||||
$row = $results[0];
|
||||
$addresses[] = [
|
||||
'oaid' => $row['oaid'],
|
||||
'street' => $row['street'],
|
||||
'housenumber' => $row['hausnummer'],
|
||||
'hausnummer_id' => $row['hausnummer_id'],
|
||||
'wohneinheit_id' => $row['wohneinheit_id'],
|
||||
'building_type' => intval($row['building_type']),
|
||||
'zip' => $row['zip'],
|
||||
'city' => $row['city'],
|
||||
'stiege' => $row['stiege'],
|
||||
'stock' => $row['stock'],
|
||||
'tuer' => $row['tuer'],
|
||||
'zusatz' => $row['zusatz'],
|
||||
'building_unit_count' => $row['building_unit_count'],
|
||||
'showText' => $this->buildShowText($row, 1),
|
||||
'preorderTypes' => ['order']
|
||||
];
|
||||
}
|
||||
|
||||
return $addresses;
|
||||
}
|
||||
|
||||
private function buildShowText(array $row, int $counter): string
|
||||
{
|
||||
$parts = array_filter([
|
||||
$row['stiege'] ? "Stiege {$row['stiege']}" : null,
|
||||
$row['stock'] ? "Stock {$row['stock']}" : null,
|
||||
$row['tuer'] ? "Tür {$row['tuer']}" : null,
|
||||
$row['zusatz'] ?: null
|
||||
]);
|
||||
|
||||
return $parts ? implode(', ', $parts) : "Top {$counter}";
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a new preorder record in the database.
|
||||
* @param array $data The validated preorder data from the form.
|
||||
* @param int $campaignId The ID of the associated preorder campaign.
|
||||
* @return array The result containing the new order code.
|
||||
*/
|
||||
public function createPreorder(array $data, int $campaignId): array
|
||||
{
|
||||
$customer = $data['customer'];
|
||||
$address = $data['address'];
|
||||
|
||||
// Generate a unique code for the preorder
|
||||
$ucode = strtoupper(substr(md5(uniqid(rand(), true)), 0, 10));
|
||||
|
||||
$preorderData = [
|
||||
'ucode' => $ucode,
|
||||
'thetool.Preordercampaign_id' => $campaignId,
|
||||
'oaid' => $address['oaid'],
|
||||
'type' => $data['preorderType'],
|
||||
'connection_type' => $data['connectionType'],
|
||||
'contact_type' => $customer['type'],
|
||||
'firstname' => $customer['firstname'],
|
||||
'lastname' => $customer['lastname'],
|
||||
'company' => $customer['company'] ?? null,
|
||||
'street' => $customer['street'],
|
||||
'housenumber' => $customer['housenumber'],
|
||||
'zip' => $customer['zip'],
|
||||
'city' => $customer['city'],
|
||||
'phone' => $customer['phone'],
|
||||
'email' => $customer['email'],
|
||||
'address_info' => $data['address_info'],
|
||||
'accept_agb' => $data['acceptAgb'] ? 1 : 0,
|
||||
'accept_dsgvo' => $data['acceptDsgvo'] ? 1 : 0,
|
||||
'accept_marketing' => $data['acceptMarketing'] ? 1 : 0,
|
||||
'accept_withdrawal' => $data['acceptWithdrawal'] ? 1 : 0,
|
||||
'addon_data' => json_encode($data['additionalData']),
|
||||
'submit_type' => 'api',
|
||||
'submit_request' => json_encode($data),
|
||||
'order_date' => time(),
|
||||
'create' => time(),
|
||||
'edit' => time(),
|
||||
'create_by' => 0, // System user
|
||||
'edit_by' => 0, // System user
|
||||
];
|
||||
|
||||
$this->db->insert('Preorder', $preorderData);
|
||||
|
||||
return ['code' => $ucode];
|
||||
}
|
||||
}
|
||||
@@ -221,6 +221,8 @@ class PreordercampaignController extends mfBaseController {
|
||||
$data["from_email_name"] = trim($r->from_email_name);
|
||||
$data["from_email"] = trim($r->from_email);
|
||||
$data["netowner_fibu_cost_code"] = trim($r->netowner_fibu_cost_code);
|
||||
$data["iframe_origins"] = trim($r->iframe_origins);
|
||||
$data["iframe_consents"] = trim($r->iframe_consents);
|
||||
|
||||
if($r->from) {
|
||||
$data['from'] = self::dateToTimestamp($r->from);
|
||||
@@ -473,8 +475,8 @@ class PreordercampaignController extends mfBaseController {
|
||||
// Save Status Email Templates
|
||||
foreach($r->mailtemplates as $status_code => $status_data) {
|
||||
$mailtemplate_id = $status_data["mailtemplate_id"];
|
||||
$allow_on_skip = $status_data["allow_on_skip"];
|
||||
$prevent_previous = $status_data["prevent_previous"];
|
||||
$allow_on_skip = $status_data["allow_on_skip"] ?? false;
|
||||
$prevent_previous = $status_data["prevent_previous"] ?? false;
|
||||
|
||||
if(!$mailtemplate_id && !$allow_on_skip && !$prevent_previous) {
|
||||
$mailtemplates_delete[] = $status_code;
|
||||
|
||||
35
db/migrations/20250617100000_add_preorder_cors_columns.php
Normal file
35
db/migrations/20250617100000_add_preorder_cors_columns.php
Normal file
@@ -0,0 +1,35 @@
|
||||
<?php /** @noinspection ALL */
|
||||
declare(strict_types=1);
|
||||
|
||||
use Phinx\Migration\AbstractMigration;
|
||||
|
||||
final class AddNewIndexesThetool extends AbstractMigration
|
||||
{
|
||||
public function up(): void
|
||||
{
|
||||
if ($this->getEnvironment() == "thetool") {
|
||||
$Preordercampaign = $this->table("Preordercampaign");
|
||||
$Preordercampaign->addColumn('iframe_origins', 'json', [
|
||||
'null' => true,
|
||||
'default' => null,
|
||||
'comment' => 'JSON array of allowed CORS origins for the IFrame, e.g., ["https://partner-a.com", "https://partner-b.de"]'
|
||||
]);
|
||||
$Preordercampaign->addColumn('iframe_consents', 'json', [
|
||||
'null' => true,
|
||||
'default' => null,
|
||||
'comment' => 'JSON array of consent information for the IFrame, e.g., [{url: "https://partner-a.com", text: "Partner A Consent", required: true, replace: "Consent"}, {url: "https://partner-b.de", text: "Partner B Consent", required: false, replace: "Consent"}]'
|
||||
]);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
public function down(): void
|
||||
{
|
||||
if ($this->getEnvironment() == "thetool") {
|
||||
$Preordercampaign = $this->table("Preordercampaign");
|
||||
$Preordercampaign->removeColumn('iframe_origins')
|
||||
->removeColumn('iframe_consents')
|
||||
->update();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -184,6 +184,23 @@ class FronkDB {
|
||||
return false;
|
||||
}
|
||||
|
||||
public function fetch_all_assoc($_res = false) {
|
||||
$array = array();
|
||||
$res = $this->result;
|
||||
|
||||
if($_res)
|
||||
$res = $_res;
|
||||
|
||||
if(!$res)
|
||||
return false;
|
||||
|
||||
while($row = mysqli_fetch_assoc($res)) {
|
||||
$array[] = $row;
|
||||
}
|
||||
|
||||
return $array;
|
||||
}
|
||||
|
||||
public function insert($_table, $_data, $_forcestr = array(), $options = array()) {
|
||||
if(empty($_table)) {
|
||||
$this->lastError = "Error constructing INSERT: tablename ommited";
|
||||
|
||||
Reference in New Issue
Block a user