diff options
| -rw-r--r-- | src/routes/(app)/[username]/settings/[...tab]/_shopify.svelte | 57 |
1 files changed, 36 insertions, 21 deletions
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_shopify.svelte b/src/routes/(app)/[username]/settings/[...tab]/_shopify.svelte index 7b9cc40b..aeecc4d7 100644 --- a/src/routes/(app)/[username]/settings/[...tab]/_shopify.svelte +++ b/src/routes/(app)/[username]/settings/[...tab]/_shopify.svelte @@ -4,15 +4,23 @@ import { page } from '$app/stores'; export let user; - $: paymentsUrl = user.shopifyStore && "https://admin.shopify.com/store/" + user.shopifyStore + "/settings/payments"; - $: checkoutUrl = user.shopifyStore && "https://admin.shopify.com/store/" + user.shopifyStore + "/settings/checkout"; - $: appsUrl = user.shopifyStore && "https://admin.shopify.com/store/" + user.shopifyStore + "/settings/apps/development"; + $: paymentsUrl = + user.shopifyStore && + 'https://admin.shopify.com/store/' + user.shopifyStore + '/settings/payments'; + $: checkoutUrl = + user.shopifyStore && + 'https://admin.shopify.com/store/' + user.shopifyStore + '/settings/checkout'; + $: appsUrl = + user.shopifyStore && + 'https://admin.shopify.com/store/' + user.shopifyStore + '/settings/apps/development'; </script> <div> <label for="shopifyStore" class="font-bold mb-1 block">Store ID</label> <div class="flex mb-2"> - <div class="text-gray-600 p-4 my-auto bg-gray-100 border rounded-l-2xl border-r-0 pr-1">admin.shopify.com/store/</div> + <div class="text-gray-600 p-4 my-auto bg-gray-100 border rounded-l-2xl border-r-0 pr-1"> + admin.shopify.com/store/ + </div> <input type="text" name="shopifyStore" @@ -21,34 +29,41 @@ /> </div> <p class="text-secondary my-2"> - Add Bitcoin under <a class:active={!!paymentsUrl} href={paymentsUrl || undefined}>Payments > Manual payment methods</a> with a description like "Pay with Bitcoin". + Add Bitcoin under <a class:active={!!paymentsUrl} href={paymentsUrl || undefined} + >Payments > Manual payment methods</a + > with a description like "Pay with Bitcoin". </p> </div> <div> - <label for="shopifyToken" class="font-bold mb-1 block">Admin API token</label> - <input type="text" name="shopifyToken" bind:value={user.shopifyToken} /> - -<p class="text-secondary my-2"> -Create an app named Coinos under <a class:active={!!appsUrl} href={appsUrl || undefined}>Apps > App Development</a> -</p> - -<p class="text-secondary my-2"> -Edit the Admin API scopes to enable <code class="text-black">write_orders</code> then -install the app into your store and copy the Admin API access token here. + <label for="display" class="font-bold mb-1 block">Additional scripts</label> + <p class="text-secondary my-2"> + Copy this into <a class:active={!!paymentsUrl} href={checkoutUrl} + >Checkout -> Additional scripts</a + > + </p> + <textarea rows={5} type="text" name="shopifyScripts" readonly><script src="{`${$page.url.protocol}//${$page.url.host}/${user.username}/shopify.js`}"> </script></textarea> </div> <div> - <label for="display" class="font-bold mb-1 block">Additional scripts</label> - <textarea rows={5} type="text" name="shopifyScripts" readonly><script src="{`${$page.url.protocol}//${$page.url.host}/${user.username}/shopify.js`}"> </script></textarea> + <label for="shopifyToken" class="font-bold mb-1 block">Admin API token <span class="font-normal">(Optional)</span></label> + <p class="text-secondary my-2">Coinos can automatically mark orders as Paid if you provide an API token. + <input class="my-4" type="text" name="shopifyToken" bind:value={user.shopifyToken} /> + + <p class="text-secondary my-2"> + Create a new app in <a class:active={!!appsUrl} href={appsUrl || undefined} + >Apps > App Development</a + > + </p> <p class="text-secondary my-2"> - Copy this into <a class:active={!!paymentsUrl} href={checkoutUrl}>Checkout -> Additional scripts</a> + Edit the Admin API scopes to enable <code class="text-black">write_orders</code> permission then install the + app into your store and copy the Admin API access token here. </p> </div> <style> - .active { - @apply text-blue-500; - } + .active { + @apply text-blue-500; + } </style> |