公開キャンセルAPI

<div class="order-cancel-section">
  <div class="order-cancel-container">
    <div class="order-cancel-form">
      {% if section.settings.show_heading %}
        <h2>{{ section.settings.heading }}</h2>
      {% endif %}
      
      {% if section.settings.show_description %}
        <p class="form-description">{{ section.settings.description }}</p>
      {% endif %}
      
      <form id="cancelOrderForm">
        <div class="form-group">
          <label for="orderNumber">{{ section.settings.order_label }}</label>
          <input 
            type="text" 
            id="orderNumber" 
            name="orderNumber" 
            required
            placeholder="{{ section.settings.order_placeholder }}"
          >
          <small>{{ section.settings.order_help_text }}</small>
        </div>
        
        <div class="form-group">
          <label for="email">{{ section.settings.email_label }}</label>
          <input 
            type="email" 
            id="email" 
            name="email" 
            required
            placeholder="{{ section.settings.email_placeholder }}"
          >
        </div>
        
        <button type="submit" id="submitBtn">{{ section.settings.button_text }}</button>
        <div id="message"></div>
      </form>
    </div>
  </div>
</div>

<script>
document.getElementById('cancelOrderForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  
  const submitBtn = document.getElementById('submitBtn');
  const messageDiv = document.getElementById('message');
  
  submitBtn.disabled = true;
  submitBtn.textContent = 'Processing...';
  messageDiv.textContent = '';
  messageDiv.className = '';
  
  const orderNumber = document.getElementById('orderNumber').value.trim();
  const email = document.getElementById('email').value.trim();
  
  const shopDomain = {{ shop.permanent_domain | json }};
  const domainSlug = shopDomain.replace('.myshopify.com', '');
  const apiUrl = {{ section.settings.api_url | json }};
  
  const statusMessages = {
    'SUCCESS': {{ section.settings.msg_success | json }},
    'ORDER_NOT_FOUND': {{ section.settings.msg_order_not_found | json }},
    'NOT_CANCELLABLE': {{ section.settings.msg_not_cancellable | json }},
    'ORDER_FULFILLED': {{ section.settings.msg_order_fulfilled | json }},
    'NOT_EDITABLE': {{ section.settings.msg_not_editable | json }},
    'CANCEL_DISABLED': {{ section.settings.msg_cancel_disabled | json }},
    'APP_INACTIVE': {{ section.settings.msg_app_inactive | json }},
    'FAILED': {{ section.settings.msg_failed | json }}
  };
  
  const buttonText = {{ section.settings.button_text | json }};
  
  try {
    const response = await fetch(`${apiUrl}/api/public/v1/${domainSlug}/cancel_order`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: JSON.stringify({
        order_number: orderNumber,
        email: email
      })
    });
    
    const result = await response.json();
    
    if (result.success === true || result.status === 'SUCCESS') {
      messageDiv.className = 'success';
      messageDiv.textContent = statusMessages['SUCCESS'];
      document.getElementById('cancelOrderForm').reset();
    } else {
      messageDiv.className = 'error';
      messageDiv.textContent = statusMessages[result.status] || statusMessages['FAILED'];
    }
    
  } catch (error) {
    console.error('Error:', error);
    messageDiv.className = 'error';
    messageDiv.textContent = statusMessages['FAILED'];
  } finally {
    submitBtn.disabled = false;
    submitBtn.textContent = buttonText;
  }
});
</script>

<style>
.order-cancel-section {
  padding: {{ section.settings.section_padding_top }}px 0 {{ section.settings.section_padding_bottom }}px;
  background: {{ section.settings.background_color }};
}

.order-cancel-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.order-cancel-form {
  max-width: {{ section.settings.form_width }}px;
  margin: 0 auto;
  padding: {{ section.settings.form_padding }}px;
  border: 1px solid {{ section.settings.border_color }};
  border-radius: {{ section.settings.border_radius }}px;
  background: {{ section.settings.form_background }};
}

.order-cancel-form h2 {
  margin-bottom: 10px;
  font-size: {{ section.settings.heading_size }}px;
  color: {{ section.settings.heading_color }};
  text-align: {{ section.settings.text_align }};
}

.order-cancel-form .form-description {
  margin-bottom: 24px;
  color: {{ section.settings.description_color }};
  text-align: {{ section.settings.text_align }};
}

.form-group {
  margin-bottom: 20px;
  text-align: left;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
}

.form-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid {{ section.settings.input_border_color }};
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-group small {
  display: block;
  margin-top: 4px;
  color: #666;
  font-size: 12px;
}

button {
  width: 100%;
  padding: 14px;
  background: {{ section.settings.button_background }};
  color: {{ section.settings.button_text_color }};
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#message {
  margin-top: 20px;
  padding: 12px;
  border-radius: 4px;
  text-align: center;
}

#message.success {
  background: #d4edda;
  color: #155724;
}

#message.error {
  background: #f8d7da;
  color: #721c24;
}
</style>

{% schema %}
{
  "name": "Order Cancellation Form",
  "settings": [
    {
      "type": "text",
      "id": "api_url",
      "label": "API URL",
      "default": "https://revize.untechnickle.com"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Cancel Your Order"
    },
    {
      "type": "textarea",
      "id": "description",
      "label": "Description",
      "default": "Enter your order number and email to cancel your order"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "Cancel Order"
    },
    {
      "type": "textarea",
      "id": "msg_success",
      "label": "Success Message",
      "default": "Your order has been cancelled successfully!"
    },
    {
      "type": "textarea",
      "id": "msg_order_not_found",
      "label": "Order Not Found",
      "default": "We couldn't find an order with that number and email."
    },
    {
      "type": "textarea",
      "id": "msg_not_cancellable",
      "label": "Not Cancellable",
      "default": "This order cannot be cancelled due to our cancellation policy."
    },
    {
      "type": "textarea",
      "id": "msg_order_fulfilled",
      "label": "Order Fulfilled",
      "default": "This order has already been fulfilled and cannot be cancelled."
    },
    {
      "type": "textarea",
      "id": "msg_failed",
      "label": "General Error",
      "default": "Unable to process your request. Please try again."
    }
  ],
  "presets": [{ "name": "Order Cancellation Form" }]
}
{% endschema %}