{"id":172890,"date":"2026-03-17T13:14:08","date_gmt":"2026-03-17T03:14:08","guid":{"rendered":"https:\/\/staging.occominternet.com\/?page_id=172890"},"modified":"2026-05-20T18:06:36","modified_gmt":"2026-05-20T08:06:36","slug":"unsubscribe-cart-email","status":"publish","type":"page","link":"https:\/\/staging.occominternet.com\/?page_id=172890","title":{"rendered":"Unsubscribed Successfully"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"172890\" class=\"elementor elementor-172890\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c24b44c e-flex e-con-boxed e-con e-parent\" data-id=\"c24b44c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b334a09 elementor-widget elementor-widget-html\" data-id=\"b334a09\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    body{\r\n      background: #f5f5f5!important;\r\n  }\r\n    \/* ===== Unsubscribe Template - Elementor HTML Widget ===== *\/\r\n    .unsub-wrapper {\r\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n      width: 100%;\r\n      max-width: 1140px;\r\n      margin: 0 auto;\r\n      padding: 20px 0;\r\n      color: #333;\r\n      box-sizing: border-box;\r\n    }\r\n  \r\n    \/* --- Step Card --- *\/\r\n    .unsub-step {\r\n      display: none;\r\n      background: #fff;\r\n      border-radius: 16px;\r\n      padding: 60px 64px;\r\n      text-align: center;\r\n      animation: fadeIn 0.35s ease;\r\n    }\r\n    .unsub-step.active {\r\n      display: block;\r\n    }\r\n    @keyframes fadeIn {\r\n      from { opacity: 0; transform: translateY(12px); }\r\n      to   { opacity: 1; transform: translateY(0); }\r\n    }\r\n  \r\n    \/* --- Typography --- *\/\r\n    .unsub-step h2 {\r\n      font-size: 28px;\r\n      font-weight: 800;\r\n      color: #1a1a1a;\r\n      margin: 0 0 20px;\r\n      line-height: 1.3;\r\n      text-transform: none !important;\r\n      letter-spacing: normal !important;\r\n    }\r\n    .unsub-step p {\r\n      font-size: 16px;\r\n      color: #555;\r\n      line-height: 1.65;\r\n      margin: 0 0 10px;\r\n      word-break: break-word;\r\n    }\r\n    .unsub-step .desc {\r\n      margin-bottom: 32px;\r\n    }\r\n  \r\n    \/* --- Buttons --- *\/\r\n    .unsub-btn-group {\r\n      display: flex;\r\n      justify-content: center;\r\n      gap: 16px;\r\n      flex-wrap: wrap;\r\n      margin-top: 32px;\r\n    }\r\n    .unsub-btn {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 6px;\r\n      padding: 14px 36px;\r\n      border-radius: 50px;\r\n      font-size: 16px;\r\n      font-weight: 600;\r\n      cursor: pointer;\r\n      border: none;\r\n      transition: all 0.25s ease;\r\n      text-decoration: none;\r\n    }\r\n    .unsub-btn-secondary {\r\n      background: #6b7280;\r\n      color: #fff;\r\n    }\r\n    .unsub-btn-secondary:hover {\r\n      background: #4b5563;\r\n    }\r\n    .unsub-btn-primary {\r\n      background: #6b7280;\r\n      color: #fff;\r\n    }\r\n    .unsub-btn-primary:hover {\r\n      background: #4b5563;\r\n    }\r\n    a.unsub-btn,\r\n    a.unsub-btn:hover,\r\n    a.unsub-btn:visited,\r\n    a.unsub-btn:active,\r\n    a.unsub-btn:focus {\r\n      color: #fff;\r\n      text-decoration: none;\r\n    }\r\n  \r\n    \/* --- Overlay \/ Modal --- *\/\r\n    .unsub-overlay {\r\n      display: none;\r\n      position: fixed;\r\n      inset: 0;\r\n      background: rgba(0,0,0,0.55);\r\n      z-index: 9998;\r\n      animation: fadeOverlay 0.3s ease;\r\n    }\r\n    .unsub-overlay.active {\r\n      display: block;\r\n    }\r\n    @keyframes fadeOverlay {\r\n      from { opacity: 0; }\r\n      to   { opacity: 1; }\r\n    }\r\n  \r\n    .unsub-modal {\r\n      display: none;\r\n      position: fixed;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n      background: #fff;\r\n      border-radius: 20px;\r\n      padding: 52px 48px;\r\n      width: 90%;\r\n      max-width: 580px;\r\n      z-index: 9999;\r\n      text-align: center;\r\n      box-shadow: 0 24px 60px rgba(0,0,0,0.25);\r\n      animation: modalIn 0.35s ease;\r\n    }\r\n    .unsub-modal.active {\r\n      display: block;\r\n    }\r\n    @keyframes modalIn {\r\n      from { opacity: 0; transform: translate(-50%, -45%); }\r\n      to   { opacity: 1; transform: translate(-50%, -50%); }\r\n    }\r\n  \r\n    .unsub-modal h2 {\r\n      font-size: 28px;\r\n      font-weight: 800;\r\n      color: #1a1a1a;\r\n      margin: 0 0 14px;\r\n      text-transform: none !important;\r\n      letter-spacing: normal !important;\r\n    }\r\n    .unsub-modal p {\r\n      font-size: 15px;\r\n      color: #555;\r\n      line-height: 1.6;\r\n      margin: 0 0 24px;\r\n      word-break: break-word;\r\n    }\r\n  \r\n    \/* --- Reason Options --- *\/\r\n    .unsub-reasons {\r\n      text-align: left;\r\n      margin-bottom: 16px;\r\n    }\r\n    .unsub-reasons label {\r\n      font-weight: 600;\r\n      font-size: 14px;\r\n      color: #1a1a1a;\r\n      display: block;\r\n      margin-bottom: 10px;\r\n    }\r\n    .unsub-reasons .reason-item {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 10px;\r\n      margin-bottom: 10px;\r\n      font-size: 15px;\r\n      color: #333;\r\n      cursor: pointer;\r\n      user-select: none;\r\n    }\r\n    .unsub-reasons .reason-item input[type=\"checkbox\"] {\r\n      width: 18px;\r\n      height: 18px;\r\n      accent-color: #1f6b53;\r\n      cursor: pointer;\r\n      flex-shrink: 0;\r\n    }\r\n  \r\n    \/* --- Textarea --- *\/\r\n    .unsub-textarea {\r\n      width: 100%;\r\n      min-height: 110px;\r\n      border: 1px solid #ddd;\r\n      border-radius: 10px;\r\n      padding: 14px;\r\n      font-size: 15px;\r\n      font-family: inherit;\r\n      resize: vertical;\r\n      margin-bottom: 8px;\r\n      box-sizing: border-box;\r\n      transition: border-color 0.2s;\r\n      max-width: 100%;\r\n    }\r\n    .unsub-textarea:focus {\r\n      outline: none;\r\n      border-color: #6b7280;\r\n    }\r\n    .unsub-textarea.visible {\r\n      display: block !important;\r\n    }\r\n  \r\n    \/* --- Modal Buttons --- *\/\r\n    .unsub-modal .unsub-btn-group {\r\n      margin-top: 24px;\r\n    }\r\n  \r\n    \/* --- Success highlights --- *\/\r\n    .unsub-highlights {\r\n      display: flex;\r\n      justify-content: center;\r\n      gap: 8px;\r\n      flex-wrap: wrap;\r\n      margin: 16px 0 8px;\r\n    }\r\n    .unsub-highlights span {\r\n      font-size: 15px;\r\n      font-weight: 700;\r\n      color: #1a1a1a;\r\n    }\r\n    .unsub-highlights span::before {\r\n      content: \"\u00b7\";\r\n      margin-right: 2px;\r\n    }\r\n  \r\n    \/* --- Loading Spinner --- *\/\r\n    .unsub-btn.loading {\r\n      pointer-events: none;\r\n      opacity: 0.75;\r\n      position: relative;\r\n    }\r\n    .unsub-btn.loading::after {\r\n      content: \"\";\r\n      display: inline-block;\r\n      width: 16px;\r\n      height: 16px;\r\n      border: 2px solid rgba(255,255,255,0.3);\r\n      border-top-color: #fff;\r\n      border-radius: 50%;\r\n      animation: spin 0.6s linear infinite;\r\n      margin-left: 8px;\r\n    }\r\n    @keyframes spin {\r\n      to { transform: rotate(360deg); }\r\n    }\r\n  \r\n    \/* --- Responsive --- *\/\r\n    @media (min-width: 1024px) {\r\n      .unsub-step { padding: 72px 100px; }\r\n      .unsub-step h2 { font-size: 36px; }\r\n      .unsub-step p { font-size: 17px; }\r\n      .unsub-btn { padding: 16px 42px; font-size: 17px; }\r\n      .unsub-modal { max-width: 640px; padding: 56px 52px; }\r\n      .unsub-modal h2 { font-size: 32px; }\r\n      .unsub-modal p { font-size: 16px; }\r\n      .unsub-reasons .reason-item { font-size: 16px; margin-bottom: 12px; }\r\n      .unsub-textarea { min-height: 120px; font-size: 16px; }\r\n      .unsub-highlights span { font-size: 16px; }\r\n    }\r\n    @media (max-width: 768px) {\r\n      .unsub-wrapper { padding: 12px; }\r\n      .unsub-step { padding: 36px 22px; }\r\n      .unsub-step h2 { font-size: 25px; }\r\n      .unsub-step p { font-size: 15px; }\r\n      .unsub-modal {\r\n        padding: 32px 22px;\r\n        max-width: 94%;\r\n        border-radius: 16px;\r\n      }\r\n      .unsub-modal h2 { font-size: 25px; }\r\n      .unsub-btn { padding: 12px 26px; font-size: 15px; }\r\n    }\r\n    @media (max-width: 520px) {\r\n      .unsub-step { padding: 28px 18px; }\r\n      .unsub-modal {\r\n        padding: 24px 18px;\r\n        width: 94%;\r\n        max-height: 88vh;\r\n        overflow-y: auto;\r\n      }\r\n      .unsub-step h2,\r\n      .unsub-modal h2 {\r\n        font-size: 21px;\r\n        text-align: left;\r\n      }\r\n      .unsub-step p,\r\n      .unsub-modal p {\r\n        font-size: 14px;\r\n        text-align: left;\r\n      }\r\n      .unsub-highlights {\r\n        justify-content: flex-start;\r\n        flex-direction: column;\r\n        align-items: flex-start;\r\n        gap: 6px;\r\n      }\r\n      .unsub-highlights span {\r\n        display: list-item;\r\n        list-style-type: disc;\r\n        list-style-position: inside;\r\n        margin: 0;\r\n      }\r\n      .unsub-highlights span::before {\r\n        content: none;\r\n      }\r\n      .unsub-btn {\r\n        padding: 12px 18px;\r\n        font-size: 14px;\r\n        width: auto;\r\n        min-width: 220px;\r\n        max-width: 260px;\r\n        justify-content: center;\r\n      }\r\n      .unsub-reasons .reason-item { font-size: 13px; }\r\n      .unsub-btn-group {\r\n        flex-direction: column;\r\n        align-items: center;\r\n      }\r\n    }\r\n  <\/style>\r\n  \r\n  <!-- ===== STEP 1: Confirm Unsubscribe ===== -->\r\n  <div class=\"unsub-wrapper\">\r\n    <div class=\"unsub-step active\" id=\"unsub-step1\">\r\n      <h2>Unsubscribe from Occom Emails<\/h2>\r\n      <p class=\"desc\">\r\n        Are you sure you would like to stop receiving promotional offers and exclusive deals from Occom?<br>\r\n        If you unsubscribe, you will no longer receive offers, special promotions, or discounts.\r\n      <\/p>\r\n      <div class=\"unsub-btn-group\">\r\n        \r\n        <button class=\"unsub-btn unsub-btn-primary\" onclick=\"unsubShowFeedback()\">Confirm unsubscribe \u2192<\/button>\r\n      <\/div>\r\n    <\/div>\r\n  \r\n    <!-- ===== ERROR: No accid ===== -->\r\n    <div class=\"unsub-step\" id=\"unsub-error\">\r\n      <h2>Invalid unsubscribe link<\/h2>\r\n      <p class=\"desc\">\r\n        This unsubscribe link is invalid or has expired.<br>\r\n        Please re-enter from the unsubscribe link in your email.\r\n      <\/p>\r\n    <\/div>\r\n  \r\n    <!-- ===== STEP 3: Success ===== -->\r\n    <div class=\"unsub-step\" id=\"unsub-step3\">\r\n      <h2>You won\u2019t hear from us about this cart again<\/h2>\r\n      <p>\r\n        Your unsubscribe request has been confirmed, and we won\u2019t send any more abandoned cart emails.\r\n      <\/p>\r\n      <p>If you decide to return in the future, we\u2019d be glad to welcome you back.<\/p>\r\n      <div class=\"unsub-btn-group\">\r\n        <a class=\"unsub-btn unsub-btn-primary\" href=\"\/\" >Back to Homepage \u2192<\/a>\r\n      \r\n    <\/div>\r\n  <\/div>\r\n  <\/div>\r\n  \r\n  \r\n <script>\r\n(function () {\r\n\r\n  \/\/ Get accid from URL\r\n  const params = new URLSearchParams(window.location.search);\r\n  const accid = params.get('accid');\r\n\r\n  const step1 = document.getElementById('unsub-step1');\r\n  const step3 = document.getElementById('unsub-step3');\r\n  const errorStep = document.getElementById('unsub-error');\r\n\r\n  \/\/ no accid \u2192 show error\r\n  if (!accid) {\r\n    step1.classList.remove('active');\r\n    errorStep.classList.add('active');\r\n    return;\r\n  }\r\n\r\n  \/\/ Expose function globally (used by button)\r\n  window.unsubShowFeedback = function () {\r\n\r\n    const btn = document.querySelector('.unsub-btn-primary');\r\n    btn.classList.add('loading');\r\n\r\n    \/\/ Call API\r\n    fetch(`\/wp-json\/occom\/v1\/unsubscribe\/${accid}`)\r\n      .then(res => res.json())\r\n      .then(data => {\r\n\r\n        btn.classList.remove('loading');\r\n\r\n        if (data.status === 'success') {\r\n\r\n          step1.classList.remove('active');\r\n          step3.classList.add('active');\r\n\r\n        } else {\r\n\r\n          step1.classList.remove('active');\r\n          errorStep.classList.add('active');\r\n\r\n        }\r\n      })\r\n      .catch(() => {\r\n\r\n        btn.classList.remove('loading');\r\n\r\n        step1.classList.remove('active');\r\n        errorStep.classList.add('active');\r\n\r\n      });\r\n  };\r\n\r\n})();\r\n<\/script>\r\n  \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Unsubscribe from Occom Emails Are you sure you would like to stop receiving promotional offers and exclusive deals from Occom? If you unsubscribe, you will no longer receive offers, special promotions, or discounts. Confirm unsubscribe \u2192 Invalid unsubscribe link This unsubscribe link is invalid or has expired. Please re-enter from the unsubscribe link in your &#8230; <a title=\"Unsubscribed Successfully\" class=\"read-more\" href=\"https:\/\/staging.occominternet.com\/?page_id=172890\" aria-label=\"Read more about Unsubscribed Successfully\">Read more<\/a><\/p>\n","protected":false},"author":26,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[329],"class_list":{"0":"post-172890","1":"page","2":"type-page","3":"status-publish","5":"category-au"},"acf":[],"_links":{"self":[{"href":"https:\/\/staging.occominternet.com\/index.php?rest_route=\/wp\/v2\/pages\/172890","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.occominternet.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/staging.occominternet.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/staging.occominternet.com\/index.php?rest_route=\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.occominternet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=172890"}],"version-history":[{"count":5,"href":"https:\/\/staging.occominternet.com\/index.php?rest_route=\/wp\/v2\/pages\/172890\/revisions"}],"predecessor-version":[{"id":173643,"href":"https:\/\/staging.occominternet.com\/index.php?rest_route=\/wp\/v2\/pages\/172890\/revisions\/173643"}],"wp:attachment":[{"href":"https:\/\/staging.occominternet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=172890"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.occominternet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=172890"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}