{"id":8,"date":"2026-07-02T07:33:27","date_gmt":"2026-07-02T07:33:27","guid":{"rendered":"https:\/\/quote.keybridge-conveyancing.co.uk\/?page_id=8"},"modified":"2026-07-02T07:33:27","modified_gmt":"2026-07-02T07:33:27","slug":"confirmation","status":"publish","type":"page","link":"https:\/\/quote.keybridge-conveyancing.co.uk\/?page_id=8","title":{"rendered":"Confirmation"},"content":{"rendered":"\r\n<div class=\"mcq-confirmation-wrapper-fullwidth\"\r\n     x-data=\"mcqConfirmation()\"\r\n     x-init=\"init()\"\r\n     data-status=\"\"\r\n     data-mode=\"\"\r\n     data-estimate-id=\"\"\r\n     data-sales-ref=\"\"\r\n     data-firm-id=\"0\"\r\n     data-api-key=\"\"\r\n     data-firm-logo-url=\"\"\r\n     data-firm-name=\"\">\r\n\r\n    \r\n        <!-- UNKNOWN STATE (no status parameter) -->\r\n        <div class=\"mcq-confirmation-unknown\" style=\"text-align: center;\">\r\n            <h1 style=\"color: #1f2937;\">Confirmation Page<\/h1>\r\n            <p style=\"color: #6b7280;\">No confirmation data available. Please check your email for your confirmation details.<\/p>\r\n            <a href=\"https:\/\/quote.keybridge-conveyancing.co.uk\"\r\n               style=\"display: inline-block; margin-top: 20px; background: #3b82f6; color: white; padding: 12px 24px; border-radius: 6px; text-decoration: none; font-weight: 600;\">\r\n                Return Home\r\n            <\/a>\r\n        <\/div>\r\n\r\n    \r\n    <!-- Loading State -->\r\n    <div x-show=\"loading\" style=\"text-align: center; padding: 40px;\">\r\n        <div style=\"display: inline-block; width: 50px; height: 50px; border: 4px solid #e5e7eb; border-top-color: #3b82f6; border-radius: 50%; animation: spin 1s linear infinite;\"><\/div>\r\n        <p style=\"margin-top: 20px; color: #6b7280;\">Loading your confirmation details...<\/p>\r\n    <\/div>\r\n\r\n    <!-- Error Loading State -->\r\n    <div x-show=\"error && !loading\" style=\"text-align: center; padding: 40px;\">\r\n        <p style=\"color: #ef4444; font-weight: 600; margin-bottom: 10px;\">Failed to load confirmation details<\/p>\r\n        <p style=\"color: #6b7280;\" x-text=\"errorMessage\"><\/p>\r\n        <button @click=\"init()\"\r\n                style=\"margin-top: 20px; background: #3b82f6; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: 600;\">\r\n            Try Again\r\n        <\/button>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<style>\r\n    @keyframes spin {\r\n        to { transform: rotate(360deg); }\r\n    }\r\n<\/style>\r\n\r\n<script>\r\nfunction mcqConfirmation() {\r\n    return {\r\n        loading: false,\r\n        error: false,\r\n        errorMessage: '',\r\n        estimateData: null,\r\n        estimate: null,\r\n        firm: null,\r\n        totalFees: 0,\r\n        displayReference: '',\r\n        retrieveUrl: '',\r\n\r\n        async init() {\r\n            \/\/ Read from data attributes instead of URL parameters (more secure)\r\n            const wrapper = this.$el;\r\n            const status = wrapper.dataset.status || '';\r\n            const mode = wrapper.dataset.mode || '';\r\n            const estimateId = wrapper.dataset.estimateId || '';\r\n            const salesRef = wrapper.dataset.salesRef || '';\r\n            const firmId = wrapper.dataset.firmId || '';\r\n            const apiKey = wrapper.dataset.apiKey || '';\r\n            const firmLogoUrl = wrapper.dataset.firmLogoUrl || '';\r\n            const firmName = wrapper.dataset.firmName || '';\r\n\r\n            \/\/ Set firm data from session immediately (has the correct logo URL from results page)\r\n            \/\/ This is our fallback and will be used if API doesn't return valid logo\r\n            if (firmLogoUrl || firmName) {\r\n                this.firm = {\r\n                    logoPath: firmLogoUrl,\r\n                    name: firmName\r\n                };\r\n            }\r\n\r\n            \/\/ Only fetch data if we have a success status\r\n            if (status !== 'success') {\r\n                return;\r\n            }\r\n\r\n            \/\/ If we don't have the required params, show error\r\n            if (!apiKey || (!estimateId && !salesRef)) {\r\n                this.error = true;\r\n                this.errorMessage = 'Missing required confirmation data';\r\n                console.error('Missing apiKey, estimateId, or salesRef in data attributes');\r\n                return;\r\n            }\r\n\r\n            this.loading = true;\r\n            this.error = false;\r\n\r\n            try {\r\n                \/\/ Fetch full estimate data from our endpoint\r\n                const queryParams = new URLSearchParams({\r\n                    estimateId: estimateId || '',\r\n                    salesRef: salesRef || '',\r\n                    apiKey: apiKey,\r\n                    firmId: firmId || ''\r\n                });\r\n\r\n                const response = await fetch(`https:\/\/quote.keybridge-conveyancing.co.uk\/index.php?rest_route=\/mcq\/v1\/get-confirmation-data?${queryParams}`);\r\n                const data = await response.json();\r\n\r\n                if (!data.success) {\r\n                    throw new Error(data.message || 'Failed to load confirmation data');\r\n                }\r\n\r\n                this.estimateData = data.data;\r\n                this.estimate = data.data.estimate;\r\n\r\n                console.log('Confirmation data received:', data.data);\r\n                console.log('Estimate:', data.data.estimate);\r\n                console.log('Firm:', data.data.firm);\r\n\r\n                \/\/ Try to get fresh firm data from API (S3 URLs expire after time)\r\n                \/\/ Try different possible locations for firm data in the estimate\r\n                const estimateFirmFromContent = data.data.estimate?.content?.[0]?.conveyancerFirm;\r\n                const estimateFirmFromQuotes = data.data.estimate?.quotes?.[0]?.conveyancerFirm;\r\n                const estimateFirmFromTop = data.data.estimate?.conveyancerFirm;\r\n                const separateFirm = data.data.firm;\r\n\r\n                console.log('Firm from estimate content:', estimateFirmFromContent);\r\n                console.log('Firm from estimate quotes:', estimateFirmFromQuotes);\r\n                console.log('Firm from estimate top:', estimateFirmFromTop);\r\n                console.log('Separate firm:', separateFirm);\r\n\r\n                \/\/ Pick the estimate firm from wherever it exists\r\n                const estimateFirm = estimateFirmFromContent || estimateFirmFromQuotes || estimateFirmFromTop;\r\n\r\n                \/\/ Smart selection: prefer API firm data with valid S3 logo URL, but keep session logo as fallback\r\n                let apiLogoUrl = null;\r\n\r\n                if (estimateFirm?.logoPath && estimateFirm.logoPath.startsWith('http')) {\r\n                    \/\/ Estimate firm has valid S3 logo URL - prefer this\r\n                    console.log('\u2705 Using fresh logo URL from estimate API');\r\n                    apiLogoUrl = estimateFirm.logoPath;\r\n                    this.firm = estimateFirm;\r\n                } else if (separateFirm?.logoPath && separateFirm.logoPath.startsWith('http')) {\r\n                    \/\/ Separate firm has valid S3 logo URL - use it\r\n                    console.log('\u2705 Using fresh logo URL from separate firm API');\r\n                    apiLogoUrl = separateFirm.logoPath;\r\n                    this.firm = separateFirm;\r\n                } else if (estimateFirm || separateFirm) {\r\n                    \/\/ API returned firm data but no valid logo URL\r\n                    \/\/ Use firm data from API but preserve the logo URL from session (stored from results page)\r\n                    console.log('\u26a0\ufe0f API returned firm but no valid logo URL - preserving session logo');\r\n                    console.log('Session logo URL:', this.firm?.logoPath);\r\n                    const apiFirm = estimateFirm || separateFirm;\r\n                    this.firm = {\r\n                        ...apiFirm,\r\n                        logoPath: this.firm?.logoPath || '', \/\/ Keep session logo URL\r\n                        name: apiFirm.name || this.firm?.name || ''\r\n                    };\r\n                } else {\r\n                    \/\/ API returned nothing at all\r\n                    console.log('\u26a0\ufe0f API returned no firm data - using session firm data');\r\n                    console.log('Session logo URL:', this.firm?.logoPath);\r\n                }\r\n                \/\/ Final firm data being used:\r\n                console.log('Final firm logo URL:', this.firm?.logoPath);\r\n\r\n                \/\/ Extract total fees\r\n                if (this.estimate?.content?.[0]?.totalLegalFeesAndDisbursements?.total) {\r\n                    this.totalFees = this.estimate.content[0].totalLegalFeesAndDisbursements.total;\r\n                }\r\n\r\n                \/\/ Extract display reference (identifier from API)\r\n                this.displayReference = this.estimate?.request?.identifier || 'N\/A';\r\n\r\n                \/\/ Build retrieve URL\r\n                const clientEmail = this.estimate?.request?.clients?.[0]?.email || '';\r\n                if (this.displayReference && clientEmail) {\r\n                    this.retrieveUrl = `https:\/\/quote.keybridge-conveyancing.co.uk\/retrieve-quote?reference=${encodeURIComponent(this.displayReference)}&email=${encodeURIComponent(clientEmail)}`;\r\n                } else {\r\n                    this.retrieveUrl = `https:\/\/quote.keybridge-conveyancing.co.uk\/retrieve-quote`;\r\n                }\r\n\r\n            } catch (err) {\r\n                console.error('Error loading confirmation:', err);\r\n                this.error = true;\r\n                this.errorMessage = err.message || 'An unexpected error occurred';\r\n            } finally {\r\n                this.loading = false;\r\n            }\r\n        }\r\n    };\r\n}\r\n<\/script>\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-mcq-confirmation.php","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/quote.keybridge-conveyancing.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quote.keybridge-conveyancing.co.uk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/quote.keybridge-conveyancing.co.uk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/quote.keybridge-conveyancing.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/quote.keybridge-conveyancing.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":0,"href":"https:\/\/quote.keybridge-conveyancing.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"wp:attachment":[{"href":"https:\/\/quote.keybridge-conveyancing.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}